ajax初探

2024年5月28日 207次阅读 来源: Uniquec

在看了一些文章以后，对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',{
            method: 'GET',
            headers: new Headers({
                'Accept': 'application/json'
            })
        })
        .then((res)=>{
            return res.json()
        })
        .then((res)=>{
            console.log(res);
        })
    原文作者：Uniquec
    原文地址: https://segmentfault.com/a/1190000013810859
    本文转自网络文章，转载此文章仅为分享知识，如有侵权，请联系博主进行删除。
点赞