AJAX
AJAX即“Asynchronous JavaScript and XML”（异步的JavaScript与XML技术）
尽管X在Ajax中代表XML, 但由于JSON的许多优势，比如更加轻量以及作为Javascript的一部分，目前JSON的使用比XML更加普遍。JSON和XML都被用于在Ajax模型中打包信息。
简单一句话，AJAX 就是用 JS 向服务端发起一个请求，并获取服务器返回的内容。
为什么我们需要 AJAX？
地址栏。用户在地址栏输入 http://baidu.com ，按回车，就向 http://baidu.com 发起了一个请求。（同时页面刷新）
a 标签。用户点击页面中的 a 链接，也会发起一个请求。（同时页面刷新）
img 标签。页面中如果有 img 标签，那么就会发起一个对此图片的请求（页面没有刷新，但是只能请求图片）类似的还有 link 标签、script 标签，都可以对一类文件的请求。
传统的Web应用允许用户端填写表单（form），当提交表单时就向网页服务器发送一个请求。服务器接收并处理传来的表单，然后送回一个新的网页，但这个做法浪费了许多带宽，因为在前后两个页面中的大部分HTML码往往是相同的。
由于每次应用的沟通都需要向服务器发送请求，应用的回应时间依赖于服务器的回应时间。这导致了用户界面的回应比本机应用慢得多。
AJAX请求
想要用 JS 发起一个请求很简单，一共 4 步。
- 创建一个对象
var request = new XMLHttpRequest()
- 监听请求成功后的状态变化
request.onreadystatechange = function() {
if (this.readyState == 4 && this.status == 200) {
console.log(request.responseText)
}
};
第三行的 request.responseText 就是服务器返回的内容
- 设置请求参数
request.open("GET", "filename", true);
- 发送请求
request.send();
jQuery.ajax 对这 4 步进行了封装，只需要一步就可以了：
$.get('filename').then(function(response){
// 这里的 response 就是返回的内容
})
Js可以设置任意请求header吗
第一部分 request.open('get','/xxx')
第二部分 request.setHeader('content-type', 'x-www-form-urlencoded')
第四部分 request.send('xxx')
Js可以设置任意响应header吗
第一部分 request.status/request.statusText
第二部分 request.getResponseHeader() /request.getAllResponseHeader()
第四部分 request.responseText
ajax 获取响应头
node.js设置响应头
手写AJAX:
let xhr = new XMLHttpRequest()
xhr.open('GET', '/xxxx')
xhr.onreadystatechange === function(){
if(xhr.readyState === 4&& xhr.status === 200){
console.log(xhr.responseText)
}
}
xhr.send('a=1&b=2')
参考
