AJAX--Express速成

这篇具有很好参考价值的文章主要介绍了AJAX--Express速成。希望对大家有所帮助。如果存在错误或未考虑完全的地方,请大家不吝赐教,您也可以点击"举报违法"按钮提交疑问。

一、基本概念

1、AJAX(Asynchronous JavaScript And XML),即为异步的JavaScript 和 XML。

2、异步的JavaScript

它可以异步地向服务器发送请求,在等待响应的过程中,不会阻塞当前页面。浏览器可以做自己的事情。直到成功获取响应后,浏览器才开始处理响应数据。

3、XML

是前后端数据通信时传输数据的一种格式。现在比较常用的是 JSON

总 : Ajax就是在浏览器不重新加载网页的情况下,对页面的某部分进行更新。

4、优势:通过AJAX从浏览器向服务器发送异步请求,无刷新获取数据

   缺点:

 

二、Ajax请求基本步骤

引入express框架创建服务端 server.js

// 1、引入express框架
const express = require('express');

// 2、创建应用对象
const app = express();

// 3、创建路由规则
// Request是对请求报文的封装
// Response是对响应报文的封装
app.get('/server',(request,response) =>{
    // 设置响应头  设置允许跨域
    response.setHeader('Access-Control-Allow-Origin','*');
    // 设置响应
    response.send('这是服务端发送的响应报文')
})

// 4、监听端口、启动服务
app.listen(8000,() =>{
    console.log("服务已经启动.......")
})

Ajax请求五步骤:

1.创建一个xhr对象

2.xhr.open()准备发送请求

3.xhr.send()发送请求

4.使用xhr的readystatechange属性,判断Ajax的状态码

5.判断HTTP的状态码

 GET请求实例:点击发送请求按键后,响应报文呈现在div“result”内

    <button>点击发送请求</button>
    <div id="result"></div>
    <script>
        // 获取button元素
        const btn = document.getElementsByTagName('button')[0];
        // 获取dom节点
        const result = document.getElementById('result');

        // 绑定事件 进行 《四步》 AJAX操作
        btn.onclick = function(){
            // 1、创建对象
            const xhr = new XMLHttpRequest();
            // 2、初始化 设置请求方法 & URL
            xhr.open('GET','http://127.0.0.1:8000/server');
            // 3、发送
            xhr.send();
            // 4、事件绑定 处理服务端返回的结果
            /*
                on表示当 、、时候;readystate 是xhr对象中的属性,表示状态0 1 2 3 4 ;
            */
           xhr.onreadystatechange = function(){
            //判断服务端是否返回所有结果
            if(xhr.readyState === 4){
                //判断是否是正常的 2XX 即为正常
                if(xhr.status >= 200 && xhr.status < 300){
                    //处理结果 行 头 体 
                    // console.log(xhr.status);//响应行 -- 状态码
                    // console.log(xhr.statusText);//响应行 -- 状态字符串
                    // console.log(xhr.getAllResponseHeaders());//所有响应头
                    // console.log(xhr.response);//响应体
                    // 将响应信息放在result块内
                    result.innerHTML = xhr.response;
                }else{
                    alert('出错了');
                }
               }
           }
        }
    </script>

POST请求实例:鼠标进入div内就会自动发送请求

服务端添加post方法

app.post('/server',(request,response) =>{
    // 设置响应头  设置允许跨域
    response.setHeader('Access-Control-Allow-Origin','*');
    // 设置响应
    response.send('这是服务端POST发送的响应报文')
});

浏览器端

<div id="result"></div>
    <script>
        // 获取元素对象
        const result = document.getElementById("result");
        // 绑定事件  鼠标进入div内就会触发事件
        result.addEventListener("mouseover",function(){
            // 1、创建对象
            const xhr = new XMLHttpRequest();
            // 2、初始化 设置请求类型与url
            xhr.open('POST','http://127.0.0.1:8000/server');
            // 3、发送
            xhr.send();
            // 4、事件绑定
            xhr.onreadystatechange = function(){
                if(xhr.readyState === 4){
                    if(xhr.status >= 200 && xhr.status < 300){
                        result.innerHTML = xhr.response;
                    }
                }
            }
        })
    </script>

三、同源策略

1、同源策略:浏览器的安全策略,要求协议、域名、端口号完全相同。

2、跨域问题

https(协议)://a.xxx.com(域名):8080(端口号)/flie/list(路径)

只要协议、域名、端口号,只要有任何一个不一样,都是不同域

Ajax引擎默认遵守同源策略。

3、解决跨域常用方法---使用中间代理

AJAX--Express速成,前端组件-框架技术,ajax,前端,javascript

客户端浏览器通过Ajax引擎发送Ajax请求,默认遵守同源策略。

对于跨域请求,可发送,但是不可接收响应数据。

使用代理服务器,无Ajax引擎,所以左边的通信满足同源策略,右边的通信也正常。

React框架中代理配置:在发送请求时,一旦涉及到跨域,会自动检测,并将url改变,在收到响应后,自动改回来url。

AJAX--Express速成,前端组件-框架技术,ajax,前端,javascript

了解止步。后续的知识我这个java后端就现学现用了。文章来源地址https://www.toymoban.com/news/detail-728880.html

到了这里,关于AJAX--Express速成的文章就介绍完了。如果您还想了解更多内容,请在右上角搜索TOY模板网以前的文章或继续浏览下面的相关文章,希望大家以后多多支持TOY模板网!

