Ajax是什么

AJAX

AJAX即“Asynchronous JavaScript and XML”（异步的JavaScript与XML技术）
尽管X在Ajax中代表XML, 但由于JSON的许多优势，比如更加轻量以及作为Javascript的一部分，目前JSON的使用比XML更加普遍。JSON和XML都被用于在Ajax模型中打包信息。

简单一句话，AJAX 就是用 JS 向服务端发起一个请求，并获取服务器返回的内容。

为什么我们需要 AJAX？

1. 地址栏。用户在地址栏输入 http://baidu.com ，按回车，就向 http://baidu.com 发起了一个请求。（同时页面刷新）

2. a 标签。用户点击页面中的 a 链接，也会发起一个请求。（同时页面刷新）

3. img 标签。页面中如果有 img 标签，那么就会发起一个对此图片的请求（页面没有刷新，但是只能请求图片）类似的还有 link 标签、script 标签，都可以对一类文件的请求。

传统的Web应用允许用户端填写表单（form），当提交表单时就向网页服务器发送一个请求。服务器接收并处理传来的表单，然后送回一个新的网页，但这个做法浪费了许多带宽，因为在前后两个页面中的大部分HTML码往往是相同的。
由于每次应用的沟通都需要向服务器发送请求，应用的回应时间依赖于服务器的回应时间。这导致了用户界面的回应比本机应用慢得多。

---

AJAX请求

想要用 JS 发起一个请求很简单，一共 4 步。

1. 创建一个对象

var request = new XMLHttpRequest()

2. 监听请求成功后的状态变化

request.onreadystatechange = function() {
  if (this.readyState == 4 && this.status == 200) {
    console.log(request.responseText)
  }
};

第三行的 request.responseText 就是服务器返回的内容

3. 设置请求参数

request.open("GET", "filename", true);

4. 发送请求

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')

---

参考

AJAX是什么
### Ajax - Web开发者指南| MDN