Ajax實現異步請求步驟


一、原生JS實現:

 

var request = new XMLHttpRequest();  //創建XMLHttpRequest()對象

//啟動一個HTTP請求,但未發送請求到服務端,最后一個參數默認為false,異步發送。
request.open("GET/POSt", url, true/false);  //使用GET方法時直接在的url上傳遞參數。


//使用POST方法時要通過send方法傳遞參數給服務端
var data = "str";  //str為獲取表單元素的值或其它需要更新的內容


//設置頭信息,表明發送的是表單元素
request.setRequestHeader("Content-Type", "application/x-www-form-urlencoded");

//發送請求到服務端
request.send(null/data);


//onreadystatechange事件會在readystate屬性改變時觸發,監控readyState屬性
request.onreadystatechange = function() {

//狀態碼為4表示請求已完成,響應內容已就緒
  if (request.readyState === 4) {


    //狀態碼304表示請求資源沒有被修改,可以使用瀏覽器緩存
    if ((request.status >= 200 && request.status < 300) || request.status == 304) {


      //服務器返回的是json對象,使用JSON.parse()方法格式化為js對象。
      var data = JSON.parse(request.responseText);


      if (data.success) {
        //處理響應成功返回的數據

    
      } else {
        //處理響應失敗返回的數據


      }
    } else {
      //處理請求失敗返回的數據
    }
  }
}

//前后端交互約定,約定success為true或者false時返回不同的信息,
//通過success屬性可以方便前端調用返回的信息。
{
  "success" : true,
  "msg": "xxx",
}

 

 

二、jQuery實現


免責聲明!

本站轉載的文章為個人學習借鑒使用,本站對版權不負任何法律責任。如果侵犯了您的隱私權益,請聯系本站郵箱yoyou2525@163.com刪除。



 
粵ICP備18138465號   © 2018-2025 CODEPRJ.COM