[ajax] 基础 HTTP相关问题-GET-POST-XHR使用-jQuery中的ajax-跨域-同源-jsonp-cors

1、AJAX简介

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

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

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

2、XML简介

XML 可扩展标记语言。

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

XML 和 HTML类似，不同的是HTML中都是预定义标签，而XML中没有预定义标签，全都是自定义标签，用来表示一些数据。

比如说我有一个学生数据:name = "孙悟空",age = 18; gender = "男";用XML表示:<student><name>孙悟空</name><age>18</age><gender>男</gender></student>

现在已经被JSON取代了。

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

3、AJAX的特点

3.1、AJAX的优点

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

3.2、AJAX的缺点

没有浏览历史，不能回退
存在跨域问题(同源)
SEO不友好，(SEO意思: 是搜索引擎优化)

4、HTTP协议请求与响应的结构

HTTP协议【超文本传输协议】，协议详细规定了浏览器和万维网服务器之间互相通信的规则。

4.1、HTTP 请求交互的基本过程

前后应用从浏览器端向服务器发送HTTP 请求(请求报文)
后台服务器接收到请求后, 调度服务器应用处理请求, 向浏览器端返回HTTP响应(响应报文)
浏览器端接收到响应, 解析显示响应体/调用监视回调

4.2、请求报文

HTTP请求报文由3部分组成（请求行+请求头+请求体）：

4.3、HTTP 响应报文

HTTP的响应报文也由三部分组成（响应行+响应头+响应体）

4.4、常见的响应状态码

200 OK 请求成功。一般用于GET 与POST 请求
201 Created 已创建。成功请求并创建了新的资源
401 Unauthorized 未授权/请求要求用户的身份认证
404 Not Found 服务器无法根据客户端的请求找到资源
500 Internal Server Error 服务器内部错误，无法完成请求

4.5、不同类型的请求及其作用

GET: 从服务器端读取数据（查）
POST: 向服务器端添加新数据（增）
PUT: 更新服务器端已经数据（改）
DELETE: 删除服务器端数据（删）

4.6、区别一般http请求与 ajax请求

ajax请求是一种特别的 http请求
对服务器端来说, 没有任何区别, 区别在浏览器端
浏览器端发送请求: 只有XHR 或fetch发出的才是ajax 请求, 其它所有的都是非ajax 请求
浏览器端接收到响应

(1) 一般请求: 浏览器一般会直接显示响应体数据, 也就是我们常说的刷新/跳转页面
(2) ajax请求: 浏览器不会对界面进行任何更新操作, 只是调用监视的回调函数并传入响应相关数据

5、原生AJAX 的基本使用 XHR

5.0 准备工作

5.0.1 安装node.js

http://nodejs.cn/

5.0.2 安装express（服务端框架）

https://www.expressjs.com.cn/

初始化环境

npm init --yes

下载express包

npm install express --save

编写js代码

// 1. 引入express
const express = require('express');// 2. 创建应用对象
const app = express();// 3. 创建路由规则
// request 是对请求报文的封装
// response 是对响应报文的封装
app.get('/', (request, response) => {//  设置响应response.send("hello express");
});// 4. 监听端口，启动服务
app.listen(8000, () => {console.log("服务已经启动, 8000 端口监听中...");})

运行js程序

node .\01express使用.js

打开网页显示页面

5.1、安装nodemon自动重启工具

文件内容有修改自动重新启动服务
https://www.npmjs.com/package/nodemon

安装

npm install -g nodemon

启动服务

ndoemon server.js

5.2、Ajax代码

5.2.1、步骤

创建XMLHttpRequest 对象

var xhr = new XMLHttpRequest();

设置请求信息（请求方法和url）

// 请求方式
xhr.open(method, url);//可以设置请求头，一般不设置
xhr.setRequestHeader('Content-Type', 'application/x-www-form-urlencoded');

发送请求

xhr.send(body) //get请求不传 body 参数，只有post请求使用

接收响应（事件绑定，处理服务端返回的结果）

