ajax

• Ajax — XMLHttpRequest() 对象

优点：无需重新加载整个网页的情况下，实现部分网页更新的技术。提高用户体验，Ajax技术的核心是XMLHttpRequest对象（简称XHR）；像ajax这种耗时长的操作应该异步执行，避免浏览器失去响应。

缺点：1、不支持浏览器back按钮；2、安全问题，暴露与服务器的交互细节；3、对搜索引擎的支持较弱；4、不容易调试；5、破坏了程序异常机制

ajax流程：

1. 创建XMLHttpRequest对象 var xhr = new XMLHttpRequest();
2. 创建新的http请求，指定请求方法、url、验证信息等。xhr.open('get', 'url', true/false[是否异步]) [true表示会在send后继续执行，而不等待服务器的响应]
   • 若是post请求，需要设置请求头格式的内容：xhr.setRequestHeader('content-type', 'application/x-www-form-urlenCoded'); [表单提交的格式]
3. 设置响应http请求状态变化的函数。
   xhr.onreadyStatechange = function () {
   if(xhr.readyState == 4 && xhr.status == 200) {
   // 处理：xhr.responseText / responseXML
   }
   }
4. 发送http请求 ：xhr.send()，[若是POST请求，需要写传入的string] — "methodName = GetAllComment&str1=str1&str2=str2"
5. 获取返回的数据并做后续处理，一般接收异步返回的数据，axios等操作
6. 异常捕获：axios catch ，原生：try { xhr.send();} catch (e) { console.log(e);}

readyState：0：请求初始化；1：服务器连接已确立；2：请求已接收；3：请求处理中；4：请求完成，响应就绪

abort()`:取消异步HTTP请求

getAllResponseHeaders()`: 返回一个字符串，包含响应中服务器发送的全部HTTP报头。每个报头都是一个用冒号分隔开的名/值对，并且使用一个回车/换行来分隔报头行

getResponseHeader(headerName)`:返回headName对应的报头值

• 原生Ajax请求过程

手撕过程

function getXHR(){
  var xhr = null;
  if(window.XMLHttpRequest) {// 兼容 IE7+, Firefox, Chrome, Opera, Safari
    xhr = new XMLHttpRequest();
  } else if (window.ActiveXObject) {
    try {
      xhr = new ActiveXObject("Msxml2.XMLHTTP");// 即MSXML3
    } catch (e) {
      try {
        xhr = new ActiveXObject("Microsoft.XMLHTTP");// // 兼容 IE6, IE5，很老的api,虽然浏览器支持,功能可能不完善,故不建议使用
      } catch (e) {
        alert("您的浏览器暂不支持Ajax!");
      }
    }
  }
  return xhr;
}

var xhr = getXHR();
xhr.open('GET', url/file,true);  //设置请求方式，url，以及是否异步
xhr.onreadystatechange = function() {   //设置回调监听函数
   if(xhr.readyState==4){
        if(xhr.status==200){
            var data=xhr.responseText;
             console.log(data);
   }
};
xhr.onerror = function() {
  console.log("Oh, error");
};
xhr.send();  //发送请求

封装为插件

GET

function getJSON (url) {
    return new Promise( (resolve, reject) => {
        var xhr = new XMLHttpRequest()
        xhr.open('GET', url, true)

        xhr.onreadystatechange = function () {
            if (this.readyState === 4) {
                if (this.status === 200) {
                    resolve(this.responseText, this)
                } else {
                    var resJson = { code: this.status, response: this.response }
                    reject(resJson, this)
                }
            }
        }
        xhr.send()
    })
}

post

function postJSON(url, data) {
    return new Promise( (resolve, reject) => {
        var xhr = new XMLHttpRequest()
        xhr.open("POST", url, true)
        xhr.setRequestHeader("Content-type", "application/x-www-form-urlencoded");

        xhr.onreadystatechange = function () {
            if (this.readyState === 4) {
                if (this.status === 200) {
                    resolve(JSON.parse(this.responseText), this)
                } else {
                    var resJson = { code: this.status, response: this.response }
                    reject(resJson, this)
                }
            }
        }
        xhr.send(JSON.stringify(data))
    })
}

使用

getJSON('/api/v1/xxx')    // => 这里面是就try
.catch( error => {
  // dosomething          // => 这里就是catch到了error，如果处理error以及返还合适的值
})
.then( value => {
  // dosomething          // 这里就是final
})