![[ajax] 基础 HTTP相关问题-GET-POST-XHR使用-jQuery中的ajax-跨域-同源-jsonp-cors](https://600zi.400zi.cn/uploadfile/img/15/713/90e66c521711e21277aa229ab75ffd1a.jpg)
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
/
5.0.2 安装express（服务端框架）
/
初始化环境
npm init --yes
下载express包
npm install express --save
编写js代码
// 1. 引入expressconst 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自动重启工具
文件内容有修改自动重新启动服务
/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. 引入expressconst 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.引入expressconst express = require('express');// 2.创建应用对象const app = express();// 3.创建路由规则//request 是对请求报文的封装//response 是对响应报文的封装app.get('/server',(request,response)=>{});//jsonapp.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="/twitter-bootstrap/3.3.7/css/bootstrap.min.css" rel="stylesheet"><script crossorigin="anonymous" src="/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.引入expressconst express = require('express');// 2.创建应用对象const app = express();// 3.创建路由规则//request 是对请求报文的封装//response 是对响应报文的封装app.get('/server',(request,response)=>{});//jsonapp.get('/json-server',(request,response)=>{});//ie缓存app.get('/ie',(request,response)=>{});//延迟响应app.get('/delay',(request,response)=>{});//JQueryapp.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="/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.引入expressconst express = require('express');// 2.创建应用对象const app = express();// 3.创建路由规则//request 是对请求报文的封装//response 是对响应报文的封装app.get('/server',(request,response)=>{});//jsonapp.get('/json-server',(request,response)=>{});//ie缓存app.get('/ie',(request,response)=>{});//延迟响应app.get('/delay',(request,response)=>{});//JQueryapp.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.引入expressconst express = require('express');// 2.创建应用对象const app = express();// 3.创建路由规则//request 是对请求报文的封装//response 是对响应报文的封装app.get('/server',(request,response)=>{});//jsonapp.get('/json-server',(request,response)=>{});//ie缓存app.get('/ie',(request,response)=>{});//延迟响应app.get('/delay',(request,response)=>{});//JQueryapp.all('/jquery',(request,response)=>{});//axiosapp.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="/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="/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. 引入expressconst 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 端口监听中....");});
参考： /qq_45632660/article/details/109823169 /weixin_4497/article/details/113772348
![[jQuery基础] jQuery案例 -- qq音乐以及初步解决Ajax 跨域问题](https://600zi.400zi.cn/uploadfile/img/15/895/1cf964ced01fe4b76ea0ef4ba07986a6.jpg)
