1. 程式人生 > >原生ajax實現

原生ajax實現

何為ajax?

AJAX = 非同步 JavaScript 和 XML。AJAX 是一種用於建立快速動態網頁的技術。通過在後臺與伺服器進行少量資料交換,AJAX 可以使網頁實現非同步更新。這意味著可以在不重新載入整個網頁的情況下,對網頁的某部分進行更新。傳統的網頁(不使用 AJAX)如果需要更新內容,必需過載整個網頁面。有很多使用 AJAX 的應用程式案例:新浪微博、Google 地圖、開心網等等。

ajax原生實現

1.建立xmlRequest物件

let xmlRequest = null;
if (window.XMLHttpRequest) {
  xmlRequest =
new XMLHttpRequest(); //ie6以上的瀏覽器 } else { xmlRequest = new ActiveXObject('Microsoft.XMLHttp'); //ie5,ie6 }

2.傳送請求以及註冊事件

方法 描述
open(method,url,async) 規定請求的型別、URL 以及是否非同步處理請求。method:請求的型別;GET 或 POST。url:檔案在伺服器上的位置。async:true(非同步)或 false(同步)如果不寫預設非同步
send(string) 將請求傳送到伺服器。string:僅用於 POST 請求
setRequestHeader(“header”, “value”) 把指定首部設定為所提供的值。在設定任何首部之前必須先呼叫open()。設定header並和請求一起傳送 ('post’方法一定要 )
屬性 描述
onreadystatechange 儲存函式(或函式名),每當 readyState 屬性改變時,就會呼叫該函式。
readyState 存有 XMLHttpRequest 的狀態。從 0 到 4 發生變化。
0: 請求未初始化
1: 伺服器連線已建立
2: 請求已接收
3: 請求處理中
4: 請求已完成,且響應已就緒
//GET
let response;
xmlRequest.open('GET', 'a.php?t=1', true); //(methods,url,async?)預設為async(true),同步需改為false
xmlRequest.send();
xmlRequest.onreadystatechange = () => {
  //收到響應去且請求成功
  if (xmlRequest.readyState === 4 && xmlRequest.status === 200) {
    console.log('請求成功');
    //響應文字
    response = xmlRequest.responseText;
  }
};