如何創(chuàng)建一個(gè)Ajax請(qǐng)求

這篇文章給大家分享的是有關(guān)如何創(chuàng)建一個(gè)Ajax請(qǐng)求的內(nèi)容。小編覺(jué)得挺實(shí)用的，因此分享給大家做個(gè)參考，一起跟隨小編過(guò)來(lái)看看吧。

Ajax 是什么? 如何創(chuàng)建一個(gè) Ajax？

我對(duì) ajax 的理解是，它是一種異步通信的方法，通過(guò)直接由 js 腳本向服務(wù)器發(fā)起 http 通信，然后根據(jù)服務(wù)器返回的數(shù)據(jù)，更新網(wǎng)頁(yè)的相應(yīng)部分，而不用刷新整個(gè)頁(yè)面的一種方法。

創(chuàng)建步驟：

面試手寫（原生）：

//1：創(chuàng)建Ajax對(duì)象var xhr = window.XMLHttpRequest?new XMLHttpRequest():new ActiveXObject('Microsoft.XMLHTTP');// 兼容IE6及以下版本//2：配置 Ajax請(qǐng)求地址xhr.open('get','index.xml',true);//3：發(fā)送請(qǐng)求xhr.send(null); // 嚴(yán)謹(jǐn)寫法//4:監(jiān)聽(tīng)請(qǐng)求，接受響應(yīng)xhr.onreadysatechange=function(){
     if(xhr.readySate==4&&xhr.status==200 || xhr.status==304 )
          console.log(xhr.responsetXML)

jQuery寫法

  $.ajax({
          type:'post',
          url:'',
          async:ture,//async 異步  sync  同步
          data:data,//針對(duì)post請(qǐng)求
          dataType:'jsonp',
          success:function (msg) {

          },
          error:function (error) {

          }
        })

promise 封裝實(shí)現(xiàn)：

// promise 封裝實(shí)現(xiàn)：function getJSON(url) {
  // 創(chuàng)建一個(gè) promise 對(duì)象
  let promise = new Promise(function(resolve, reject) {
    let xhr = new XMLHttpRequest();

    // 新建一個(gè) http 請(qǐng)求
    xhr.open("GET", url, true);

    // 設(shè)置狀態(tài)的監(jiān)聽(tīng)函數(shù)
    xhr.onreadystatechange = function() {
      if (this.readyState !== 4) return;

      // 當(dāng)請(qǐng)求成功或失敗時(shí)，改變 promise 的狀態(tài)
      if (this.status === 200) {
        resolve(this.response);
      } else {
        reject(new Error(this.statusText));
      }
    };

    // 設(shè)置錯(cuò)誤監(jiān)聽(tīng)函數(shù)
    xhr.onerror = function() {
      reject(new Error(this.statusText));
    };

    // 設(shè)置響應(yīng)的數(shù)據(jù)類型
    xhr.responseType = "json";

    // 設(shè)置請(qǐng)求頭信息
    xhr.setRequestHeader("Accept", "application/json");

    // 發(fā)送 http 請(qǐng)求
    xhr.send(null);
  });

  return promise;}

感謝各位的閱讀！關(guān)于“如何創(chuàng)建一個(gè)Ajax請(qǐng)求”這篇文章就分享到這里了，希望以上內(nèi)容可以對(duì)大家有一定的幫助，讓大家可以學(xué)到更多知識(shí)，如果覺(jué)得文章不錯(cuò)，可以把它分享出去讓更多的人看到吧！