電子發(fā)燒友App
Ajax（AsynchronousJavaScript and Xml）。 現(xiàn)在，允許瀏覽器與服務(wù)器通信而無須刷新當(dāng)前頁面的技術(shù)都被叫做Ajax.
Ajax并不是一項新技術(shù)，其實是多種技術(shù)的綜合，包括Javascript、XHTML和CSS、DOM、XML和XMLHttpRequest
服務(wù)器端語言：服務(wù)器需要具備向瀏覽器發(fā)送特定信息的能力。Ajax與服務(wù)器端語言無關(guān)。
什么是瀏覽器的異步交互
如圖，客戶端不再是發(fā)送http請求，而是用JS調(diào)用Ajax引擎來發(fā)送數(shù)據(jù)，且服務(wù)端返回的也不在時整個頁面，而是處理請求后的客戶端所需要的數(shù)據(jù)。
優(yōu)點：
1.不用提交整個頁面，而是用JavaScript提交具體的數(shù)據(jù)，這樣就使一些沒有必要在網(wǎng)絡(luò)上傳輸?shù)臄?shù)據(jù)不用傳輸了。
2.因為只提交數(shù)據(jù)，所以每天提交請求的數(shù)據(jù)庫不是很大，這樣可以減輕網(wǎng)絡(luò)傳輸數(shù)據(jù)的壓力。
3.由于不用刷新整個頁面，所以即便提交以后，展現(xiàn)在客戶面前的頁面還是不會消失的，這樣對于客戶的交互性特別好
AJAX異步請求原理和過程
AJAX 指異步 JavaScript 及 XML（Asynchronous JavaScript And XML），它不是一種新的編程語言，而是一種使用現(xiàn)有標(biāo)準(zhǔn)的新方法。
AJAX 基于 JavaScript 和 HTTP 請求（HTTP requests）的，因為AJAX 通過在后臺與服務(wù)器交換少量數(shù)據(jù)的方式，允許網(wǎng)頁進行異步更新。這意味著有可能在不重載整個頁面的情況下，對網(wǎng)頁的一部分進行更新，通過 AJAX，你可以創(chuàng)建更好、更快以及更友好的 WEB
應(yīng)用程序
Ajax 可以調(diào)用服務(wù)器任何資源，可以調(diào)用動態(tài)頁面、靜態(tài)頁面，也可以調(diào)用json對象，但是由于瀏覽器無法解析二進制文件，故調(diào)用圖片等時就會報錯。
調(diào)用json對象時，必須使用eval（“（” + 返回的對象 + “）”）;，否則無法解析對象的資源。
AJAX異步請求原理和過程：
1、AJAX創(chuàng)建異步對象XMLHttpRequest ：
AJAX 的要點是 XMLHttpRequest 對象。不同的瀏覽器創(chuàng)建 XMLHttpRequest 對象的方法是有差異的。IE瀏覽器使用 ActiveXObject，而其他的瀏覽器使用名為 XMLHttpRequest 的 JavaScript 內(nèi)建對象。如需針對不同的瀏覽器來創(chuàng)建此對象，我們要使用一條 “try
and catch” 語句。如下示例：
《script type=“text/javascript”》
function GetXmlHttpObject（）
{
var xmlHttp=null;
try{
// Firefox， Opera 8.0+， Safari等瀏覽器創(chuàng)建XMLHttpRequest對象的方法
xmlHttp=new XMLHttpRequest（）;
}
catch （e）{
// Internet Explorer瀏覽器創(chuàng)建XMLHttpRequest對象的方法
try{
xmlHttp=new ActiveXObject（“Msxml2.XMLHTTP”）;//IE6.0以上的瀏覽器創(chuàng)建XMLHttpRequest對象的方法
}
catch （e）{
try{
xmlHttp=new ActiveXObject（“Microsoft.XMLHTTP”）;//IE6.0以下的瀏覽器創(chuàng)建XMLHttpRequest對象的方法
}
catch （e）{
alert（“您的瀏覽器不支持AJAX！”）;
return false;
}
}
}
return xmlHttp;
}
《/script》
首先聲明一個保存 XMLHttpRequest 對象的 xmlHttp 變量。
然后使用 XMLHttp=new XMLHttpRequest（） 來創(chuàng)建此對象。這條語句針對 Firefox、Opera 以及 Safari 瀏覽器。假如失敗，則嘗試針對 Internet Explorer 6.0+ 的 xmlHttp=new ActiveXObject（“Msxml2.XMLHTTP”），假如也不成功，則嘗試針對 Internet Explorer
5.5+ 的 xmlHttp=new ActiveXObject（“Microsoft.XMLHTTP”）。
假如這三種方法都不起作用，那么這個用戶所使用的瀏覽器已經(jīng)太過時了，他或她會看到一個聲明此瀏覽器不支持 AJAX 的提示。
2、操作XMLHttpRequest 對象：
（1）設(shè)置請求參數(shù)（請求方式，請求頁面的相對路徑，是否異步）
（2）設(shè)置回調(diào)函數(shù)，一個處理服務(wù)器響應(yīng)的函數(shù)，使用 onreadystatechange ，類似函數(shù)指針，如
xmlHttp.onreadystatechange=function（）
{
// 我們需要在這里寫一些代碼
}
（3）獲取異步對象的readyState 屬性：該屬性存有服務(wù)器響應(yīng)的狀態(tài)信息。每當(dāng) readyState 改變時，onreadystatechange 函數(shù)就會被執(zhí)行。
readyState 屬性可能的值：
0 請求未初始化（在調(diào)用 open（） 之前）
1 請求已提出（調(diào)用 send（） 之前）
2 請求已發(fā)送（這里通常可以從響應(yīng)得到內(nèi)容頭部）
3 請求處理中（響應(yīng)中通常有部分數(shù)據(jù)可用，但是服務(wù)器還沒有完成響應(yīng)）
4 請求已完成（可以訪問服務(wù)器響應(yīng)并使用它）
在調(diào)用時，我們要向這個 onreadystatechange 函數(shù)添加一條 If 語句，來測試我們的響應(yīng)是否已完成（意味著可獲得數(shù)據(jù)）：
xmlHttp.onreadystatechange=function（）
{
if（xmlHttp.readyState==4）
{
// 從服務(wù)器的response獲得數(shù)據(jù)
}
}
（4）判斷響應(yīng)報文的狀態(tài)，若為200說明服務(wù)器正常運行并返回響應(yīng)數(shù)據(jù)，
（5）讀取響應(yīng)數(shù)據(jù)，可以通過 responseText 屬性來取回由服務(wù)器返回的數(shù)據(jù)。
xmlHttp.onreadystatechange=function（）
{
if（xmlHttp.readyState==4）{
if（xmlHttp.status==200）{
document.myForm.time.value=xmlHttp.responseText;
}
}
}
示例如下：
《script type=“text/javascript”》
function ajaxFunction（）
{
var xmlHttp=GetXmlHttpObject（）;//定義XMLHttpRequest對象
xmlHttp.open（“GET”，“****.ashx”，true）//設(shè)置請求方法，請求的目標(biāo)頁面，以及是否異步
xmlHttp.setRequestHeader（“If-Modified-Since”，“0”）;
xmlHttp.onreadystatechange=function（）{ //定義XMLHttpRequest對象的onreadystatechange屬性
if（xmlHttp.readyState==4） { //判斷XMLHttpRequest對象的狀態(tài)
if（xmlHttp.status==200）{
document.myForm.time.value=xmlHttp.responseText;//通過XMLHttpRequest對象的responseText屬性獲取回傳的數(shù)據(jù)
}
}
}
xmlHttp.send（null）;//發(fā)送異步請求
}
《/script》
《form name=“myForm”》
用戶： 《input type=“text” name=“username” onkeyup=“ajaxFunction（）;” /》
時間： 《input type=“text” name=“time” /》
《/form》
《/body》
《/html》
ajax異步請求四個步驟
1. 第一步（得到XMLHttpRequest）
* ajax其實只需要學(xué)習(xí)一個對象：XMLHttpRequest，如果掌握了它，就掌握了ajax！！！
* 得到XMLHttpRequest
》 大多數(shù)瀏覽器都支持：var xmlHttp = new XMLHttpRequest（）;
》 IE6.0：var xmlHttp = new ActiveXObject（“Msxml2.XMLHTTP”）;
》 IE5.5以更早版本的IE：var xmlHttp = new ActiveXObject（“Microsoft.XMLHTTP”）;
* 編寫創(chuàng)建XMLHttpRequest對象的函數(shù)
function createXMLHttpRequest（） {
try {
return new XMLHttpRequest（）;
} catch（e） {
try {
return new ActiveXObject（“Msxml2.XMLHTTP”）;
} catch（e） {
try {
return new ActiveXObject（“Microsoft.XMLHTTP”）;
} catch（e） {
alert（“哥們兒，你用的是什么瀏覽器啊？”）;
throw e;
}
}
}
}
2. 第二步（打開與服務(wù)器的連接）
* xmlHttp.open（）：用來打開與服務(wù)器的連接，它需要三個參數(shù)：
》 請求方式：可以是GET或POST
》 請求的URL：指定服務(wù)器端資源，例如；/day23_1/AServlet
》 請求是否為異步：如果為true表示發(fā)送異步請求，否則同步請求！
* xmlHttp.open（“GET”， “/day23_1/AServlet”， true）;
3. 第三步（發(fā)送請求）
* xmlHttp.send（null）：如果不給可能會造成部份瀏覽器無法發(fā)送！
》 參數(shù)：就是請求體內(nèi)容！如果是GET請求，必須給出null。
4. 第四步（）
* 在xmlHttp對象的一個事件上注冊監(jiān)聽器：onreadystatechange
* xmlHttp對象一共有5個狀態(tài)：
》 0狀態(tài)：剛創(chuàng)建，還沒有調(diào)用open（）方法;
》 1狀態(tài)：請求開始：調(diào)用了open（）方法，但還沒有調(diào)用send（）方法
》 2狀態(tài)：調(diào)用完了send（）方法了；
》 3狀態(tài)：服務(wù)器已經(jīng)開始響應(yīng)，但不表示響應(yīng)結(jié)束了！
》 4狀態(tài)：服務(wù)器響應(yīng)結(jié)束！（通常我們只關(guān)心這個狀態(tài)！！！）
* 得到xmlHttp對象的狀態(tài)：
》 var state = xmlHttp.readyState;//可能是0、1、2、3、4
* 得到服務(wù)器響應(yīng)的狀態(tài)碼
》 var status = xmlHttp.status;//例如為200、404、500
* 得到服務(wù)器響應(yīng)的內(nèi)容1
》 var content = xmlHttp.responseText;//得到服務(wù)器的響應(yīng)的文本格式的內(nèi)容
》 var content = xmlHttp.responseXML;//得到服務(wù)器的響應(yīng)的xml響應(yīng)的內(nèi)容，它是Document對象了！
xmlHttp.onreadystatechange = function（） {//xmlHttp的5種狀態(tài)都會調(diào)用本方法
if（xmlHttp.readyState == 4 && xmlHttp.status == 200） {//雙重判斷：判斷是否為4狀態(tài)，而且還要判斷是否為200
// 獲取服務(wù)器的響應(yīng)內(nèi)容
var text = xmlHttp.responseText;
}
};
工商網(wǎng)監(jiān)
評論