//xhr.responseXML 接收 xml格式 的响应数据
//xhr.responseText 接收 文本格式 的响应数据
xhr.onreadystatechange = function (){// readyState 是 xhr对象中的属性, 表示状态 0 1 2 3 4if(xhr.readyState == 4 && xhr.status == 200){console.log(xhr.status) //状态码console.log(xhr.statusText) //状态字符串console.log(xhr.getAllResponseHeaders) //所有响应头console.log(xhr.response) //响应体}
}

5.2.2、案例

5.2.2.1、GET 请求

创建两个文件，浏览器端使用的html文件和服务器端使用的js文件

服务器端 server.js

// 1. 引入express
const express = require('express');// 2. 创建应用对象
const app = express();// 3. 创建路由规则
app.get('/server', (request, response) => {// 设置响应头 设置允许跨域response.setHeader('Access-Control-Allow-Origin', '*');// 设置响应体response.send("Hello Ajax");
});// 4. 监听服务
app.listen(8000, () => {console.log("服务已经启动, 8000 端口监听中...");})

启动服务

node server.js

前端页面 html

<!DOCTYPE html>
<html lang="en">
<head><meta charset="UTF-8"><meta http-equiv="X-UA-Compatible" content="IE=edge"><meta name="viewport" content="width=device-width, initial-scale=1.0"><title>Ajax GET 请求</title><style>#result {width: 200px;height: 100px;border: solid 1px #90b;}</style>
</head>
<body><button>点击发送请求</button><div id="result"></div><script>//获取button元素const btn = document.getElementsByTagName('button')[0];const result = document.getElementById('result');//绑定事件btn.onclick = function(){// 1. 创建对象const xhr = new XMLHttpRequest();// 2. 初始化 设置请求方法和urlxhr.open('GET', 'http://127.0.0.1:8000/server')// 3. 发送xhr.send();// 4. 事件绑定 处理服务端返回的结果xhr.onreadystatechange = function(){// readyState 是 xhr 对象中的属性, 表示状态 0 1 2 3 4//判断 (服务端返回了所有的结果)if(xhr.readyState === 4){//判断响应状态码 200  404  403 401 500if(xhr.status >= 200 && xhr.status < 300){//设置 result 的文本result.innerHTML=xhr.response;}}} }</script>
</body>
</html>

5.2.2.2、GET 请求设置请求参数

设置url参数

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

5.2.2.3、POST请求

鼠标放到div中，发post请求，将响应体放在div中呈现

server.js添加post

app.post('/server', (request, response) => {// 设置响应头, 设置允许跨域response.setHeader('Access-Control-Allow-Origin', '*');// 设置响应体response.send("Hello Ajax POST");
});

post.html

<!DOCTYPE html>
<html lang="en">
<head><meta charset="UTF-8"><meta http-equiv="X-UA-Compatible" content="IE=edge"><meta name="viewport" content="width=device-width, initial-scale=1.0"><title>Ajax POST 请求</title><style>#result {width: 200px;height: 100px;border: solid 1px #903;}</style>
</head>
<body><div id="result"></div><script>// 获取元素对象const result = document.getElementById('result');// 绑定事件result.addEventListener("mouseover", function(){// 1. 创建对象const xhr = new XMLHttpRequest();// 2. 初始化 设置类型（请求方式）与urlxhr.open('POST', 'http://127.0.0.1:8000/server');// 3. 发送   设置请求参数（请求体）xhr.send('a=100&b=200&c=300');// 4. 事件绑定xhr.onreadystatechange = function(){// 判断if(xhr.readyState === 4){if(xhr.status >=200 && xhr.status < 300){// 处理服务端返回的结果result.innerHTML = xhr.response;}}}});</script>
</body>
</html>

设置请求头信息

// 设置请求体内容的类型
xhr.setRequesHeader('Content-Type','application/x-www-from-urlencoded');
// 自定义头信息
xhr.setRequesHeader('name', 'ykyk');

server.js中设置响应头允许自定义请求头 post改成all

response.setHeader('Access-Control-Allow-Header','*');

5.2.3、json数据请求

