AJAX就是Asynchronous JavaScript And XML，就是异步的 JS 和 XML，优势：无刷新获取数据
XML：可扩展标记语言，被设计用来传输和存储数据。和HTML类似，但是XML里是预定义标签，而XML中没有预定义标签。
目前XML已经被JSON代替了。
AJAX的优点：
1.可以无需刷新页面而与服务器端进行通信 2.允许你根据用户事件来更新部分页面内容
AJAX的缺点：
1.没有浏览力士，不能回退 2.存在跨域问题（同源）：在这个服务向另外一个服务发送请求 3.SEO搜索引擎优化不友好
HTTP协议：
超文本传输协议，规定了浏览器和服务器之间的通信规则。
请求报文
行 GET/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/1.1 200 OK
头 Content-Type: text/html;charset=utf-8
Content-length: 2048
Conent-encoding: gzip
空行
体 <html>
<head>
</head>
<body>
</body>
</html>
response响应 request请求
1 Express框架
2 基于Node.js平台
3 //1. 引入express
4 const express = require('express');
5 //2. 创建应用对象
6 const app = express();
7 //3. 创建路由规则
8 //request是对请求报文的封装
9 //response是对响应报文的封装
10 app.get('/',(request, response)=>{
11 //app.all可以接收任意类型的请求
12 //设置响应头 设置允许跨域
13 response.setHeader('Access-Control-Allow-Origin','*');
14 //设置响应
15 response.send('HELLO AJAX');
16 });
17 //4. 监听端口启动服务
18 app.listen(8000, ()=>{
19 console.log("服务已经启动，8000 端口监听中...");
20 })
21
22
23 btn.onclick = function(){
24 //1. 创建对象
25 const xhr = new XMLHttpRequest( );
26 //2. 初始化 设置请求方法和url
27 xhr.open('GET', 'http://127.0.0.1:8000/server?a=100&b=200&c=300'); //通过在？后面添加，&分割传递参数
28 //3. 发送
29 xhr.send();
30 //4. 事件绑定 处理服务端返回的结果
31 // on 当什么…时候
32 // readystate 是 xhr 对象的属性，表示状态 0 1 2 3 4 ,0表示未初始化 1表示open方法调用完毕 ， 2表示send方法调用完毕， 3表示返回部分结果 ， 4表示返回所有结果
33
34 xhr.onreadystatechange = function(){
35 // 判断 服务端返回了所以的结果
36 if(xhr.readyState ===4 ){
37 //判断响应状态码 200 404 403 401 500
38 // 2xx成功
39 if(xhr.status >=200 && xhr.status < 300 ){
40 //处理结果 行 头 空行 体
41 //1 .响应行
42 //console.log(xhr.status); //状态码
43 //console.log(xhr.statusText); //状态字符串
44 //console.log(xhr.getAllResponseHeaders()); //所有响应头
45 //console.log(xhr.response); //响应体
46 result.innerHTML = xhr.response;
47 }else{
48
49 }
50 }
51 }
52 }
53
54 F12 ->network ->XHR说明是AJAX
55
56 <script>
57 //获取元素对象
58 const result = document.getElementById("result");
59 //绑定事件
60 result.addEventListener("mouseover", function(){
61 //1. 创建对象
62 const xhr = new XMLHttpRequest();
63 //2. 初始化 设置类型与Url
64 xhr.open('POST', 'http://127.0.0.1:8000/serve');
65 //设置请求头,只能放在open
66 //Content-Type设置请求体类型，application/x-www-form是参数查询字符串的固定类型
67 //也可以自己定义，但是可能会报错。需要后端在app.post里添加response.setHeader('Access-Control-Allow-Headers','*');
68 //一般把身份校验的信息放在头部
69 xhr.setRequestHeader('Content-Type','application/x-www-form');
70 //3. 发送
71 // xhr.send('a=100&b=200&c=300');
72 // xhr.send('a:100&b:200&c:300');
73 xhr.send();
74 //4. 事件绑定
75 xhr.onreadystatechange = function(){
76 //判断
77 if(xhr.readyState ===4 ){
78 if(xhr.status >=200 && xhr.status < 300){
79 //处理服务端返回结果
80 result.innerHTML = xhr.response;
81 }
82 }
83 }
84 })
85 </script>
86
87 后端返回的结果绝大多数都是JSON格式
88 <script>
89 const result = document.getElementById('result');
90 //绑定键盘按下事件
91 window.onkeydown = function(){
92 //发送请求
93 const xhr = new XMLHttpRequest();
94 //设置响应体数据类型
95 xhr.responseType = 'json';
96 //初始化
97 xhr.open('GET','http://127.0.0.1:8000/json-server');
98 //发送
99 xhr.send();
100 //事件绑定
101 xhr.onreadystatechange = function(){
102 if(xhr.readyState === 4){
103 if(xhr.status >=200 && xhr.status < 300){
104 // console.log(xhr.response);
105 // result.innerHTML = xhr.response;
106 // 手动对数据转化
107 // let data = JSON.parse(xhr.response);
108 // console.log(data);
109 //自动转换,需要在顶部设置响应体数据的类型
110 // result.innerHTML = data.name;
111 console.log(xhr.response);
112 result.innerHTML = xhr.response.name;
113 }
114 }
115 }
116 }
117 </script>
118
119 app.all('/json-server',(Request, response)=>{
120 //设置响应头，设置允许跨域
121 response.setHeader('Access-Control-Allow-Origin','*');
122 //响应头
123 response.setHeader('Access-Control-Allow-Headers','*');
124 //响应一个数据
125 const data = {
126 name: 'atguigu'
127 };
128 //对对象进行字符串转换
129 let str = JSON.stringify(data);
130 //设置响应体
131 response.send();
132 })
AJAX在server.js里面
const express = require('express')
1.创建应用对象 const app = express( );
2.app.get('server', (request, response) =>{ }) //post设置类app.post app.all可以接收任何信息
设置响应头 response.setHeader('Access-Control-Allow-Origin' , '*')
设置响应体 response.send('…')
AJAX的步骤在HTML里面：
1.获取元素对象 const result = document.getElementBy….
2.给这个对象绑定事件 result.addEventListener( 事件名称 ， 回调函数function( ){ })
3.在回调函数里创建xhr对象
创建对象： const xhr = new XMLHttpRequest( );
初始化 设置类型和URL： xhr.open('POST', 'http:// ….')
设置请求头 xhr.setRequestHeader('Content-Type' , ' ….. ')；
在这里可以写数组const data = { },但是想要在send里面发送，就需要把data变成JSON数据
let str = JSON.stringify(data) , 再把str放到下面的send里面
发送 xhr.send( ); //send里的内容会出现在浏览器 NetWorks -- Headers -- Request Payload里面，里面写的内容服务端要能处理
事件绑定 xhr.onreadystatechange = function( ){ }
在函数里 先判断 xhr.readyState 判断有没有收到结果
在通过比如xhr.status >=200 && …返回的结果用if语句处理服务器端返回的结果
在这里可以把JSON转化为对象，
自动转换需要在xhr.open上面设置响应体数据类型xhr.responseType = 'json'，result.innerHTML = xhr.response;
nodemon可以解决重启服务端代码时候需要重启
IE缓存问题
IE会保存下来AJAX, 不能即使获取服务器最新数据
在xhr.open里面的url里面后面加上/ie？t=' + Date.now( )
超时和网络异常处理
在js文件里面app.get -- response.setHeader( 里面设置延时响应 setTimeout( ()=>{ response.send(….) } , 3000 )
在HTML文件里 要设置超时时间 xhr.timeout = 2000 ，超时回调 xhr.ontimeout = function( ){ }
网络异常时 xhr.onerror = function( ) { }
AJAX 取消请求
let x = null;
给不同的按钮绑定不同的事件，第一个按钮添加x.send( )，第二个按钮添加x.abort( )
AJAX重复发送
发送新的时候要把上一个没有发完的取消掉
let isSending = false ;
在事件响应函数里， isSending = true
在onreadystatechange 里面当x.readyState ===4 时 isSending = false
if(isSending) x.abort( ); //如果正在发送，则取消掉该请求，创建一个新的请求
Axios发送AJAX请求
axios({ })
method
url
params
headers
data
使用fetch发送AJAX请求
用到了promise里的then
同源策略
协议、域名、端口相同
CROS