TOP

AJAX 核心 —— XMLHTTPRequest 對象回顧(一)
2017-10-10 16:34:50 】 瀏覽:10217
Tags:

一、AJAX概述

不使用 AJAX 的網頁,如果要更新內容,需要重載整個頁面。

AJAX ( Asynchronous java script And XML ,異步 java script 和 XML)用于異步通訊,通過在后臺與服務器進行少量的數據交換,在不重載整個網頁的情況下,對網頁局部實現異步刷新。

 

二、AJAX核心

java script 中使用 XMLHTTPRequest 對象(XHR)實現 AJAX 請求。使用這個對象之前,先了解一下它的屬性和方法:

屬性 描述
readyState

表示 XMLHttpRequest 對象的狀態:

0:未初始化狀態。已創建 XMLHTTPRequest 對象

1:準備發送狀態。已調用 open 方法,send 方法尚未調用。

2:已經發送狀態。send 方法已經調用,尚未開始接受數據。

3:正在接收狀態。已經接收到 HTTP 響應頭信息,但是響應體還沒有完全接收到。

4:完成響應狀態。響應數據接受完成。

onreadystatechange    

當 readyState 值(XMLHTTPRequest 對象狀態)發生改變時的響應事件。

responseText

服務器響應的文本內容。

responseXML

服務器響應的 XML 內容。

status

服務器響應的 HTTP 狀態碼。200:OK。304:資源未修改。404:頁面未找到。500:服務器錯誤。

statusText

服務器響應的 HTTP 狀態文本。OK、資源未修改、頁面未找到、服務器錯誤等。

 

方法 描述

open(method,url,

asynch,username,

password)

指定和服務器端交互的HTTP方法,URL地址优乐棋牌app下载,即其他請求信息;

Method:表示http請求方法,一般使用"GET","POST"。

url:表示請求的服務器的地址。

asynch:表示是否異步(ture)优乐棋牌app下载,默認為 true。

后邊兩個可以不指定。

username 和 password 分別表示用戶名和密碼,提供 HTTP 認證機制需要的用戶名和密碼。

setRequestHeader(header,

value)

設置請求頭。header: 頭名稱。value: 頭的值。

getResponseHeader(header) 獲取指定 header 的響應頭信息。
getAllResponseHeaders() 獲取所有響應頭信息。
send(content)

向服務器發出請求,如果采用異步方式,該方法會立即返回。

content:POST請求時以字符串或 formData 對象傳進去,GET請求時不填參數或設為 null 。

abort()

中止請求。XMLHTTPRequest 對象恢復到狀態0(未初始化)。

 

三、AJAX步驟

一般步驟如下:

  1. 實例化 XMLHTTPRequest 對象(注意 IE 兼容性)
  2. 綁定監聽事件(onreadystatechange 屬性,判斷就緒用 readState 屬性 == 4,判斷響應成功用 status 屬性 == 200,獲取響應用 responseText 或 responseXML 屬性。
  3. 建立請求(open() 方法优乐棋牌app下载,注意最后一個參數為 ture(因為是 AJAX ))
  4. 設置請求頭(setRequestHeader() 方法,僅限于POST)
  5. 發送請求(send() 方法,POST 請求時在 send() 方法添加提交參數)

 

四、AJAX實現

// 第一步,創建 XMLHTTPRequest 對象
var xhr = window.XMLHTTPRequest ? (new XMLHTTPRequest()) : (new ActiveXObject('Microsoft.XMLHttp'));
if(!xhr){
    alert('創建 XMLHTTPRequest 對象失敗!');
    return false;
}
// 第二步,綁定回調函數
xhr.onreadystatechange = function () {
    if(xhr.readyState == 4 && xhr.status = 200){        var data = xhr.responseText;           }
}
// 第三步,建立請求
xhr.open("POST", url, true);// 第四步,設置請求頭(僅限于POST)
xhr.setRequestHeader('Content-type', 'application/x-www-form-urlencoded; charset-UTF-8');
// 第五步,發送請求
xhr.send('fname=michael&&lname=jordan');$('選擇器').load(url,[data],[callback])	// 從服務器加載數據,把返回 HTML 放入匹配元素
$.get(url,[data],[fn],[type])	// GET 請求加載數據

		

請關注公眾號獲取更多資料



首頁 上一頁 1 2 下一頁 尾頁 1/2/2
】【打印繁體】【】【】 【】【】【】 【關閉】 【返回頂部
上一篇PM2源碼淺析 下一篇vue2路由