app.all('/json-server', (request, response) => {// 设置响应头, 设置允许跨域response.setHeader('Access-Control-Allow-Origin', '*');// 设置响应头, 设置允许自定义头信息response.setHeader('Access-Control-Allow-Headers', '*');// 响应一个数据const data = {name: 'atguigu'};// 对 对象 进行 字符串 转换let str = JSON.stringify(data)// 设置响应体response.send(str);
});

<!DOCTYPE html>
<html lang="en">
<head><meta charset="UTF-8"><meta http-equiv="X-UA-Compatible" content="IE=edge"><meta name="viewport" content="width=device-width, initial-scale=1.0"><title>JSON</title><style>#result {width: 200px;height: 100px;border: solid 1px #89b;}</style>
</head>
<body><div id="result"></div><script>const result = document.getElementById('result');// 绑定键盘按下事件window.onkeydown = function(){// 发送请求const xhr = new XMLHttpRequest();// *2*.(自动转换) 设置响应体数据的类型(自动转换)xhr.responseType = 'json';// 初始化xhr.open('GET', 'http://127.0.0.1:8000/json-server');// 发送xhr.send();// 事件绑定xhr.onreadystatechange = function(){if(xhr.readyState === 4){if(xhr.status >= 200 && xhr.status < 300){console.log(xhr.response);// 1. 手动对数据转化 (字符串再转换成json)// let data = JSON.parse(xhr.response); //转换成json// result.innerHTML = data.name;// *2*. (自动转换)自动转换(自动转换)result.innerHTML = xhr.response.name; //已经自动变成json}}}}</script>
</body>
</html>

5.2.4、解决 IE 缓存问题

问题：在一些浏览器中(IE),由于缓存机制的存在，ajax 只会发送的第一次请求，剩余多次请求不会在发送给浏览器而是直接加载缓存中的数据。
解决方式：浏览器的缓存是根据url 地址来记录的，所以我们只需要修改url 地址即可避免缓存问题

xhr.open("get","/testAJAX?t="+Date.now());

5.2.5、请求超时与网络异常

// 超时设置 （2秒）
xhr.timeout = 2000;
// 超时回调
xhr.ontimeout = function(){alert('网络超时，请稍后重试')
}
// 网络异常回调
xhr.onerror = function(){alert('网络异常，请稍后重试')
}

5.2.6、取消请求

// 手动取消
xhr.abort()

5.2.7、请求重复发送问题

html

<!DOCTYPE html>
<html lang="en">
<head><meta charset="UTF-8"><meta name="viewport" content="width=device-width, initial-scale=1.0"><title>重复请求问题</title>
</head>
<body><button>点击发送</button><script>//获取元素对象const btns = document.querySelectorAll('button');let x = null;//标识变量let isSending = false; // 是否正在发送AJAX请求btns[0].onclick = function(){//判断标识变量if(isSending) x.abort();// 如果正在发送, 则取消该请求x = new XMLHttpRequest();//修改 标识变量的值isSending = true;x.open("GET",'http://127.0.0.1:8000/delay');x.send();x.onreadystatechange = function(){if(x.readyState === 4){//修改标识变量isSending = false;}}}// abort 中止btns[1].onclick = function(){x.abort();}</script>
</body>
</html>

server.js

