ajax初探

在看了一些文章之后，对Ajax有了初步的一些了解。Ajax的定义不用多说，主要记录一下Ajax的简单实现。
第一种方式是通过xhr(XMLHttpRequest)方式来发送Ajax请求。最基础简单的步骤是三步：创建一个xhr对象；调用open()方法，调用send()方法。
创建一个xhr对象是再简单不过的了 var xhr = new XMLHttpRequest();

open()方法是创建一个请求 xhr.open('POST','/serve',true);
open()方法有三个参数，分别是：

method: 请求的方式，如GET/POST，该参数不区分大小写；
url：请求的地址，该地址可以是相对的（相对于当前网页的url路径），也可以是绝对的；
async: 默认值为true，即为异步请求，若async=true，则表示为同步请求。

一般默认使用的是异步请求。同步请求的时候会出现一些限制：

xhr.timeout = 0;
xhr.withCredentails = false;
xhr.responseType = "";

不满足以上任意一个限制，就会抛出错误。

xhr.timeout 设置请求超时时间，如果值为0，说明不限时，在这样的情况下，如果服务器一直没有响应，会出现页面堵塞的情况，会影响用户的其它交互。所以应该尽量避免使用同步请求。

xhr.withCredentails 跨域请求设置默认值为false。跨域请求的时候需要手动设置为true。所以在同步请求的情况下，是无法进行跨域的。

xhr.responseType 设置请求返回的数据格式这个属性是在xhr标准2中才有的，在标准1里面提供的是 overrideMimetype()方法。
overrideMimetype()方法的作用是重写response的content-type。比如说，Server端给客户端返回了一份document或xml文档，但希望的是通过 xhr.response拿到的是一个DOM对象，那么就可以通过xhr.overrideMimeType('text/xml;charest = utf-8')来实现。
responseType用来指定xhr.response的数据类型，默认的xhr.response的数据类型是String字符串。不同的responseType的值对应不同的数据类型，如"text"对应String字符串；"document"对应Document对象；"json"对应JavaScript对象；"blob"对应Blob对象；"arrayBuffer"对应ArrayBuffer对象。
虽然在标准2中，2种方式都存在，且都可以设置响应返回的数据格式，但明显xhr.responseType功能强大很多，也方便使用，能做到xhr.overrideMimeType()所做到的。

除了上面提到的xhr.response，xhr提供了另外2种属性来获取请求返回的数据：xhr.responseText;xhr.responseXML。

xhr.response
默认值是空字符串""；
只有请求完成时，该属性才会有正确的值；
如果请求没完成，该属性的值可能是""或null。（具体的值跟responseType的值有关，如果responseType的值为""或"text",属性的值为""；否则值为null）
xhr.responseText
默认值是空字符串""；
只有当responseType为""或"text"时,才能调用该属性，否则会抛出错误；
只有请求成功时，才有正确值，否则值为空字符串""
xhr.responseXML
默认值为null;
只有当responseType为""、"text"、"document"时,才能调用该属性，否则会抛出错误；
只有请求成功并返回数据被正确解析时，才有正确值，否则值为null

send()方法是发送数据 xhr.send(data);
send()方法的参数data有6种类型：ArrayBuffer；Blob；Document；DOMString；FormData；null。如果是GET请求，一般不传参数或者传null参数。如果是在断网情况下，该方法会抛出错误，所以调用该方法的时候，需要用try-catch来捕获异常。

try{
    xhr,send(data);
}catch(e){
  //...
};

请求发送之后还要处理请求返回的数据，可以调用onload()方法或者onreadystatechange()方法。readyState这个属性可以追踪Ajax请求的当前状态，这个属性是可读属性，总共有5种不同的值（0-4），分别对应xhr的不同阶段，如3表示LOADING（正在下载响应体）。每次xhr.readyState的值发生变化的时候，都会触发xhr.onreadystatechange()事件。

完整例子如下：

var xhr = new XMLHttpRequest();
        xhr.responseType = 'json';
        xhr.open('GET','https://cnodejs.org/api/v1/topics',true);
        xhr.onload = function () {
            //如果请求成功
            if ((xhr.status >= 200 && xhr.status < 300) || xhr.status == 304)             
            {
                var res = this.response;
                console.log(res);
                //do successCallback
            }
        }
        xhr.send();

第二种方式是通过fetch来发送Ajax请求
通过fetch获取后台数据的代码很简单，它会返回一个Promise对象，有多个参数。

url 请求的地址，该参数为必选。
method 表示请求的方式，GET或者是POST。
body POST请求的参数，需要放在body里面，而GET请求的参数可以直接放在URL中
headers 设置请求的头信息，可在里面放指定的提交方式、指定的获取类型等信息

默认情况下，fetch不会从服务端发送或接收任何cookies。
如果要发送cookies，必须发送凭据头。

fetch('https://cnodejs.org/api/v1/topics',{
            method: 'GET',credentials: 'include',})
        .then((res)=>{
            return res.json()
        })
        .then((res)=>{
            console.log(res);
        })

完整例子如下：

fetch('https://cnodejs.org/api/v1/topics',headers: new Headers({
                'Accept': 'application/json'
            })
        })
        .then((res)=>{
            return res.json()
        })
        .then((res)=>{
            console.log(res);
        })

ajax初探

相关文章