一、JS原生Ajax

1、基本概念

• ajax：一种请求数据的方式，不需要刷新整个页面；
• 核心：ajax的技术核心是 XMLHttpRequest 对象；
• ajax 请求过程：创建 XMLHttpRequest 对象、连接服务器、发送请求、接收响应数据；

2、函数封装

前端代码：

  ajax({
        url: "http://localhost:3000/api/userinfo",              //请求地址
        type: "POST",                       //请求方式
        data: { name: "super", age: 20 },        //请求参数
        dataType: "json",
        success: function (response, xml) {
            console.log(response)
            response = JSON.parse(response) || {}
            var temp = [];
            if (response.status === 'success') {
                var data = response.data;
                Object.keys(data).forEach(function(key){
                    temp.push('<span>'+key+':'+data[key]+'</span><br/>');
                })
                document.write(temp.join(''));
            }
        },
        fail: function (status) {
            console.error(status);
        }
});

function ajax(options) {
    options = options || {};
    options.type = (options.type || "GET").toUpperCase();
    options.dataType = options.dataType || "json";
    var params = formatParams(options.data);

    //创建 - 非IE6 - 第一步
    if (window.XMLHttpRequest) {
        var xhr = new XMLHttpRequest();
    } else { //IE6及其以下版本浏览器
        var xhr = new ActiveXObject('Microsoft.XMLHTTP');
    }

    //接收 - 第三步
    xhr.onreadystatechange = function () {
        if (xhr.readyState == 4) {
            var status = xhr.status;
            if (status >= 200 && status < 300) {
                options.success && options.success(xhr.responseText, xhr.responseXML);
            } else {
                options.fail && options.fail(status);
            }
        }
    }

    //连接 和 发送 - 第二步
    if (options.type == "GET") {
        xhr.open("GET", options.url + "?" + params, true);
        xhr.send(null);
    } else if (options.type == "POST") {
        xhr.open("POST", options.url, true);
        //设置表单提交时的内容类型
        xhr.setRequestHeader("Content-Type", "application/x-www-form-urlencoded");
        xhr.send(params);
    }
}
//格式化参数
function formatParams(data) {
    var arr = [];
    for (var name in data) {
        arr.push(encodeURIComponent(name) + "=" + encodeURIComponent(data[name]));
    }
    arr.push(("v=" + Math.random()).replace(".",""));
    return arr.join("&");
}

后端逻辑：

//server.js
var http = require('http');
var fs = require('fs');
var querystring = require('querystring');

var server = http.createServer(function(req, res) {

    // 前端页面请求路由
    if (req.url == "/index") {
        fs.readFile('index.html', function(err, data) {
            res.writeHead(200, { "Content-type": "text/html;charset=utf-8" });
            res.end(data);
        });
    } else {
        fs.readFile('404.html', function(err, data) {
            res.writeHead(200, { "Content-type": "text/html;charset=utf-8" });
            res.end(data);
        });
    }

    
    // 请求方法
    if (req.method.toLowerCase() === 'post') {
        // 接口路由
        if(req.url == "/api/userinfo") {
            var reqData = '';
            req.on('data', function (chunk) {
                reqData += chunk;
            });

            req.on('end', function () {
                //将字符串转换位一个对象
                console.log(reqData); //name=super&age=20&v=0865843628884519

                var dataString = reqData.toString();
                //将接收到的字符串转换位为json对象
                var dataObj = querystring.parse(dataString);
                dataObj.sex = '男'
                //输出数据
                var data={
                status:'success',
                message:'获取数据成功',
                    data:dataObj
                };
                res.writeHead(200, { "Content-Type": "application/json;charset=UTF-8" });
                res.end(JSON.stringify(data));
            });
        } 
    };
});

server.listen(3000, '127.0.0.1');

console.log('启动服务，监听 127.0.0.1:3000');

3、函数解析

（1）创建

