本節(jié)簡介（異步鏈接服務(wù)器對象）XMLHTTPRequest以及AJAX的簡介。
AJAX即“Asynchronous Javascript And XML”（異步JavaScript和XML）。 AJAX有四個方面的好處：1.即減輕了服務(wù)器的負(fù)擔(dān)。2帶來了更好的用戶體驗。3.基于標(biāo)準(zhǔn)被廣泛的支持。4.擁有更好的頁面呈現(xiàn)和數(shù)據(jù)分離。
技術(shù)名稱 技術(shù)說明
javascript javascript是通用的腳本語言，AJAX是用javascript編寫的
css 用戶界面的樣式通過css來修改
DOM DOM通過javascript修改DOM，ajax可以在運行時改變用戶界面，或者局部更新頁面中的某個節(jié)點。
XMLHttpRequest XMLHttpRequest對象 XMLHttpRequest對象允許web程序員從web服務(wù)器以后臺的方式獲取數(shù)據(jù)。數(shù)據(jù)的個數(shù)通常是XML或者是文本。
從上面我們看出，javascript就想膠水一樣將各個部分粘貼在一起，例如通過javascript操作BOM改變刷新用戶界面，通過修改className來改變css樣式風(fēng)格
1.異步對象連接服務(wù)器
不嚴(yán)謹(jǐn)?shù)恼f，ajax是一個簡單的多線程，它能夠是用戶在前臺多種操作而不間斷。ajax異步交互在后臺默默的工作著 在web中異步訪問是通過XMLHttpRequest對象來實現(xiàn)的，該對象最早是在ie5被作為activeX控件引入的。隨后各個瀏覽器紛紛支持該異步對象，首先必須創(chuàng)建對象。代碼如下：
復(fù)制代碼 代碼如下:
var xmlHttp;
function createXMLHrrpRequest() {
if (window.ActiveXObject)
xmlHttp = new ActiveXObject("Microsoft.XMLHTTP");
else if (window.XMLHttpRequest)
xmlHttp = new XMLHttpRequest();
}
該對象是先創(chuàng)建了一個全局變量xmlHttp，留以后函數(shù)中使用。另外創(chuàng)建異步對象函數(shù)createXMLHrrpRequest()
該過程用到了if語句方法，如果是IE采用window.ActiveXobject方法，如果不是，則用XMLHttpRequest方法創(chuàng)建函數(shù)。
在創(chuàng)建完異步對象后，自然是使用該對象連接服務(wù)器，該對象有一系列十分有用的屬性和方法。
屬性/方法 說明
abort() 取消請求
getAllResponseHeaders() 獲取指定的Http頭
open(method,url) 創(chuàng)建請求，method指定請求類型，GET POST
send() 發(fā)送請求
setRequestHeader() 指定請求的http頭
onreadystatechange 發(fā)生任何狀態(tài)變化時的事件控制對象
readyState
請求的狀態(tài)
0為尚未初始化
1為正在發(fā)送請求
2為請求完成
3為請求成功，正接收數(shù)據(jù)。
4為接收數(shù)據(jù)成功
responseText 服務(wù)器返回文本
responseXML 服務(wù)器返回xml
status
服務(wù)器返回的http請求響應(yīng)值，常用的有
200表示請求成功
202表示請求被接收，但處理未完成
400表示錯誤的請求
404表示資源未找到
500表示內(nèi)部服務(wù)器錯誤，如aspx代碼錯誤
創(chuàng)建完XMLHttpRequest對象后首先利用open()方法建立一個請求，并向服務(wù)器發(fā)送，該方法的完整表示式如下：
open(methond,url,asynchronous,user,password)
其中，method表示請求的類型，通長為GET，POST。
url即請求的地址，可以是絕對地址，也可以是相對地址。
asynchronous是一個布爾值，表示是否為異步請求，默認(rèn)值為異步請求true。
user、password分別為可選的用戶名、密碼。
創(chuàng)建了異步對象后，要建立一個到服務(wù)器的請求可使用如下代碼：
xmlHttp.open("GET","1-1.aspx",true);
以上代碼用get方法請求的相對地址為9-1.aspx的頁面，方式是異步的。在發(fā)出了請求后便需要請求的狀態(tài)readyState屬性來判斷請求的情況，如果該屬性變化了，就會觸發(fā)onreadystatechange事件，因此通常的代碼如下:
復(fù)制代碼 代碼如下:
script type="text/javascript">
xmlHttp.onRecorderStateChange = function(){
if(xmlHttp.readyState == 4)
//執(zhí)行相關(guān)代碼
}
/script>
也就是直接編寫onRecorderStateChange的事件函數(shù)，如果readyState的狀態(tài)為4（數(shù)據(jù)接收成功）則繼續(xù)操作。但是通常情況下，不但需要判斷請求的狀態(tài)，還要判斷服務(wù)器返回的狀態(tài)status,因此上述代碼改為
復(fù)制代碼 代碼如下:
script type="text/javascript">
xmlHttp.onRecorderStateChange = function(){
if(xmlHttp.readyState == 4 xmlHttp.status==200)
//執(zhí)行相關(guān)代碼
}
/script>
以上兩段代碼僅僅只是建立了請求，還需要使用send()方法來發(fā)送請求，該方法的原型如下：
send(body);
改方法僅有一個參數(shù)body，它表示要向服務(wù)器發(fā)送的數(shù)據(jù)，其格式為查詢字符串的形式，例如：
var body = "myName=isaacage=25";
如果再open中指定的是get方式，則這些參數(shù)作為查詢字符串提交，如果指定的是post方式，則作為HTTP的POST方法提交。對于send()而言。body參數(shù)是必須的，如果不發(fā)送任何數(shù)據(jù)，則可以使用
xmlHttp.send(null)
特別的，如果使用POST方法進行提交請求，那么在發(fā)送之前必須使用以下語句來設(shè)置HTTP的頭，語法如下：
xmlHttp.setRequestHeader("content-Type","application/x-www-form-urlencoded;")
服務(wù)器在收到客戶端請求之后，根據(jù)請求返回相應(yīng)的結(jié)果，這個結(jié)果通常為兩種形式，一種是文本形式，存儲在responseText中；另一種是XML格式，存儲在responseXML中?？蛻舳顺绦蚩梢詫η罢哌M行字符串的處理，對后者進行DOM相關(guān)的處理，例如可以對服務(wù)器返回值做如下的處理：
alert("服務(wù)器返回："+xmlHttp.responseText);
上述整個異步連接服務(wù)器的過程如下：
復(fù)制代碼 代碼如下:
body>
script type="text/javascript">
var xmlHttp;
function createXMLHttpRequest() {
if (window.ActiveXObject)
xmlHttp = new ActiveXObject("Microsoft.XMLHTTP");
else if (window.XMLHttpRequest)
xmlHttp = new XMLHttpRequest();
}
function startRequest() {
createXMLHttpRequest();
xmlHttp.open("GET", "http://study.ahthw.com/ajaxresponse/1-1.aspx", true);
xmlHttp.onreadystatechange = function() {
if (xmlHttp.readyState == 4 xmlHttp.status == 200)
alert("服務(wù)器返回: " + xmlHttp.responseText);
}
xmlHttp.send(null);
}
/script>
input type="button" value="測試異步通訊" onClick="startRequest()">
/body>
為了解決異步連接ie緩存問題，需要在真實地址加一個與時間毫秒相關(guān)的參數(shù)，使得每次請求的地址都不一樣。而該參數(shù)服務(wù)器確是不需要的。
復(fù)制代碼 代碼如下:
var sUrl = "1-1.aspx?"+new Date().getTime();//地址不斷變化
XMLHttp.open("GET",sUrl,true);
2.GET和POST模式
上面的實例中，除了請求異步服務(wù)器以外，并沒有向服務(wù)器發(fā)送額外的數(shù)據(jù)，通常在html請求中有g(shù)et和post模式，這兩種模式都可以作為異步請求發(fā)送數(shù)據(jù)的方式。
如果是GET請求，則直接把數(shù)據(jù)放入異步請求的URL地址中，而send方法不發(fā)送任何數(shù)據(jù)，例如：
復(fù)制代碼 代碼如下:
var queryString = "firstName=isaacbirthday=0226";
var sUrl = "1-1.aspx?" + queryString + "timestamp" + new Date().getTime();
xmlHttp.open("GET", sUrl);
xmlHttp.send(null); //該語句只發(fā)送null
如果是POST模式，則是把數(shù)據(jù)統(tǒng)一在send()方法中送出，請求地址沒有任何信息，并且必須設(shè)置請求的文件頭，例如：
復(fù)制代碼 代碼如下:
script language="javascript">
var queryString = "firstName=isaacbirthday=0226";
var sUrl = "1-1.aspx?" + queryString + "timestamp" + new Date().getTime();
xmlHttp.open("POST", sUrl);
xmlHttp.setRequestHeader("Content-Type","application/x-www-form-urlencoded");
xmlHttp.send(queryString); //該語句負(fù)責(zé)發(fā)送數(shù)據(jù)
/script>
實例
為了更清楚地演示GET和POST的區(qū)別，編寫示例代碼，首先創(chuàng)建兩個文本框用于輸入用戶姓名和生日，并建立兩個按鈕分別用于GET和POST兩個方法來發(fā)送異步請求
復(fù)制代碼 代碼如下:
form>
p>input type="text" id="firstName"/>/p>
p>input type="text" id="birthday" />/p>
/form>
input type="button" value="GET" onClick="doRequestUsingGET()">
input type="button" value="POST" onClick="doRequestUsingPOST()">
其中用戶填寫的數(shù)據(jù)統(tǒng)一用函數(shù)createQueryString()編寫，需要時予以調(diào)運，代碼如下
復(fù)制代碼 代碼如下:
function crrateQueryString() {
var firstName = document.getElementById("firstName").value;
var birthday = document.getElementById("birthday").value;
var queryString = "firstName=" + firstName + "birthday=" + birthday;
return queryString;
}
服務(wù)器接收到請求數(shù)據(jù)后根據(jù)不同的時刻返回相應(yīng)的文本，客戶端接收到文本后顯示在相應(yīng)的div快中，代碼如下
復(fù)制代碼 代碼如下:
function handleStateChange() {
if (xmlHttp.readyState == 4 xmlHttp.state == 200) {
var responseDiv = document.getElementById("serverResponse");
responseDiv.innerHTML = xmlHttp.responseText;
}
}
GET和POST各建立自己的函數(shù)doRequestUsingGET()和doRequestUsingPOST()。
完整代碼如下：
復(fù)制代碼 代碼如下:
script type="text/javascript">
var xmlHttp;
function createXMLHttpRequest() {
if (window.ActiveXObject)
xmlHttp = new ActiveXObject("Microsoft.XMLHttp");
else if (window.XMLHttpRequest)
xmlHttp = new XMLHttpRequest();
}
function createQueryString() {
var firstName = document.getElementById("firstName").value;
var birthday = document.getElementById("birthday").value;
var queryString = "firstName=" + firstName + "birthday=" + birthday;
return encodeURI(encodeURI(queryString)); //兩次編碼解決中文亂碼問題
}
function doRequestUsingGET() {
createXMLHttpRequest();
var queryString = "1-3.aspx?";
queryString += createQueryString() + "timestamp=" + new Date().getTime();
xmlHttp.onreadystatechange = handleStateChange;
xmlHttp.open("GET", queryString);
xmlHttp.send(null);
}
function doRequestUsingPOST() {
createXMLHttpRequest();
var url = "1-3.aspx?timestamp=" + new Date().getTime();
var queryString = createQueryString();
xmlHttp.open("POST", url);
xmlHttp.onreadystatechange = handleStateChange;
xmlHttp.setRequestHeader("Content-Type", "application/x-www-form-urlencoded");
xmlHttp.send(queryString);
}
function handleStateChange() {
if (xmlHttp.readyState == 4 xmlHttp.status == 200) {
var responseDiv = document.getElementById("serverResponse");
responseDiv.innerHTML = decodeURI(xmlHttp.responseText); //解碼
}
}
/script>
form>
input type="text" id="firstName" />
br>
input type="text" id="birthday" />
/form>
form>
input type="button" value="GET" onclick="doRequestUsingGET();" />
br>
input type="button" value="POST" onclick="doRequestUsingPOST();" />
/form>
div id="serverResponse">/div>
服務(wù)器端主要是根據(jù)用戶輸入以及請求的類型返回不同的字符串
復(fù)制代碼 代碼如下:
%@ Page Language="C#" ContentType="text/html" ResponseEncoding="gb2312" %>
%@ Import Namespace="System.Data" %>
%
if(Request.HttpMethod == "POST")
Response.Write("POST: " + Request["firstName"] + ", your birthday is " + Request["birthday"]);
else if(Request.HttpMethod == "GET")
Response.Write("GET: " + Request["firstName"] + ", your birthday is " + Request["birthday"]);
%>
從以上代碼看出POST和GET都發(fā)送了數(shù)據(jù)異步請求，通常在數(shù)據(jù)不多的時候使用GET，在數(shù)據(jù)較多的時候使用POST。
在使用PSOT發(fā)送中文字符時，post接收會亂碼，使用GET發(fā)送中文字符正常。這是因為異步對象xmlHttp在處理返回的responseText的時候，是按照UTF-8編碼的。
通常的解決辦法是escape()對發(fā)送的數(shù)據(jù)進行編碼，然后在返回的responseText再使用unescape()進行解碼。然而在javascript編程中通常不推薦escape()和unescape()。而推薦使用encodeURI()和decodeURI()。這里要正常運行，必須對發(fā)送的數(shù)據(jù)進行兩次encodeURI()編碼。
代碼如下
復(fù)制代碼 代碼如下:
function createQueryString(){
var firstName =document.getElementById("firstName").value;
var birthday =document.getElementById("birthday").value;
var queryString = "firstName="+firstName +"birthday="+birthday;
return encodeURI(encodeURI(queryString)); //兩次編碼解決中文亂碼問題
}
而且在返回數(shù)據(jù)responeText時再進行一次解碼，代碼如下
復(fù)制代碼 代碼如下:
function handleStateChange(){
if(xmlHttp.readyState==4xmlHttp.status ==200){
var responeDiv =document.getElementById(serverResponse);
responeDiv.innerHTML = decodeURI(XMLHttp.responseText);//編碼
}
}
這樣POST模式下也能使用中文了。
3.服務(wù)器返回xml
XML是一種可擴展標(biāo)記語言(Extensible Markup Language)，它是一種可自定義標(biāo)記的語言，用來克服html局限，按照實際功能來看，xml主要用于數(shù)據(jù)存儲。
在ajax中，服務(wù)器如果返回XML，可通過異步對象的responseXML屬性來獲取，開發(fā)者可以利用DOM的作用方法進行處理。
假設(shè)服務(wù)器返回
復(fù)制代碼 代碼如下:
?xml version="1.0" encoding="gb2312"?>
list>
caption>Member List/caption>
member>
name>isaac/name>
class>W13/class>
birth>Jun 24th/birth>
constell>Cancer/constell>
mobile>1118159/mobile>
/member>
member>
name>fresheggs/name>
class>W610/class>
birth>Nov 5th/birth>
constell>Scorpio/constell>
mobile>1038818/mobile>
/member>
member>
name>girlwing/name>
class>W210/class>
birth>Sep 16th/birth>
constell>Virgo/constell>
mobile>1307994/mobile>
/member>
member>
name>tastestory/name>
class>W15/class>
birth>Nov 29th/birth>
constell>Sagittarius/constell>
mobile>1095245/mobile>
/member>
member>
name>lovehate/name>
class>W47/class>
birth>Sep 5th/birth>
constell>Virgo/constell>
mobile>6098017/mobile>
/member>
member>
name>slepox/name>
class>W19/class>
birth>Nov 18th/birth>
constell>Scorpio/constell>
mobile>0658635/mobile>
/member>
member>
name>smartlau/name>
class>W19/class>
birth>Dec 30th/birth>
constell>Capricorn/constell>
mobile>0006621/mobile>
/member>
member>
name>tuonene/name>
class>W210/class>
birth>Nov 26th/birth>
constell>Sagittarius/constell>
mobile>0091704/mobile>
/member>
member>
name>dovecho/name>
class>W19/class>
birth>Dec 9th/birth>
constell>Sagittarius/constell>
mobile>1892013/mobile>
/member>
member>
name>shanghen/name>
class>W42/class>
birth>May 24th/birth>
constell>Gemini/constell>
mobile>1544254/mobile>
/member>
member>
name>venessawj/name>
class>W45/class>
birth>Apr 1st/birth>
constell>Aries/constell>
mobile>1523753/mobile>
/member>
member>
name>lightyear/name>
class>W311/class>
birth>Mar 23th/birth>
constell>Aries/constell>
mobile>1002908/mobile>
/member>
/list>
下面利用異步對象獲取該XML，并將所有的項都羅列在表格中，初始化對象的方法與獲取文本完全相同，代碼如下：
復(fù)制代碼 代碼如下:
var xmlHttp;
function createXMLHttpRequest() {
if (window.ActiveXObject)
xmlHttp = new ActiveXObject("Mincrosoft,XMLHttp");
else if (window.XMLHttpRequest)
xmlHttp = new XMLHttpRequest();
}
當(dāng)用戶單擊按鈕時發(fā)生異步請求，并獲取responseXML對象，代碼如下
復(fù)制代碼 代碼如下:
function getXML(addressXML) {
var sUrl = addressXML + "?timestamp=" + new Date();
createXMLHttpRequest();
xmlHttp.onRecorderStateChange = handleStateChange;
xmlHttp.open("GET", url);
xml.send(null);
}
function handleStateChange() {
if (xmHttp, readyState == 4 xmlHttp.status == 200)
DrawTable(xmlHttp.responseXML); //responseXML獲取到xml文檔
}
其中DrawTable()為后勤處理XML的函數(shù)，將服務(wù)器返回的XML對象responseXML直接作為參數(shù)傳遞,HTML部分如下：
復(fù)制代碼 代碼如下:
input type="button" value="獲取XML" onclick="getXML('1-4.xml');">br>br>
table class="datalist" summary="list of members in EE Studay" id="member">
tr>
th scope="col">Name/th>
th scope="col">Class/th>
th scope="col">Birthday/th>
th scope="col">Constellation/th>
th scope="col">Mobile/th>
/tr>
/table>
當(dāng)用戶單擊按鈕時出發(fā)getXML()，并將xml地址1-4.xml作為參數(shù)傳入
而函數(shù)DrawTable()的任務(wù)就是把XML中的數(shù)據(jù)拆分，并重新組裝到表格"member"中，代碼如下：可以看到處理XML的方法與DOM處理HTML完全相同
復(fù)制代碼 代碼如下:
function DrawTable(myXML) {
//用DOM方法操作XML文檔
var oMembers = myXML.getElementsByTagName("member");
var oMember = "",
sName = "",
sClass = "",
sBirth = "",
sConstell = "",
sMobile = "";
for (var i = 0; i oMembers.length; i++) {
oMember = oMembers[i];
sName = oMember.getElementsByTagName("name")[0].firstChild.nodeValue;
sClass = oMember.getElementsByTagName("class")[0].firstChild.nodeValue;
sBirth = oMember.getElementsByTagName("birth")[0].firstChild.nodeValue;
sConstell = oMember.getElementsByTagName("constell")[0].firstChild.nodeValue;
sMobile = oMember.getElementsByTagName("mobile")[0].firstChild.nodeValue;
//添加一行
addTableRow(sName, sClass, sBirth, sConstell, sMobile);
}
}
其中addTableRow()函數(shù)將拆分出來的每一組XML數(shù)據(jù)組裝成表格table>的一行，添加到頁面中。代碼如下：
復(fù)制代碼 代碼如下:
function addTableRow(sName, sClass, sBirth, sConstell, sMobile) {
//表格添加一行的相關(guān)操作
var oTable = document.getElementById("member");
var oTr = oTable.insertRow(oTable.rows.length);
var aText = new Array();
aText[0] = document.createTextNode(sName);
aText[1] = document.createTextNode(sClass);
aText[2] = document.createTextNode(sBirth);
aText[3] = document.createTextNode(sConstell);
aText[4] = document.createTextNode(sMobile);
for (var i = 0; i aText.length; i++) {
var oTd = oTr.insertCell(i);
oTd.appendChild(aText[i]);
}
}
網(wǎng)站中實際返回xml的工作通常是由asp.net jsp php等服務(wù)器腳本動態(tài)生成的，換句話說,xmlHttp.open()中的URL地址仍然.aspx等動態(tài)頁面的后綴，它們返回的XML是用戶請求生成的。
4.處理多個異步請求
而實際頁面中往往不止一個異步請求，比如在一個表單中，很多單元格都需要發(fā)生異步請求來驗證，再加上網(wǎng)速的影響，第一個異步請求尚未完成，很可能就已經(jīng)被第2個請求覆蓋。
頁面內(nèi)容不做多介紹，我們發(fā)現(xiàn)，發(fā)送的第一個請求沒有響應(yīng)，因為它被第二個請求覆蓋了。
通常解決的辦法是將xmlHttp對象作為局部變量來處理，并且在收到服務(wù)器返回值后手動將其刪除。如下所示：
復(fù)制代碼 代碼如下:
function getData(oServer, oText, oSpan) {
var xmlHttp; //處理為局部變量
if (window.ActiveXObject)
xmlHttp = new ActiveXObject("Microsoft.XMLHttp");
else if (window.XMLHttpRequest)
xmlHttp = new XMLHttpRequest();
var queryString = oServer + "?";
queryString += createQueryString(oText) + "timestamp=" + new Date().getTime();
xmlHttp.onreadystatechange = function() {
if (xmlHttp.readyState == 4 xmlHttp.status == 200) {
var responseSpan = document.getElementById(oSpan);
responseSpan.innerHTML = xmlHttp.responseText;
delete xmlHttp; //收到返回結(jié)構(gòu)后手動刪除
xmlHttp = null;
}
}
xmlHttp.open("GET", queryString);
xmlHttp.send(null);
}
以上就是本文的全部內(nèi)容了，雖然有點長，但是還是希望小伙伴們能夠好好的讀一讀，這對于學(xué)好ajax非常重要，希望大家能夠喜歡。
您可能感興趣的文章:- Javascript 基礎(chǔ)---Ajax入門必看
- 使用jQuery處理AJAX請求的基礎(chǔ)學(xué)習(xí)教程
- Jquery ajax基礎(chǔ)教程
- ajax跨域(基礎(chǔ)域名相同)表單提交的方法
- JQuery的ajax基礎(chǔ)上的超強GridView展示
- ajax 入門基礎(chǔ)之 XMLHttpRequest對象總結(jié)
- Ajax+PHP簡單基礎(chǔ)入門實例教程
- AJAX技術(shù)基礎(chǔ)介紹
- Ajax.基礎(chǔ)教程 電子書版 提供下載
- Ajax基礎(chǔ)知識詳解
