什么是AJAX
用JavaScript腳本（原生的XMLHttpRequest請求）向服務(wù)器發(fā)起HTTP請求，得到服務(wù)器返回的數(shù)據(jù)，在進行處理。

一個請求分為幾個部分

HOST:xxx.com:2222
Content-Type：application/x-www-url-encoded

AJAX的請求三部分

let request =new XMLHttpRequste();
request.open('GET','/xxx')//配置request
requset.send();

AJAX包括以下步驟
1.創(chuàng)建XMLHttpRequert實例
2.發(fā)出HTTP請求
3.接收服務(wù)器傳回的數(shù)據(jù)
4.更新網(wǎng)頁數(shù)據(jù)

1.AJAX可以用JS可以設(shè)置任意請求的header嗎
答：可以。用以下語句：
第一部分：request.open('get','/xxx');
第二部分：request.setHeader('content-type','/x-www-form-urlencoded');request.setRequestHeader('mika','19 ')
第三部分：是回車，不用設(shè)置
第四部分：request.send('a=1&b=2')
2.AJAX可以用JS可以獲取任意響應(yīng)hearder嗎
答：可以?？梢暂敵稣Z句：
第一部分：request.status(狀態(tài)碼)/request.statusText(狀態(tài),例如“ok“”)
第二部分：request.getResponseHeader() / request.getAleeResponseHeaders()
第四部分：request.responseText()
request.getAllResponseHeaders()//打印出全部響應(yīng)

封裝一個AJAX

window.jQuery.ajax = function (url, method, body, successFn, failFn) {
    let request = new XMLHttpRequest()
    request.open(method, url)
    request.onreadystatechange = () => {
        if (request.readyState === 4) {
            if (request.status >= 200 && request.status <= 300) {
                console.log('成功')
                successFn.call(undefined, request.responseText)
            }
            else if (request.status >= 400) {
                failFn.call(undefined, request)
            }
        }
        request.send(body)
    }
}

使用：

myButton.addEventListener('click', (e) => {
    window.jQuery.ajax({
        url: '/xxx',
        method: 'get',
        successFn: () => { },
        failFn: () => { }
    })
（如果用這個方式使用的話，封裝的引用方式得更改）
   let method=options.method
   let body =options.body
.....
可以使用ES6析構(gòu)賦值
window.jQuery.ajax = function(options){
let {method,body,success,failFn}=options
}
這句話和上面的那幾句引用一模一樣。
再進行精簡后，可以直接放到上面來//ES6
window.jQuery.ajax = function({method,body,success,failFn}){
///里面寫代碼
}

ES5和ES6語法
同一個功能，不同寫法，ES6更加高級

ES5
var x='???'
var o={}
o[x]=true //x的value as key === '???'=true

ES6
let x='???'
let o={
[x]:true;
//[key]:value
}

第一次了解Promise
回調(diào)的規(guī)范版
用法：

    myButton.addEventListener('click', (e) => {
        $.ajax({
            url: '/xxx',
            method: 'get',
        }).them(
            (responseText) => {
                console.log(responseText);
                return responseText
            },//這里是成功處理
            (request) => {
                console.log('失敗啦')
            }//這里是失敗處理
        ).them((上一個的處理結(jié)果) => {
            console.log(上一次的處理結(jié)果),//如果循環(huán)兩次，也是第一次成功，第二次失敗。第一次成功的結(jié)果會影響到第二次
                (request) => { console.log('error2') }
        })
    })

最后使用Promise的封裝AJAX代碼

window.jQuery.ajax = function ({ url, method, body, headers, }) {
  return new Promise(function (resolve, reject) {//成功,失敗
      let request = new XMLHttpRequest()
      request.open(method, url)
      request.onreadystatechange = () => {
          if (request.readyState === 4) {
              if (request.status >= 200 && request.status <= 300) {
                  resolve.call(undefined, request.responseText)
              }
              else if (request.status >= 400) {
                  reject.call(undefined, request)
              }
          }
      }
      request.send(body)
  })
}
---封裝---
---使用---
myButton.addEventListener('click', (e) => {
  $.ajax({
      url: '/xxx',
      method: 'get',
      headers: {
          'content-type': 'application/x-www-form-urlencoded',
          'frank': '18'
      }
  }).then(
      (then) => { console.log(text) },
      (request) => { console.log(request) }
  )

c