什么是Ajax？
Aync Javascript And XML => 异步的JS和XML
此处的异步是局部刷新（对应全局刷新)
XML 可扩展的标记语言, 可以用自己定义的标签来存储数据
刚开始，AJAX和服务器进行交互的数据格式一般以XML为主
后面使用JSON,它能够更加与JavaScript兼容，层级清晰
AJAX的基本操作，四部曲
// 1. 创建XMLHttpRequest
let xhr = new XMLHttpRequest();
// IE低版本的浏览器
// new ActiveObject(); 高级程序设计汇总的惰性思想
// 2. 打开URL(配置发送请求的信息) API接口地址
// 第三个参数为true 为异步请求
// 第四个 user-name 传递服务器的用户名
// 第五 user-pass 密码
xhr.open('GET’,'./test.json',true);
// 3. 监听AJAX状态，在状态为x的时候，获取服务器响应的内容
xhr.onreadystatechange = function() {
// 请求成功并得到服务器数据
if (xhr.readyState === 4 && /^2|3d{2}$/.test(xhr.status)) {
// do something ..........
let result = xhr.responseText;
}
};
// 4. 发送请求
// send中放的是请求主体
xhr.send(null);
HTTP的请求方式
- GET系列请求
GET
DELETE 告诉服务器，删掉一些文件
HEAD 告诉服务器，只获取响应头的内容
OPTIONS 试探性请求，发个请求给服务器看能否正常通话
- POST系列
POST
PUT 和delete对应 ， 向服务器把传递的信息存储到服务器，(一般应用在文件和大型数据)
=> 真实项目中使用对应的请求方式，使请求变的更加”明确“,也
- GET：给的少，拿的多
- POST给的多，拿的少
客户端怎么报信息传递给服务器？
- 问号传参数 http://test.com/getbook?id=1 xhr.open('GET','/get?id=1',true);
- 设置请求头 setRequestHeader(key,value)
- 设置请求主体 xhr.send(请求主体信息)
服务器在怎么把信息传递给客户端？
- 响应头
- 响应主体
区别:
- GET传递给服务器的内容比POST少，url有长度限制(IE限制2KB , 其余为4-8KB)
- 请求主体中传递内容，一般没有大小限制，一般项目中会限制，优化体验
- GET会产生缓存，而且缓存不是自己可以控制的； 请求地址一样，浏览器会给你加缓存，不利于实时通信。一个地址，GTE多次，我们要去除缓存;
- 解决办法，设置随机数，+Math.rendoM(), 目的就是为了让URL不一样
- Symbol()
- 使用时间戳
总的原则：让看起来不同!
-
GET相比于POST来说不安全，GET问号传参，预防URL劫持; 如果一个地址需要请求多次应该避免这种缓存
注： 其实post，get都不是很安全（meituan技术大佬跟我说的，感谢！）。我想关于这点，作为开发者，我们要永远在技术上对客户采取”零信任“的方式，因为你不知道你面对的”客户“是普通客户还是”黑客“。所以说，安全工作要考虑到位！
复习一下原生AJAX的四部曲
注：“四部曲”很重要，能够理解这点是你看jQuery中的ajax的封装基础，也是Axios的基础-Promise based HTTP client for the browser and node.js.
// 1. 创建XMLHttpRequest对象
let xhr = new XMLHttpRequest;
// 2. 打开， 设置好， 请求方法， 请求地址， 请求为异步（ 或者同步）
xhr.open(method, url, true);
// 3. 开始监听xhr的状态
xhr.onreadystatechange = function() {
};
// send 之前， new之后，可以对xhr进行配置，比如：xhr.timeout = 1000;
// 4. 将AJAX发送出去,
// send所含的参数是: HTTP请求主体中的参数
xhr.send(null);
参考：
《JavaScript高级程序设计（第三版）》