原来发请求都不好用，于是在1999年，微软公司发布IE浏览器5.0版，IE 5 率先在 JS 中引入 ActiveX 对象（API），使得 JS 可以直接发起 HTTP 请求。随后 Mozilla、 Safari、 Opera 也跟进（抄袭）了，取名 XMLHttpRequest，并被纳入 W3C 规范

AJAX

Async Javascript And XML（异步 JavaScript 和 XML)

使用 XMLHTTPRequest 发请求
服务器返回 XML 格式的字符串
JS 解析 XML，并更新局部页面

请求方法

let request=new XMLHttpRequest()
request.open('请求','url')
request.send()
request.onreadystatechange=()=>{}//监听

详见mdn-XMLHttpRequest

readyState 的值

值	状态	描述
0	UNSENT (未打开)	open()方法还未被调用.
1	OPENED (未发送)	open()方法已经被调用.
2	HEADERS_RECEIVED (已获取响应头)	send()方法已经被调用, 响应头和响应状态已经返回.
3	LOADING (正在下载响应体)	响应体下载中; responseText中已经获取了部分数据.
4	DONE (请求完成)	整个请求过程已经完毕.

返回XML格式的字符串可以用DOM操作，太麻烦，于是我们使用符合JSON对象格式的字符串!

onreadystatechange

当一个文档的 readyState 属性发生更改时，readystatechange 事件会被触发

document.onreadystatechange = function () {
    if (document.readyState === "4") {
       你的操作
    }
}

cros

协议、域名、端口必须完全一样才能发送ajax请求，就是同源

突破同源CROS “Cross-Origin Resource Sharing”

CROS说:我们一家的，浏览器别搞我兄弟

后台设置一个响应头

比如
Access-Control-Allow-Origin: http://kbiao.me
Access-Control-Max-Age: 3628800
Access-Control-Allow-Methods: GET，PUT, DELETE
Access-Control-Allow-Headers: content-type。

AJAX的功能

JS设置请求header

第一部分:request.open('GET'，'https://www.baidu.com')
第二部分:request.setRequestHeader('content-type','x-www-from-urlencoded'）
第四部分:request.send('a=1&b=2')

JS获取响应header

第一部分:request.status/request.statusText
第二部分:request.getResponseHeader()/request.getAllResponseHeaders()
第四部分:request.responseText

自己封装一个jquery.ajax

window.jquery.ajax=function({url, type,data,success，error,headers}){
    let request=new XMLHttpRequest()
    request.open(type,url)
    for(let key in headers){
        let value=headers[key]
        request.setRequestHeader(key,value)
    }
    request.onreadystatechange=()=>{
        if(request.readyState === 4){
            if(request.status >= 200 && request.status < 300){
                sucess.call(undefined,requset.responseText)//callback的参数
            }else if(request.status>=400){
                error.call(undefined,request)//callback的参数
            }
        }
    }
    requset.send(data)
}

Promise

ajax返回一个Promise实例
Promise接受一个函数,返回一个then哈希表,then(fn1,fn2)接受2个函数，返回一个then的哈希表,then也会返回一个Promise实例，所以可以进行链式操作

把上面的jquest.ajax跟进下

window.jquery.ajax =  ({url,type,data,headers}) =>{
  return new Promise(function (resolve, reject) {
    let request = new XMLHttpRequest()
    request.open(type, url)
    for (let key in headers) {
      let value = headers[key]
      request.setRequestHeader(key, value)
    }
    request.onreadystatechange = () => {
      if (request.readyState === 4) {
        if (request.status >= 200 && request.status < 300) {
          resolve.call(undefined, request.responseText) //callback的参数
        } else if (request.status >= 400) {
          reject.call(undefined, request) //callback的参数
        }
      }
    }
    request.send(data)
  })
}