• IE7及其以上版本中支持原生的 XHR 对象，因此可以直接用： var oAjax = new XMLHttpRequest()
• IE6及其之前的版本中，XHR对象是通过MSXML库中的一个ActiveX对象实现的。有的书中细化了IE中此类对象的三种不同版本，即MSXML2.XMLHttp、MSXML2.XMLHttp.3.0和MSXML2.XMLHttp.6.0；若感觉太麻烦，可以直接使用下面的语句创建： var oAjax=new ActiveXObject('Microsoft.XMLHTTP')

（2）连接和发送

• open()函数的三个参数：请求方式、请求地址、是否异步请求(同步请求的情况极少)
• GET 请求方式是通过URL参数将数据提交到服务器的，POST则是通过将数据作为 send 的参数提交到服务器
• POST 请求中，在发送数据之前，要设置表单提交的内容类型
• 提交到服务器的参数必须经过 encodeURIComponent() 方法进行编码，实际上在参数列表”key=value”的形式中，key 和 value 都需要进行编码，因为会包含特殊字符。每次请求的时候都会在参数列表中拼入一个 “v=xx” 的字符串，这样是为了拒绝缓存，每次都直接请求到服务器上

要点：

• encodeURI() ：用于整个 URI 的编码，不会对本身属于 URI 的特殊字符进行编码，如冒号、正斜杠、问号和井号；其对应的解码函数 decodeURI()
• encodeURIComponent()：用于对 URI 中的某一部分进行编码，会对它发现的任何非标准字符进行编码；其对应的解码函数 decodeURIComponent()

（3）接收

• 接收到响应后，响应的数据会自动填充XHR对象，相关属性如下

  • responseText：响应返回的主体内容，为字符串类型；
  • responseXML：如果响应的内容类型是 "text/xml" 或 "application/xml"，这个属性中将保存着相应的xml 数据，是 XML 对应的 document 类型；
  • status：响应的HTTP状态码；
  • statusText：HTTP状态的说明；

• XHR对象的readyState属性表示请求/响应过程的当前活动阶段，这个属性的值如下

  • 0-未初始化，尚未调用open()方法；
  • 1-启动，调用了open()方法，未调用send()方法；
  • 2-发送，已经调用了send()方法，未接收到响应；
  • 3-接收，已经接收到部分响应数据；
  • 4-完成，已经接收到全部响应数据；

• 在readystatechange事件中，先判断响应是否接收完成，然后判断服务器是否成功处理请求，xhr.status 是状态码，状态码以2开头的都是成功，304表示从缓存中获取，上面的代码在每次请求的时候都加入了随机数，所以不会从缓存中取值，故该状态不需判断

要点

• ajax请求是不能跨域的
• 只要 readyState 的值变化，就会调用 readystatechange 事件，（其实为了逻辑上通顺，可以把readystatechange放到send之后，因为send时请求服务器，会进行网络通信，需要时间，在send之后指定readystatechange事件处理程序也是可以的，但为了规范和跨浏览器兼容性，建议在open之前进行指定）

二、Fetch API

Fetch API提供了一个fetch()方法，它被定义在BOM的window对象中，你可以用它来发起对远程资源的请求。 该方法返回的是一个Promise对象，让你能够对请求的返回结果进行检索。

1、Fetch 基本用法

fetch()方法，包含了需要fetch 的网址和对应的属性设定( 例如method、headers、mode、body...等，最基本的写法属性不一定要填)，执行之后会送出Request，如果得到回应就会回传带有Response 的Promise 内容，使用then 将回传值传递下去。

fetch('网址')
    .then(function(response) {
// 处理 response
    }).catch(function(err) {
// 错误处理
});

2、Fetch 的 Request 属性

以下列出Fetch常用的的Request属性。

3、Fetch 的Response 属性

以下列出Fetch常用的Response属性。

4、Fetch 的Response 方法

以下列出Fetch常用的Response方法。

5、Fetch 的Get 用法

Get 是Fetch 最简单的方法，使用Get 必须要将fetch 第二个参数里的method 设定为get，如果遇到跨域问题，就搭配其他属性例如mode、credentials 来进行细部设定(但针对非跨域的就没用了)，下方的示例做了一个简单的后端请求，通过fetch 传递姓名和年纪的参数，就会看到后端回应一串文字。

