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()方法中的PROCESSDATA参数 在使用jQuery的$.ajax()方...
form表单提交的几种方式 表单提交方式一:直接利用form表单提...
文章浏览阅读1.3k次。AJAX的无刷新机制使得在注册系统中对于...
文章浏览阅读1.2k次。 本文将解释如何使用AJAX和JSON分析器在...
文章浏览阅读2.2k次。/************************** 创建XML...
文章浏览阅读3.7k次。在ajax应用中,通常一个页面要同时发送...