AJAX学习笔记：什么是AJAX、http协议、AJAX请求发送方法（jQuery，Axios，fetch）、跨域、CORS

Undefined-L

已于 2023-09-16 13:28:04 修改

阅读量264

点赞数 1

文章标签：学习笔记

于 2023-09-16 13:16:38 首次发布

本文链接：https://blog.csdn.net/qq_48376006/article/details/132909687

版权

本文详细介绍了AJAX的概念、优缺点、HTTP协议基础，讲解了使用jQuery、Axios和fetch发送AJAX请求的方式，包括GET、POST、设置请求头和处理JSON数据。同时，探讨了跨域问题，包括JSONP和CORS解决方案。

摘要由CSDN通过智能技术生成

1 什么是AJAX

1.1 AJAX简介

AJAX 全称为 Asynchronous JavaScript And XML ，就是异步的 JS 和 XML 。

通过 AJAX 可以在浏览器中向服务器发送异步请求，最大的优势： 无刷新获取数据 。

AJAX 不是新的编程语言，而是一种将现有的标准组合在一起使用的新方式。

优点：按需加载，不需要刷新就可以向服务器发送请求，提高利用率，网页整体加载速度变快，数据交互更加快速，体验更好。

1.2 XML简介

XML 可扩展标记语言。

XML 被设计用来传输和存储数据 。

XML 和 HTML 类似，不同的是 HTML 中都是预定义标签（提前设定好的，如<span></span>），而 XML 中没有预定义标签，全都是自定义标签(自定义的，如<aaa></aaa>)，用来表示一些数据。

name = "孙悟空" ; age = 18 ; gender = "男" ;
用 XML 表示：
<student>
    <name>孙悟空</name>
    <age>18</age>
    <gender>男</gender>
</student>

现在已经被 JSON 取代了

JSON更加简洁，数据转换相对来说更加容易。 借助JSON的API，可以快速将字符串转换为JS对象,灵活度远胜XML.

用JSON表示如下：

{"name":"孙悟空","age":18,"gender":"男"}

1.3 AJAX的优点/缺点

AJAX 的优点

1) 可以无需刷新页面而与服务器端进行通信。

2) 允许你根据用户事件（鼠标，键盘，表单）来更新部分页面内容。

AJAX 的缺点

1) 没有浏览历史，不能回退

2) 存在跨域问题 ( 同源 )

3) SEO 不友好（JS动态创建在页面上，爬虫爬不到结果）

1.4 AJAX的HTTP请求协议

HTTP（hypertext transport protocol）协议『超文本传输协议』，协议详细规定了浏览器和万维网服务器之间互相通信的规则。

HTTP请求分为请求和响应

请求报文

行请求类型 url路径 HTTP协议版本

头请求头

空体

体 GET请求体为空，POST请求体可以不为空

行      POST  /s?ie=utf-8  HTTP/1.1 
头      Host: atguigu.com
        Cookie: name=guigu
        Content-type: application/x-www-form-urlencoded
        User-Agent: chrome 83
空行
体      username=admin&password=admin

响应报文

行 HTTP协议版本响应状态码响应状态字符串

头响应头

空体

体主要的返回结果（html语法内容）

行      HTTP/1.1  200  OK
头      Content-Type: text/html;charset=utf-8
        Content-length: 2048
        Content-encoding: gzip
空行    
体      <html>
            <head>
            </head>
            <body>
                <h1>尚硅谷</h1>
            </body>
        </html>

响应状态码：404 找不到；403 禁止；401 未授权；500 内部错误等等

Request:亲求 Response：响应

控制台看不见的话，按快捷键Ctrl+R。

1.5 Node.js安装

AJAX Node.js搭建的服务器环境，安装详情在视频P7。视频P6是控制台查看报文的方式。

1.6 Express安装

express是服务端框架，是基于Node.js平台的，需提前安装Node.js。

安装

在vscode终端（快捷键ctrl+~）输入 npm i express

使用

创建一个js文件（例如aaa.js），在里面创建好express的代码，在终端输入node aaa.js 回车即可。在浏览器打开自己创建的端口（以我的代码为例，输入127.0.0.1:5000）。

注意：在终端输入 node 文件名时，一定要注意文件路径与终端显示路径是否匹配。

// 1. 引入express
const exprss = require('express');

// 2.  创建应用对象
const app = exprss();

// 3.创建路由规则
// (request,response) 形参名，可自行定义，一般为request和response
// request 是对请求报文的封装
// response 是对响应报文的封装
app.get('/',(request,response)=>{
    // 设置响应
    response.send('坚持坚持再坚持');
});


app.listen(5000,()=>{
    console.log('服务器已启动,5000端口监听中');
})

2 发送AJAX请求

准备一个前端页面和一个服务端代码。

服务端get设定路由规则的路径 (/server)，路径正确就会执行回调函数的代码，并且由response做出相应。（以下是GET请求服务端代码创建路由模块如下，只是加了路径，设置了响应，其他片段同上）

// 3.创建路由规则
app.get('/server',(request,response)=>{
    // 设置响应头，设置允许跨域
    response.setHeader('Access-Control-Allow-Origin','*');
    // 设置响应体
    response.send('HELLO AJAX');
});

如果端口被占用，记得先关闭其他的。

2.1 GET请求

操作DOM先获取元素，给元素绑定事件，在进行AJAX操作。创建对象，设置请求方式（GET/POST)和服务端地址，在send（）发送到服务端，后绑定事件处理服务端返回的结果。点击被绑定事件的按钮即可发送AJAX请求。

<button>点击发送请求</button>
<div id="result"></div>

        //获取button元素（获取的是button按钮索引值为0的那一个）
        const btn = document.getElementsByTagName('button')[0];
        const result = document.getElementById("result");
        //绑定事件
        btn.onclick = function(){
            //1. 创建对象
            const xhr = new XMLHttpRequest();
            //2. 初始化 设置请求方法和 url
            xhr.open('GET', 'http://127.0.0.1:5000/server');
            //3. 发送
            xhr.send();
            //4. 事件绑定 处理服务端返回的结果
            // on  when 当....时候
            // readystate 是 xhr 对象中的属性, 表示状态 0 1 2 3 4
            // change  改变（0-1是一次改变，以此类推，共4次）
            xhr.onreadystatechange = function(){
                //判断 (服务端返回了所有的结果，第四次改变就是返回结果)
                if(xhr.readyState === 4){
                    //判断响应状态码 200  404  403 401 500
                    // 2xx 成功（2开头的都表示成功）
                    if(xhr.status >= 200 && xhr.status < 300){
                        //处理结果  行 头 空行 体
                        //响应