AJAX与HTTP交互详解及跨域解决方案-CSDN博客

本文链接：https://blog.csdn.net/Dani05/article/details/124369519

本文深入探讨了AJAX技术的特点，包括其优点和缺点，并详细介绍了HTTP请求报文和响应报文的结构。接着，讲解了Express服务端框架的基本使用，以及如何通过AJAX进行请求操作，如设置参数、头信息和处理响应。同时，讨论了IE的缓存问题、请求超时和网络异常处理，以及取消请求和防止重复发送的方法。此外，还对比了jQuery、Axios和fetch发送AJAX请求的不同方式。最后，重点阐述了跨域问题，包括JSONP和CORS两种解决方案，解析了它们的工作原理和实践应用。

摘要生成于 C知道，由 DeepSeek-R1 满血版支持，前往体验 >

8.1.2 jQuery发送jsonp请求

8.2 设置CORS响应头实现跨域（官方）

1. AJAX的特点

1.1 AJAX的优点

可以无需刷新页面而与服务器端进行通信。
允许你根据用户事件来更新部分页面内容。

1.2 AJAX的缺点

没有浏览历史，不能回退。
存在跨域问题。
搜索引擎优化不友好，爬虫爬不到。

2. HTTP

2.1 请求报文

请求行：请求类型（GET、POST...） URL路径 HTTP协议版本

请求头：Host: atguigu.com

Cookie: name=guigu

Content-Type: application/x-www-form-urlencoded

User-Agent: chrome 83

空行

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

2.2 响应报文

响应行：HTTP协议版本状态码（200...）状态字符串（OK）

响应头：Content-Type: text/html

Content-length: 2048

Content-encoding: gzip

空行

响应体：html

3. Express服务端框架

1. 安装express

npm i express

2. 使用

// 引入express
const express = require('express');
// 创建应用对象
const app = express();
// 创建路由规则
// request 是对请求报文的封装，response是对响应报文的封装
app.get('/server',(request,response)=>{
    // 设置响应头允许跨域
    response.setHeader('Access-Control-Allow-Origin','*');
    // 设置响应体
    response.send('hello');
});
// 监听端口启动服务
app.listen(8000, ()=>{
    console.log('服务已经启动，8000端口监听中...');
});

4. AJAX请求操作

4.1 发送请求

// 创建对象
const xhr = new XMLHttpRequest();
// 初始化设置请求方法和url
xhr.open('GET','http://127.0.0.1:8000/server');
// 发送
xhr.send();
// 处理服务端返回的结果
xhr.onreadystatechange = function(){
    //判断服务端返回了所有结果
    if(xhr.readyState === 4){
        //判断响应状态码成功
        if(xhr.status >= 200 && xhr.status < 300){
            //处理结果
            console.log(xhr.status);//状态码
            console.log(xhr.statusText);//状态字符串
            console.log(xhr.getAllResponseHeaders());//所有响应头
            console.log(xhr.response);//响应体
        }
    }
}

4.2 设置请求参数

1. GET请求

xhr.open('GET','http://127.0.0.1:8000/server?a=100&b=200');

2. POST请求

// xhr.send('a=100&b=200');
// xhr.send('a:100&b:200');
xhr.send('100');

4.3 设置请求头信息

1. 预定义

xhr.setRequestHeader('Content-Type','application/x-www-form-urlencoded');

2. 自定义

xhr.setRequestHeader('name','atguigu');
// 注意：1.服务端需设置响应头response.setHeader('Access-Control-Allow-Headers','*')。
//      2.此时还会发送OPTIONS请求校验头信息是否可用，服务端改为app.all('/server',(request,response)=>{})，表示可以接收任意类型的请求。

4.4 服务端响应JSON数据

1. 服务端

const data = {
    name: 'atguigu',
};
// 对对象进行字符串转换
let str = JSON.stringify(data);
response.send(str);

2. 前端

// 手动对数据转化，字符串转对象
let data = JSON.parse(xhr.response);

//自动转化，设置响应体数据的类型
xhr.responseType = 'json';