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