AJAX

什么是AJAX
用JavaScript脚本（原生的XMLHttpRequest请求）向服务器发起HTTP请求，得到服务器返回的数据，在进行处理。

一个请求分为几个部分

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.创建XMLHttpRequert实例
2.发出HTTP请求
3.接收服务器传回的数据
4.更新网页数据

---

1.AJAX可以用JS可以设置任意请求的header吗
答：可以。用以下语句：
第一部分：request.open('get','/xxx');
第二部分：request.setHeader('content-type','/x-www-form-urlencoded');request.setRequestHeader('mika','19 ')
第三部分：是回车，不用设置
第四部分：request.send('a=1&b=2')
2.AJAX可以用JS可以获取任意响应hearder吗
答：可以。可以输出语句：
第一部分：request.status(状态码)/request.statusText(状态,例如“ok“”)
第二部分：request.getResponseHeader() / request.getAleeResponseHeaders()
第四部分：request.responseText()
request.getAllResponseHeaders()//打印出全部响应

1.客户端 set JS后request四部分给服务端 服务端重新setJS后 response四部分给客户端
2.服务端有端口，客户端没有

封装一个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析构赋值
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
回调的规范版
用法：

    myButton.addEventListener('click', (e) => {
        $.ajax({
            url: '/xxx',
            method: 'get',
        }).them(
            (responseText) => {
                console.log(responseText);
                return responseText
            },//这里是成功处理
            (request) => {
                console.log('失败啦')
            }//这里是失败处理
        ).them((上一个的处理结果) => {
            console.log(上一次的处理结果),//如果循环两次，也是第一次成功，第二次失败。第一次成功的结果会影响到第二次
                (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