关于AJAX的一点总结与思考-1

什么是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(请求主体信息)

服务器在怎么把信息传递给客户端？

• 响应头
• 响应主体

区别:

1. GET传递给服务器的内容比POST少，url有长度限制(IE限制2KB , 其余为4-8KB)
2. 请求主体中传递内容，一般没有大小限制，一般项目中会限制，优化体验
3. GET会产生缓存，而且缓存不是自己可以控制的； 请求地址一样，浏览器会给你加缓存，不利于实时通信。一个地址，GTE多次，我们要去除缓存;

1. 解决办法，设置随机数，+Math.rendoM(), 目的就是为了让URL不一样
2. Symbol()
3. 使用时间戳

总的原则：让看起来不同!

4. 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高级程序设计（第三版）》

​ https://github.com/axios/axios