前端代码：

const name = 'ooxx';
const age = 18;
const uri = `http://127.0.0.1:3000/api/fetch/userinfo?name=${name}&age=${age}`;
fetch(uri, {method:'GET'})
    .then(res => {
        return res.text();// 使用 text() 可以得到纯文字 String
    }).then(result => {
      console.log(result); // 得到「你的名字是：ooxx，年纪：18 岁」
});

后端逻辑：

var pathname = url.parse(req.url).pathname;
if (pathname == "/api/fetch/userinfo") {
    var reqData = url.parse(req.url).query;
    var dataStr = querystring.parse(reqData);
    res.writeHead(200, { "Content-Type": "application/json;charset=UTF-8" });
    res.end('你的名字是：'+dataStr.name +'，年纪：'+dataStr.age+' 岁');
}

6、Fetch 的Post 用法

使用POST方法可以搭配body属性设定传递参数，比如我的接口地址，可以接收name和age所组成的JSON请求，当网址接收到要求后，就会回应一个json对象，需要注意的是，如果是传递「中文」可能会出现乱码，这时可以使用encodeURI来做转码，且要通过JSON.stringify来转换成string方式传递。

前端代码：

fetch(uri, {
    method:'POST',
    body:encodeURI(JSON.stringify({
        name:'ooxx',
        age:18
    })),
    headers: {
        'Content-Type': 'application/x-www-form-urlencoded; charset=utf-8'
    }
})
    .then(res => {
        return res.json(); // 使用 json() 可以得到 json 对象
    }).then(result => {
    console.log(result);
    // 得到 {name: "ooxx", age: 18, text: "你的名字是 ooxx，年纪18岁～"}
});

后端逻辑：

if(req.url == "/api/fetch/userinfo") {
    var reqData = '';
    req.on('data', function (chunk) {
        reqData += chunk;
    });

    req.on('end', function () {
      //将字符串转换位一个对象
      var dataObj = JSON.parse(decodeURI(reqData.toString()));
      var data = {
        name: dataObj.name,
        age: dataObj.age,
        text: '你的名字是 '+dataObj.name+'，年纪'+dataObj.age+'岁～'
      }

      res.writeHead(200, { "Content-Type": "application/json;charset=UTF-8" });
      res.end(JSON.stringify(data));
    });
}

7、Fetch 搭配async、await、promise.all

过去在XMLHttpRequest 或jQuery AJAX 的全盛时期，如果要确保每个GET 或POST 的要求，都要按照指定的顺序进行，往往会用上一连串的callback 辅助，但是当callback 越来越多，代码也就越来越难管理，然而fetch 返回的是一个Promise，我们也就能直接利用await 或promise.all 的作法，轻松掌握同步与非同步之间的转换。

下方的例子是一个非同步的示例，因为没有进行任何的同步处理，所以执行之后，会先出现hello的文字，接着才是通过fetch 得到的结果。

const postURL = (name,age) => {
    return fetch(uri, {
        method:'POST',
        body:encodeURI(JSON.stringify({
            name:name,
            age:age
        })),
        headers: {
            'Content-Type': 'application/x-www-form-urlencoded; charset=utf-8'
        }
    })
        .then(res => {
            return res.json();
        }).then(result =>{
            console.log(result);
        });
};
postURL('Lily',18);
console.log('hello!!!');
postURL('Tom',18);

因为fetch 的特性，可以改成async 和await 的写法，执行后也就能按照我们要的顺序进行。

async function fetchAll () {
  await Promise.all([postURL('Lily',18), postURL('Tom',18)]);
  console.log('hello!!!');
}
fetchAll()

8、兼容性

关于Fetch API的兼容性，现代浏览器大部分还是支持的，可以放心使用，如下图所示：

Fetch API 的神奇，简化了许多原本较为复杂的用法，也让项目代码写起来更加干净易读好维护。更重要的是 JavaScript ES6 原生支持，你不需要安装任何依赖包，直接可以在项目中使用。