原生ajax實現
阿新 • • 發佈:2019-01-04
何為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;
}
};