JavaScript实现Ajax

1：基本概念

jQuery的Ajax请求实际上是封装的一个XHLHttpRequest，从字面意思来看是，XML是一种文件格式，Http是一个网络请求，Request最开始是用于请求XML文件的，后来不断扩展可以请求多种类型的文件。

XHLHttpRequest，网络请求模块，或者是一个浏览器网络线程。用于从URL网络上获取数据，有了对象，就可以实现页面的无刷新请求数据，就可以做到一个局部的更新，也可以获取多种类型的数据(ftp、文件)。

2：要实现和使用XMLHttpRequest

它是一个对象，首先我们需要实例化，定义一个：

    var xhr = new XMLHttpRequest();

3：初始化请求，给定一些必要的配置，给它一些property

    //Ajax请求时的参数设置
    method          请求方式
    url             请求地址
    async           是否异步
    user            用户名
    password        密码
    
    xhr.open(method,url,async,user,password);

4：发送请求(encodeURLComponent)

    xhr.send(data);
    等待接收

5：接收网络请求返回

一般有如下属性：

• responseText，请求返回的数据内容，可以是一段文本，是一段二进制或者是一个json
• responseXML

是一个文件，如果响应头内容是text/xml，这个属性将保留响应数据的XML、DOM文档。

• status，响应的HTTP状态，如 200(正常，200-300之间都表示成功) 304(使用缓存) 404(没找到) 500(服务器内部错误)等
• statusText，HTTP状态说明
• readyStatus，请求/响应过程的当前活动阶段，一共有5个值：0(未被调用open)，1(已被调用open但未发送)，2(已调用send)，3(已接收到请求返回的数据)，4(请求已完成)。
• timeout，设置请求超时时间

      xhr.onreadystatechange = () => {
          if (xhr.readyStatus === 4) {
              /* HTTP 状态在 200-300 之间表示请求成功 */
              /* HTTP 状态为 304 表示请求内容未发生改变，可直接从缓存中读取 */
              if (xhr.status >= 200 &&
                  xhr.status < 300 ||
                  xhr.status == 304) {
                  console.log('请求成功', xhr.responseText)
              }
          }
      }

6：封装(promise)

    function ajax (options) {
        /* 获取请求地址 */
        let url = options.url;
        /* 获取请求方法 */
        const method = options.method.toLocaleLowerCase() || 'get';
        /* 默认异步 */
        const async = options.async != false;
        /* 获取请求request数据 */
        const data = options.data;
        /* 实例化XMLHttpRequest */
        const xhr = new XMLHttpRequest();
        /* 设置超时时间 */
        if (options.timeout && options.timeout > 0) {
            xhr.timeout = options.timeout
        }
    
        return new Promise ( (resolve, reject) => {
            /* 添加超时回调 */
            xhr.ontimeout = () => reject && reject('请求超时');
            /* 成功回调 */
            xhr.onreadystatechange = () => {
                if (xhr.readyState == 4) {
                    if (xhr.status >= 200 && xhr.status < 300 || xhr.status == 304) {
                        resolve && resolve(xhr.responseText);
                    } else {
                        reject && reject();
                    }
                }
            }
    
            /* 失败回调 */
            xhr.onerror = err => reject && reject(err);
    
            /* 拼接参数 */
            let paramArr = [];
            let encodeData;
            if (data instanceof Object) {
                for (let key in data) {
                    paramArr.push( encodeURIComponent(key) + '=' + encodeURIComponent(data[key]) );
                }
                encodeData = paramArr.join('&');
            }
    
            /* get请求 */
            if (method === 'get') {
                const index = url.indexOf('?')
                if (index === -1) url += '?'
                else if (index !== url.length -1) url += '&'
                url += encodeData
            }
    
            /* 初始化请求 */
            xhr.open(method, url, async);
    
            /* get直接发送拼接的URL */
            if (method === 'get') xhr.send(null);
    
            if (method === 'post') {
                xhr.setRequestHeader('Content-Type','application/x-www-form-urlencoded;charset=UTF-8')
                xhr.send(encodeData)
            }
        })
    }

总结：关于网络请求，一般常用的有四种：

• 一个是get，获取网络资源

• 然后是post，一般用于提交数据，提交数据的参数是放在请求的body里面的

• delete，删除

• put，标准的一个修改

关于Http的简单请求和非简单请求或者是跨域，在跨域时由于浏览器的安全机制，涉及到一个问题关于在Ajax请求 ，是在请求之后还是请求之前判断跨域，这时候就需要了解一下简单请求和复杂请求。

简单请求是先把资源请求回来，然后再去判断是否跨域。如果是一个复杂请求，浏览器会先去发送一个嗅探或者是欲请求（一般是一个option），先判断是否跨域，如果不是跨域那就执行，如果是跨域那就直接不请求了。一般来讲，如果get不修改它的Content-Type，那么基本上都是简单请求。post如果采用www-form的形式，也是一个简单请求。

这篇文章主要是分享了Javascript中XMLHttpRequest对象的基本属性和方法, 从实例化、初始化、发送和接受四个阶段完成了Ajax网络请求核心内容封装。