Ajax向服務(wù)器發(fā)送請(qǐng)求和接收返回的信息

Ajax向服務(wù)器發(fā)送請(qǐng)求

(1)open()方法

open()方法用于創(chuàng)建一個(gè)新的HTTP請(qǐng)求，并指定此請(qǐng)求的類(lèi)型(如GET、POST等)、URL以及驗(yàn)證信息，其聲明方式如下所示：

open("method","URL"[,asyncFlag[,"userName"[,"password"]]])

在上述聲明中，method用于指定請(qǐng)求的類(lèi)型，其值可為POST、GET、PUT及PROPFIND，大小寫(xiě)不敏感;URL表示請(qǐng)求的地址，可以為絕對(duì)地址也可以為相對(duì)地址，并且可以傳遞查詢(xún)字符串。其余參數(shù)為可選參數(shù)，其中，asyncFlagy用于指定請(qǐng)求方式，同步請(qǐng)求為false，默認(rèn)為異步請(qǐng)求true;userName用于指定用戶(hù)名，password用于指定密碼。

(2)send()方法

send()方法用于發(fā)送請(qǐng)求到HTTP服務(wù)器并接收回應(yīng)。其聲明方式如下所示：

send(content)

在上述聲明中，content用于指定要發(fā)送的數(shù)據(jù)，其值可為DOM對(duì)象的實(shí)例、輸入流或字符串，一般與POST請(qǐng)求類(lèi)型配合使用，需要注意的是，如果請(qǐng)求聲明為同步，該方法將會(huì)等待請(qǐng)求完成或者超時(shí)才會(huì)返回，否則此方法將立即返回。

需要注意的是，在使用GET方式傳遞特殊字符或中文參數(shù)時(shí)，要使用JavaScript中的encodeURIComponent()函數(shù)將其轉(zhuǎn)換成“%十六進(jìn)制數(shù)”的形式，防止在某些瀏覽器(如IE瀏覽器)中中文亂碼的問(wèn)題。

Ajax接收服務(wù)器返回的信息

了解Ajax向服務(wù)器發(fā)送請(qǐng)求后，下面將對(duì)Ajax如何接收服務(wù)器返回的信息(例如，HTML標(biāo)簽、CSS樣式、字符串、XML、JSON等)，進(jìn)行詳細(xì)講解。具體如下：

(1)readyState屬性

readyState屬性用于返回Ajax的當(dāng)前狀態(tài)，狀態(tài)值有5種形式，具體如表所示。

(2)onreadystatechange屬性

onreadystatechange事件屬性用于感知readyState屬性狀態(tài)的改變。為了大家更好的理解這兩個(gè)屬性的使用，下面創(chuàng)建一個(gè)服務(wù)器端的文件index.php，用于輸出字符串，然后在瀏覽器端index.html中向服務(wù)器端發(fā)送請(qǐng)求，并在控制臺(tái)輸出狀態(tài)值。具體示例如下所示：

創(chuàng)建服務(wù)器端文件：index.php

<?php
    echo "testing..."; 
?>

創(chuàng)建瀏覽器端文件：index.html

<script>
    //主流瀏覽器創(chuàng)建Ajax對(duì)象
    var xhr = new XMLHttpRequest();
    //感知Ajax狀態(tài)的改變
    xhr.onreadystatechange=function(){
       //輸出Ajax當(dāng)前的狀態(tài)值
       console.log(xhr.readyState);
    }
    //創(chuàng)建一個(gè)新的HTTP請(qǐng)求
    xhr.open("get","./index.php");
    //向服務(wù)器端發(fā)送新建的HTTP請(qǐng)求
    xhr.send(null);
</script>

在瀏覽器中訪問(wèn)客戶(hù)端文件，按“F12”鍵，切換到控制臺(tái)，查看輸出結(jié)果，具體如下圖所示。

感知Ajax狀態(tài)的改變

從圖中可以看出，通過(guò)onreadystatechange事件屬性可以清晰的感知Ajax狀態(tài)的改變，同時(shí)使用readyState獲取轉(zhuǎn)變后的狀態(tài)值。例如Ajax從0(未初始化)狀態(tài)變成1(初始化)狀態(tài)值時(shí)，Ajax此時(shí)的狀態(tài)值為1。

(3)status屬性

status屬性用于返回當(dāng)前請(qǐng)求的HTTP狀態(tài)碼，常見(jiàn)的狀態(tài)碼如表所示。

值得一提的是，在感知當(dāng)前Ajax對(duì)象狀態(tài)時(shí)，為了追求程序的嚴(yán)謹(jǐn)性，需要同時(shí)判斷當(dāng)前HTTP狀態(tài)status是否等于200(請(qǐng)求成功)。

需要注意的是，Ajax中的statusText屬性，僅當(dāng)數(shù)據(jù)發(fā)送并接收完畢后，才可以獲取當(dāng)前請(qǐng)求的響應(yīng)狀態(tài)。

(4)獲取響應(yīng)信息的相關(guān)屬性

當(dāng)數(shù)據(jù)接收完畢且請(qǐng)求服務(wù)器的請(qǐng)求成功時(shí)，即可以使用Ajax中提供的相關(guān)屬性獲取服務(wù)器的響應(yīng)信息。具體的屬性及相關(guān)說(shuō)明如下表所示。

在上表中，responseText屬性用于返回文本格式的響應(yīng)數(shù)據(jù);屬性responseBody表示直接從服務(wù)器返回并未經(jīng)解碼的二進(jìn)制數(shù)據(jù);responseXML屬性用于接收XML數(shù)據(jù)格式的響應(yīng)數(shù)據(jù)。

什么是Ajax?Ajax都有哪些優(yōu)點(diǎn)和缺點(diǎn)?

ajax的常用參數(shù)介紹【java技術(shù)文章】

web前端最新AJAX教程

傳智教育HTML&js+前端開(kāi)發(fā)培訓(xùn)課程