本文来自互联网用户投稿,该文观点仅代表作者本人,不代表本站立场。本站仅提供信息存储空间服务,不拥有所有权,不承担相关法律责任。如若转载,请注明出处: 如若内容造成侵权/违法违规/事实不符,请点击违法举报进行投诉反馈,一经查实,立即删除!

领支付宝红包 赞助服务器费用

相关文章

  • 前端学习记录~2023.8.10~JavaScript重难点实例精讲~第6章 Ajax

    本章是第六章Ajax相关的内容。 Ajax是一种流行的前后端数据交互的方式,通过异步请求就可以在不需要刷新页面的情况下,达到局部刷新的效果。 Ajax并非是一种全新的技术,而是由以下技术组合而成: 使用CSS和XHTML做页面呈现 使用DOM进行交互和动态显示 使用XMLHttpRequest对象

    2024年02月11日
    浏览(38)
  • 探索 AJAX 技术:实现动态数据交互的前端利器

    简介: AJAX(Asynchronous JavaScript and XML)技术在 Web 前端开发中扮演着重要的角色,它通过异步通信和动态内容更新,为用户带来更好的交互体验。本篇笔记将详细探索 AJAX 技术,并通过生动的代码演示来展示其在实现动态数据交互方面的优势。 1. 异步通信 异步通信是一种在

    2024年02月14日
    浏览(43)
  • AJAX 前端开发利器:实现网页动态更新的核心技术

    AJAX是开发者的梦想,因为你可以: 在不重新加载页面的情况下更新网页 在页面加载后请求来自服务器的数据 在页面加载后接收来自服务器的数据 在后台向服务器发送数据 HTML页面 HTML页面包含一个 div 部分和一个 button div 部分用于显示来自服务器的信息 button 调用一个函数(

    2024年03月22日
    浏览(50)
  • 前端框架前置学习(3) AJAX原理 XMLHttpRequest,Promise,简易axios函数封装

    1.获取图片文件对象  // 文件选择元素-change改变事件 document.querySelector(\\\'.upload\\\').addEventListener(\\\'change\\\', e = {       // 1. 获取图片文件       console.log(e.target.files[0]) 2.使用FormData携带文件  // 2. 使用 FormData 携带图片文件       const fd = new FormData()       fd.append(\\\'img\\\', e.target.files[0

    2024年02月03日
    浏览(52)
  • javascript常见100问|前端基础知识|问ajax-fetch-axios-区别请用 XMLHttpRequestfetch 实现 ajax节流和防抖px em rem vw/箭头函数的缺点

    HTML CSS JS HTTP 等基础知识是前端面试的第一步,基础知识不过关将直接被拒。本章将通过多个面试题,讲解前端常考的基础知识面试题,同时复习一些重要的知识点。 扎实的前端基础知识,是作为前端工程师的根本。基础知识能保证最基本的使用,即招聘进来能干活,能产出

    2024年04月27日
    浏览(49)
  • 前端异步请求并解决跨域问题(Ajax+axios框架)、后端响应多个数据(JSON)

    目录 一、前后端同步异步请求 1.同步请求: 2.异步请求: 3.跨域问题(前端问题) 4.axios框架(封装后) 二、后端向前端响应多个数据-JSON 1.同步请求:         发送一个请求,回应请求,回应的内容会覆盖浏览器中的内容,这样会 打断 前端其他的正常操作。 2.异步请求:

    2024年02月07日
    浏览(68)
  • 【b站咸虾米】jQuery的ajax异步操作 web前端后端分离技术的原理

    课程地址:【jQuery的ajax异步操作 web前端后端分离技术的原理】 https://www.bilibili.com/video/BV1u5411M7ny/?share_source=copy_webvd_source=b1cb921b73fe3808550eaf2224d1c155 通过案例学习ajax异步操作。 介绍 php,前后端不分离的技术。 ajax,实现前后端分离技术。 在之前,要做动态网站,要懂php,ja

    2024年04月15日
    浏览(47)
  • 什么是AJAX?如何使用原生JavaScript进行AJAX请求?

    前端入门之旅:探索Web开发的奇妙世界 欢迎来到前端入门之旅!感兴趣的可以订阅本专栏哦!这个专栏是为那些对Web开发感兴趣、刚刚踏入前端领域的朋友们量身打造的。无论你是完全的新手还是有一些基础的开发者,这里都将为你提供一个系统而又亲切的学习平台。在这个

    2024年02月07日
    浏览(38)
  • 什么是AJAX?如何使用原生JavaScript搭建AJAX请求?

    前端入门之旅:探索Web开发的奇妙世界 欢迎来到前端入门之旅!感兴趣的可以订阅本专栏哦!这个专栏是为那些对Web开发感兴趣、刚刚踏入前端领域的朋友们量身打造的。无论你是完全的新手还是有一些基础的开发者,这里都将为你提供一个系统而又亲切的学习平台。在这个

    2024年02月11日
    浏览(43)
  • JavaScript--AJAX

    目录 概述 XMLHttpRequest对象  方法和属性 示例一: 示例二: 传统的web交互是用户触发一个http请求服务器,然后服务器收到之后,在做出响应到用户,并且返回一个新的页面,每当服务器处理客户端提交的请求时,客户都只能空闲等待,并且哪怕只是一次很小的交互、只需从服务

    2024年02月14日
    浏览(38)

觉得文章有用就打赏一下文章作者

支付宝扫一扫打赏

博客赞助

微信扫一扫打赏

请作者喝杯咖啡吧~博客赞助

支付宝扫一扫领取红包,优惠每天领

二维码1

领取红包

二维码2

领红包