建站
咨詢
售后
建站咨詢
新聞中心
ajax如何工作？
AJAX 使用的 XMLHttpRequest 的對象與服務(wù)器通信。讓我們嘗試通過下面顯示的圖像了解 AJAX 的流程或 AJAX 的工作原理。
為皋蘭等地區(qū)用戶提供了全套網(wǎng)頁設(shè)計制作服務(wù)，及皋蘭網(wǎng)站建設(shè)行業(yè)解決方案。主營業(yè)務(wù)為網(wǎng)站建設(shè)、網(wǎng)站制作、皋蘭網(wǎng)站設(shè)計，以傳統(tǒng)方式定制建設(shè)網(wǎng)站，并提供域名空間備案等一條龍服務(wù)，秉承以專業(yè)、用心的態(tài)度為用戶提供真誠的服務(wù)。我們深信只要達到每一位用戶的要求，就會得到認可，從而選擇與我們長期合作。這樣，我們也可以走得更遠！
正如您在上面的示例中所看到的，XMLHttpRequest對象起著重要作用。
- 用戶從
UI發(fā)送請求，JavaScript中調(diào)用XMLHttpRequest對象。 HTTP請求由XMLHttpRequest對象發(fā)送到服務(wù)器。- 服務(wù)器使用
JSP，PHP，Servlet，ASP.net 等與數(shù)據(jù)庫交互。 - 檢索數(shù)據(jù)。
- 服務(wù)器將
XML數(shù)據(jù)或JSON數(shù)據(jù)發(fā)送到XMLHttpRequest回調(diào)函數(shù)。 HTML和CSS數(shù)據(jù)顯示在瀏覽器上。
向服務(wù)器發(fā)送請求
XMLHttpRequest 對象用于和服務(wù)器交換數(shù)據(jù)。
當你的頁面全部加載完畢后，客戶端會通過 XMLHttpRequest 對象向服務(wù)器請求數(shù)據(jù)，服務(wù)器端接受數(shù)據(jù)并處理后，向客戶端反饋數(shù)據(jù)。
如需將請求發(fā)送到服務(wù)器，我們使用 XMLHttpRequest 對象的open()和send()方法：
xmlhttp.open("GET","ajax_info.txt",true);
xmlhttp.send();| 方法 | 描述 |
|---|---|
| open(method,url,async) |
規(guī)定請求的類型、URL 以及是否異步處理請求。
|
| send(string) |
將請求發(fā)送到服務(wù)器。
|
GET 還是 POST？
與POST相比，GET 更簡單也更快，并且在大部分情況下都能用。
然而，在以下情況中，請使用POST請求：
-
無法使用緩存文件（更新服務(wù)器上的文件或數(shù)據(jù)庫）
-
向服務(wù)器發(fā)送大量數(shù)據(jù)（
POST沒有數(shù)據(jù)量限制） -
發(fā)送包含未知字符的用戶輸入時，
POST比GET更穩(wěn)定也更可靠
GET 請求
一個簡單的GET請求：
實例
xmlhttp.open("GET","demo_get.html",true);
xmlhttp.send();
嘗試一下 ?
在上面的例子中，您可能得到的是緩存的結(jié)果。
為了避免這種情況，請向 URL 添加一個唯一的 ID：
實例
xmlhttp.open("GET","demo_get.html?t=" + Math.random(),true);
xmlhttp.send();
嘗試一下 ?
如果您希望通過GET方法發(fā)送信息，請向 URL 添加信息：
實例
xmlhttp.open("GET","demo_get2.html?fname=Henry&lname=Ford",true);
xmlhttp.send();
嘗試一下 ?
?fname=Henry&lname=Ford為請求時傳遞的參數(shù)，指瀏覽器向服務(wù)器傳遞兩個參數(shù)，一個為fname，值為Henry，一個為lname，值為Ford。在本實例中服務(wù)器只用到fname的參數(shù)，沒有用到lname的參數(shù)。
提示：GET請求具有以下的幾個特點：
GET請求可被緩存GET請求保留在瀏覽器歷史記錄中GET請求可被收藏為書簽GET請求不應(yīng)在處理敏感數(shù)據(jù)時使用GET請求有長度限制GET請求只應(yīng)當用于取回數(shù)據(jù)
POST 請求
一個簡單POST請求：
實例
xmlhttp.open("POST","demo_post.html",true);
xmlhttp.send();
嘗試一下 ?
如果需要像 HTML 表單那樣 POST 數(shù)據(jù)，請使用setRequestHeader()來添加 HTTP 頭。然后在send()方法中規(guī)定您希望發(fā)送的數(shù)據(jù)：
實例
xmlhttp.open("POST","ajax_test.html",true);
xmlhttp.setRequestHeader("Content-type","application/x-www-form-urlencoded");
xmlhttp.send("fname=Henry&lname=Ford");
嘗試一下 ?
| 方法 | 描述 |
|---|---|
| setRequestHeader(header,value) |
向請求添加 HTTP 頭。
|
提示：POST請求的特點如下：
POST請求不會被緩存POST請求不會保留在瀏覽器歷史記錄中POST請求不能被收藏為書簽POST請求對數(shù)據(jù)長度沒有要求
url - 服務(wù)器上的文件
open()方法的url參數(shù)是服務(wù)器上文件的地址：
xmlhttp.open("GET","ajax_test.html",true); 該文件可以是任何類型的文件，比如.txt和.xml，或者服務(wù)器腳本文件，比如.asp和.php（在傳回響應(yīng)之前，能夠在服務(wù)器上執(zhí)行任務(wù)）。
異步 - True 或 False？
AJAX 指的是異步 JavaScript 和 XML（Asynchronous JavaScript and XML）。
XMLHttpRequest 對象如果要用于 AJAX 的話，其open()方法的sync(async)參數(shù)必須設(shè)置為 true：
xmlhttp.open("GET","ajax_test.html",true);對于 web 開發(fā)人員來說，發(fā)送異步請求是一個巨大的進步。很多在服務(wù)器執(zhí)行的任務(wù)都相當費時。AJAX 出現(xiàn)之前，這可能會引起應(yīng)用程序掛起或停止。
通過 AJAX，JavaScript 無需等待服務(wù)器的響應(yīng)，而是：
-
在等待服務(wù)器響應(yīng)時執(zhí)行其他腳本
-
當響應(yīng)就緒后對響應(yīng)進行處理
Async=true
當使用 async=true 時，請規(guī)定在響應(yīng)處于 onreadystatechange 事件中的就緒狀態(tài)時執(zhí)行的函數(shù)：
實例
xmlhttp.onreadystatechange=function()
{
if (xmlhttp.readyState==4 && xmlhttp.status==200)
{
document.getElementById("myDiv").innerHTML=xmlhttp.responseText;
}
}
xmlhttp.open("GET","ajax_info.txt",true);
xmlhttp.send();
嘗試一下 ?
您將在稍后的章節(jié)學習更多有關(guān) onreadystatechange 的內(nèi)容。
Async = false
如需使用 async=false，請將open()方法中的第三個參數(shù)改為 false：
xmlhttp.open("GET","test1.txt",false); 我們不推薦使用 async=false，但是對于一些小型的請求，也是可以的。
請記住，JavaScript 會等到服務(wù)器響應(yīng)就緒才繼續(xù)執(zhí)行。如果服務(wù)器繁忙或緩慢，應(yīng)用程序會掛起或停止。
注意：當您使用 async=false 時，請不要編寫 onreadystatechange 函數(shù) - 把代碼放到send()語句后面即可：
實例
xmlhttp.open("GET","ajax_info.txt",false);
xmlhttp.send();
document.getElementById("myDiv").innerHTML=xmlhttp.responseText;
嘗試一下 ?
以上就是 AJAX 通過 XMLHttpRequest 對象向服務(wù)器發(fā)送請求的介紹內(nèi)容了，在下一章中，我們將繼續(xù)學習 XHR 響應(yīng)。
文章標題：創(chuàng)新互聯(lián)AJAX教程:AJAXXHR-請求
本文鏈接：http://fisionsoft.com.cn/article/cddjhip.html
