創(chuàng)建 XMLHttpRequest 對象(請參考上一章)后,就可以向服務器發(fā)送請求。
要將請求發(fā)送到服務器,我們使用 XMLHttpRequest 對象的兩個方法:
open()
send()
httpRequest.open("GET", "ajax_intro.txt", true); httpRequest.send();
open()方法接受三個參數(shù):
第一個參數(shù)是HTTP請求類型GET、POST
第二個參數(shù)是您將請求發(fā)送到的URL
可選的第三個參數(shù)設置請求是否異步(默認為true)
send()方法接受一個可選參數(shù):
對于GET請求,不要傳遞任何值
對于POST請求,傳遞名稱=值
對
在GET方法中,瀏覽器會將表單內(nèi)容(名稱/值對)添加到URL的末尾?后。
GET通常用于不關心安全性的簡單表單。GET為簡單表單提供了許多優(yōu)點。
GET請求可以被緩存
GET請求保留在瀏覽器歷史記錄中
GET請求可以加書簽
處理敏感數(shù)據(jù)時,絕不應使用GET請求
GET請求具有長度限制(僅2048個字符)
在POST方法中,內(nèi)容不會顯示在URL中。
如果表單數(shù)據(jù)包含敏感信息或個人信息,則應始終使用POST。
POST請求不會被緩存
POST請求不會保留在瀏覽器歷史記錄中
POST請求無法添加書簽
處理敏感數(shù)據(jù)時應使用POST請求
POST請求對數(shù)據(jù)長度沒有限制
以下示例顯示了如何使用JavaScript發(fā)出簡單的Ajax GET請求:
httpRequest.open("GET", "ajax_get.php", true); httpRequest.send();測試看看?/?
在上面的示例中,您可能會得到緩存的結(jié)果。為避免這種情況,請在URL中添加一個隨機數(shù):
httpRequest.open("GET", "ajax_get.php?r=" + Math.random(), true); httpRequest.send();測試看看?/?
如果要使用GET方法發(fā)送信息,請將信息添加到URL:
httpRequest.open("GET", "ajax_get.php?fname=Seagull&lname=Anna", true); httpRequest.send();測試看看?/?
以下示例顯示了如何使用JavaScript發(fā)出簡單的Ajax POST請求:
httpRequest.open("POST", "ajax_post.php", true); httpRequest.send();測試看看?/?
如果要使用POST方法發(fā)送信息,請使用設置HTTP標頭,setRequestHeader()并在該send()方法中指定要發(fā)送的數(shù)據(jù):
httpRequest.open("POST", "ajax_post.php", true); httpRequest.setRequestHeader("Content-Type", "application/x-www-form-urlencoded"); httpRequest.send("fname=Seagull&lname=Anna");測試看看?/?
setRequestHeader()方法接受兩個參數(shù):
第一個參數(shù)指定Http頭名稱
第二個參數(shù)指定Http頭值
open()方法的第二個參數(shù)(url)是服務器上目標文件的地址。
httpRequest.open("GET", "ajax_get.php", true);
AJAX可以發(fā)送和接收各種格式的信息,包括JSON,XML,HTML,PHP,ASP,文本等。
XMLHttpRequest對象可以定義回調(diào)函數(shù)以處理響應?;卣{(diào)函數(shù)在XMLHttpRequest對象的onreadystatechange屬性中定義。
httpRequest.onreadystatechange = function() { if (this.readyState === 4 && this.status === 200) { document.getElementById("output").innerHTML = this.responseText; } };測試看看?/?
open()方法的第三個參數(shù)指定請求是異步還是同步。
要發(fā)送同步請求,請將open()方法中的第三個參數(shù)更改為false。
如果使用了同步請求,則無需指定響應函數(shù):
var httpRequest = new XMLHttpRequest(); httpRequest.open("GET", "ajax_intro.txt", false); httpRequest.send(); document.getElementById("output").innerHTML = httpRequest.responseText;測試看看?/?
不建議使用同步請求,因為:
JavaScript將停止執(zhí)行,直到服務器返回響應數(shù)據(jù)
如果服務器忙或慢,則應用程序?qū)炱鸹蛲V?,用戶會感覺比較卡