更新時間:2022-04-07 來源:黑馬程序員 瀏覽量:
open()方法用于創(chuàng)建一個新的HTTP請求,并指定此請求的類型(如GET、POST等)、URL以及驗證信息,其聲明方式如下所示:
open("method","URL"[,asyncFlag[,"userName"[,"password"]]])
在上述聲明中,method用于指定請求的類型,其值可為POST、GET、PUT及PROPFIND,大小寫不敏感;URL表示請求的地址,可以為絕對地址也可以為相對地址,并且可以傳遞查詢字符串。其余參數(shù)為可選參數(shù),其中,asyncFlagy用于指定請求方式,同步請求為false,默認為異步請求true;userName用于指定用戶名,password用于指定密碼。
send()方法用于發(fā)送請求到HTTP服務器并接收回應。其聲明方式如下所示:
send(content)
在上述聲明中,content用于指定要發(fā)送的數(shù)據(jù),其值可為DOM對象的實例、輸入流或字符串,一般與POST請求類型配合使用,需要注意的是,如果請求聲明為同步,該方法將會等待請求完成或者超時才會返回,否則此方法將立即返回。
需要注意的是,在使用GET方式傳遞特殊字符或中文參數(shù)時,要使用JavaScript中的encodeURIComponent()函數(shù)將其轉(zhuǎn)換成“%十六進制數(shù)”的形式,防止在某些瀏覽器(如IE瀏覽器)中中文亂碼的問題。
了解Ajax向服務器發(fā)送請求后,下面將對Ajax如何接收服務器返回的信息(例如,HTML標簽、CSS樣式、字符串、XML、JSON等),進行詳細講解。具體如下:
readyState屬性用于返回Ajax的當前狀態(tài),狀態(tài)值有5種形式,具體如表所示。
onreadystatechange事件屬性用于感知readyState屬性狀態(tài)的改變。為了大家更好的理解這兩個屬性的使用,下面創(chuàng)建一個服務器端的文件index.php,用于輸出字符串,然后在瀏覽器端index.html中向服務器端發(fā)送請求,并在控制臺輸出狀態(tài)值。具體示例如下所示:
創(chuàng)建服務器端文件:index.php
<?php echo "testing..."; ?>
創(chuàng)建瀏覽器端文件:index.html
<script> //主流瀏覽器創(chuàng)建Ajax對象 var xhr = new XMLHttpRequest(); //感知Ajax狀態(tài)的改變 xhr.onreadystatechange=function(){ //輸出Ajax當前的狀態(tài)值 console.log(xhr.readyState); } //創(chuàng)建一個新的HTTP請求 xhr.open("get","./index.php"); //向服務器端發(fā)送新建的HTTP請求 xhr.send(null); </script>
在瀏覽器中訪問客戶端文件,按“F12”鍵,切換到控制臺,查看輸出結(jié)果,具體如下圖所示。
感知Ajax狀態(tài)的改變
從圖中可以看出,通過onreadystatechange事件屬性可以清晰的感知Ajax狀態(tài)的改變,同時使用readyState獲取轉(zhuǎn)變后的狀態(tài)值。例如Ajax從0(未初始化)狀態(tài)變成1(初始化)狀態(tài)值時,Ajax此時的狀態(tài)值為1。
status屬性用于返回當前請求的HTTP狀態(tài)碼,常見的狀態(tài)碼如表所示。
值得一提的是,在感知當前Ajax對象狀態(tài)時,為了追求程序的嚴謹性,需要同時判斷當前HTTP狀態(tài)status是否等于200(請求成功)。
需要注意的是,Ajax中的statusText屬性,僅當數(shù)據(jù)發(fā)送并接收完畢后,才可以獲取當前請求的響應狀態(tài)。
當數(shù)據(jù)接收完畢且請求服務器的請求成功時,即可以使用Ajax中提供的相關(guān)屬性獲取服務器的響應信息。具體的屬性及相關(guān)說明如下表所示。
在上表中,responseText屬性用于返回文本格式的響應數(shù)據(jù);屬性responseBody表示直接從服務器返回并未經(jīng)解碼的二進制數(shù)據(jù);responseXML屬性用于接收XML數(shù)據(jù)格式的響應數(shù)據(jù)。