// 1.引入express
const express = require('express');
// 2.创建应用对象
const app = express();// 3.创建路由规则
//request 是对请求报文的封装
//response 是对响应报文的封装
app.get('/server',(request,response)=>{
});
//json
app.get('/json-server',(request,response)=>{
});
//ie缓存
app.get('/ie',(request,response)=>{
});
//延迟响应
app.get('/delay',(request,response)=>{//设置响应头response.setHeader('Access-Control-Allow-Origin','*');//定时器setTimeout(()=>{//设置响应体response.send('延时响应');},3000)});
//4.监听端口启动服务
app.listen(8000,()=>{console.log("服务已经启动，8000端口监听中.....");
})

6、jQuery 中的AJAX

<!DOCTYPE html>
<html lang="en">
<head><meta charset="UTF-8"><meta name="viewport" content="width=device-width, initial-scale=1.0"><title>jQuery 发送 AJAX 请求</title><link crossorigin="anonymous" href="https://cdn.bootcss.com/twitter-bootstrap/3.3.7/css/bootstrap.min.css" rel="stylesheet"><script crossorigin="anonymous" src="https://cdn.bootcdn.net/ajax/libs/jquery/3.5.1/jquery.min.js"></script>
</head>
<body><div class="container"><h2 class="page-header">jQuery发送AJAX请求 </h2><button class="btn btn-primary">GET</button><button class="btn btn-danger">POST</button><button class="btn btn-info">通用型方法ajax</button></div><script>//使用jquery发送get请求$('button').eq(0).click(function(){$.get('http://127.0.0.1:8000/jquery',{a:100,b:200},function(data){console.log(data);},'json');})//使用jquery发送post请求$('button').eq(1).click(function(){$.post('http://127.0.0.1:8000/jquery',{a:100,b:200},function(data){console.log(data);},'json');})//通用方法(开发常用)$("button").eq(2).click(function(){$.ajax({//urlurl: 'http://127.0.0.1:8000/jquery',//参数data: {a:100,b:200},//请求类型type: 'GET',//响应体结果dataType: 'JSON',//成功的回调success: function(data){console.log(data);},//超时时间timeout: 2000,//失败的回调error: function(){console.log('出错了');},//头信息headers:{c: 300,d: 400}})})</script>
</body>
</html>

server.js

// 1.引入express
const express = require('express');
// 2.创建应用对象
const app = express();// 3.创建路由规则
//request 是对请求报文的封装
//response 是对响应报文的封装
app.get('/server',(request,response)=>{
});
//json
app.get('/json-server',(request,response)=>{
});
//ie缓存
app.get('/ie',(request,response)=>{
});
//延迟响应
app.get('/delay',(request,response)=>{});
//JQuery
app.all('/jquery',(request,response)=>{//设置响应头response.setHeader('Access-Control-Allow-Origin','*');response.setHeader('Access-Control-Allow-Headers', '*');const data = {name:'张三'};response.send(JSON.stringify(data));});
//4.监听端口启动服务
app.listen(8000,()=>{console.log("服务已经启动，8000端口监听中.....");
})

7、axios

使用axios发送AJAX请求

<!DOCTYPE html>
<html lang="en">
<head><meta charset="UTF-8"><meta name="viewport" content="width=device-width, initial-scale=1.0"><title>Document</title><style>h2{width: 1200px;margin: 50px auto 20px;padding-bottom:10px ;font-size: 30px;border-bottom:1px solid gray ;}button{border-radius: 5px;height: 35px;width: 100px;   background-color: blueviolet;float: left;margin-right: 10px;color: white;border: none;text-align: center;}.btn-primary{margin-left: 160px;background-color: #cd6969;}.btn-danger{background-color: orange;}</style><script src="https://cdn.bootcdn.net/ajax/libs/axios/0.19.2/axios.js"></script>
</head>
<body><h2>jQuery发送Ajax请求</h2><button class="btn btn-primary">GET</button><button class="btn btn-danger">POST</button><button class="btn btn-info">通用型方法</button><script>const btns = document.querySelectorAll('button')btns[0].onclick = function(){//GET请求axios.get('http://localhost:8000/axios-server', {//url参数params:{id:1000,vip:12},//请求头信息headers:{name:'hanser',age:'2'}}).then(value=>{console.log(value)})}//POST请求btns[1].onclick = function(){axios.post('http://localhost:8000/axios-server', {username:'admin',password:'123'},{//url参数params:{id:1,vip:123},//请求头参数headers:{name:'yousa',age:'23'},//请求体})}//通用方法(开发使用)btns[2].onclick = function(){axios({method:'POST',url:'http://localhost:8000/axios-server',//url参数params:{vip:10,id:123},//头信息headers:{a:100,b:200},//请求体参数data:{name:'hanser',age:'7'}}).then(response=>{console.log(response)})}</script>
</body>
</html>

server.js

// 1.引入express
const express = require('express');
// 2.创建应用对象
const app = express();// 3.创建路由规则
//request 是对请求报文的封装
//response 是对响应报文的封装
app.get('/server',(request,response)=>{
});
//json
app.get('/json-server',(request,response)=>{
});
//ie缓存
app.get('/ie',(request,response)=>{
});
//延迟响应
app.get('/delay',(request,response)=>{});
//JQuery
app.all('/jquery',(request,response)=>{});//axios 服务
app.all('/axios-server', (requesr, response)=>{//设置响应头 设置允许跨域response.setHeader('Access-Control-Allow-Origin', '*')response.setHeader('Access-Control-Allow-Headers', '*')const data = {name:'hanser'}//设置响应response.send(JSON.stringify(data))
})//4.监听端口启动服务
app.listen(8000,()=>{console.log("服务已经启动，8000端口监听中.....");
})

8、Fetch

使用fetch发送AJAX请求

<!DOCTYPE html>
<html lang="en">
<head><meta charset="UTF-8"><meta name="viewport" content="width=device-width, initial-scale=1.0"><title>Document</title>
</head>
<body><button>ajax请求</button><script>const btn = document.getElementsByTagName('button')btn[0].onclick = function(){fetch('http://localhost:8000/fetch-server',{//请求方法method:'POST',//请求头headers:{name:'hanser'},//请求体body: 'name=admin&pd=admin'}).then(Response=>{console.log(Response)return Response.text()}).then(Response=>{console.log(Response)})}</script>
</body>
</html>

server.js

// 1.引入express
const express = require('express');
// 2.创建应用对象
const app = express();// 3.创建路由规则
//request 是对请求报文的封装
//response 是对响应报文的封装
app.get('/server',(request,response)=>{
});
//json
app.get('/json-server',(request,response)=>{
});
//ie缓存
app.get('/ie',(request,response)=>{
});
//延迟响应
app.get('/delay',(request,response)=>{});
//JQuery
app.all('/jquery',(request,response)=>{});
//axios
app.all('/axios',(request,response)=>{});
//fetch 服务
app.all('/fetch-server', (requesr, response)=>{//设置响应头 设置允许跨域response.setHeader('Access-Control-Allow-Origin', '*')response.setHeader('Access-Control-Allow-Headers', '*')const data = {name:'hanser'}//设置响应response.send(JSON.stringify(data))
})//4.监听端口启动服务
app.listen(8000,()=>{console.log("服务已经启动，8000端口监听中.....");
})

9、跨域

9.1、同源策略

同源策略(Same-Origin Policy)最早由Netscape 公司提出，是浏览器的一种安全策略
同源：协议、域名、端口号必须完全相同
跨域：违背同源策略就是跨域

9.2、如何解决跨域

9.2.1 JSONP

1、JSONP是什么

JSONP是一个非官方的跨域解决方法，纯粹凭借程序员的聪明才智开发出来，只支持get请求。

2、JSONP怎么工作?

在网页有一些标签天生具有跨域能力，比如: img link iframe script

JSONP就是利用script标签的跨域能力来发送请求的。

3、JSONP的使用

1.动态的创建一个script 标签

const script = document.createElement('script')

2.设置script 的src，设置回调函数

script.src = 'http://localhost:8000/check-username'function handle(data){input.style.border = "solid 1px $f00"//修改p标签的提示文本p.innerHTML = data.msg}

3.将script 添加到body 中

 document.body.appendChild(script)

4.服务器中路由的处理

//用户名检测是否存在
app.all('/check-username', (requesr, response)=>{const data = {exist:1,msg:'用户名已经存在'}//设置响应let str = JSON.stringify(data)// response.send('console.log("hello jsonp")')response.send(`handle(${str})`)})

code

<!DOCTYPE html>
<html lang="en">
<head><meta charset="UTF-8"><meta name="viewport" content="width=device-width, initial-scale=1.0"><title>Document</title>
</head>
<body>用户名：<input type="text" id="username"><p></p><script>const input = document.getElementById('username')const p = document.querySelectorAll('p')[0]function handle(data){input.style.border = "solid 1px $f00"//修改p标签的提示文本p.innerHTML = data.msg}//失去焦点事件input.onblur = function(){let username = this.value//向服务端发送请求//1 设置script标签const script = document.createElement('script')//2 设置标签的src属性script.src = 'http://localhost:8000/check-username'//3 将script插入文档中document.body.appendChild(script)}</script>
</body>
</html>

4、jQuery 中的JSONP

<!DOCTYPE html>
<html lang="en">
<head><meta charset="UTF-8"><meta name="viewport" content="width=device-width, initial-scale=1.0"><title>Document</title><style>div{width: 200px;height: 150px;border: 1px solid #bfa;}</style><script src="https://cdn.bootcdn.net/ajax/libs/jquery/3.5.1/jquery.min.js"></script>
</head>
<body><button>点击发送jsonp请求</button><div id="res"></div><script>$('button').eq(0).click(function(){$.getJSON('http://localhost:8000/jquery-jsonp-server?callback=?', function(data){console.log(data)$('#res').html(`姓名：${data.name},年龄：${data.age}`)})})</script>
</body>
</html>

//用户名检测是否存在
app.all('/jquery-jsonp-server', (request, response)=>{const data = {name:'hanser',age:2}//设置响应let str = JSON.stringify(data)//接受callback参数let cb = request.query.callbackresponse.send(`${cb}(${str})`)})

9.2.2 CORS

1) CORS 是什么？
CORS（Cross-Origin Resource Sharing），跨域资源共享。CORS 是官方的跨域解决方
案，它的特点是不需要在客户端做任何特殊的操作，完全在服务器中进行处理，支持
get 和post 请求。跨域资源共享标准新增了一组HTTP 首部字段，允许服务器声明哪些
源站通过浏览器有权限访问哪些资源

2) CORS 怎么工作的？
CORS 是通过设置一个响应头来告诉浏览器，该请求允许跨域，浏览器收到该响应
以后就会对响应放行。

3) CORS 的使用

主要是服务器端的设置：

router.get("/testAJAX" , function (req , res) {//通过res 来设置响应头，来允许跨域请求res.set("Access-Control-Allow-Origin","*");res.send("testAJAX 返回的响应");
});

<!DOCTYPE html>
<html lang="en">
<head><meta charset="UTF-8"><meta name="viewport" content="width=device-width, initial-scale=1.0"><title>CORS</title><script crossorigin="anonymous" src="https://cdn.bootcdn.net/ajax/libs/axios/0.19.2/axios.js"></script><style>#result{width:200px;height:100px;border:solid 1px #90b;}</style>
</head>
<body><button>发送请求</button><div id="result"></div><script>const btn = document.querySelector('button');const result = document.getElementById('result');btn.onclick = function(){axios({method: 'GET',url: 'http://localhost:8000/cors-server',}).then(response =>{result.innerHTML = response.data;})}</script>
</body>
</html>

server.js

//1. 引入express
const express = require('express');//2. 创建应用对象
const app = express();//3. 创建路由规则
// request 是对请求报文的封装
// response 是对响应报文的封装
//jsonp服务
app.all('/jsonp-server',(request, response) => {
});
//用户名检测是否存在
app.all('/check',(request, response) => {
});app.all('/jquery-jsonp',(request, response) => {
});
app.all('/cors-server', (request, response)=>{//设置响应头response.setHeader("Access-Control-Allow-Origin", "*");response.setHeader("Access-Control-Allow-Headers", '*');response.setHeader("Access-Control-Allow-Method", '*');// response.setHeader("Access-Control-Allow-Origin", "http://127.0.0.1:5500");response.send('hello CORS');
});//4. 监听端口启动服务
app.listen(8000, () => {console.log("服务已经启动, 8000 端口监听中....");
});

参考： https://blog.csdn.net/qq_45632660/article/details/109823169 https://blog.csdn.net/weixin_44972008/article/details/113772348