Ajax全稱是Asynchronous JavaScript XML,這并不是一項新技術,而只是將一些已有的技術進行了整合,從而實現了頁面在不刷新的狀態下也可以連接服務器來更新頁面內容,也即部分刷新技術,或不完全刷新。
Ajax的核心類是XMLHttpRequest類,從IE5.0開始被支持,Ajax的處理過程大概是這個樣子的:
1.首先通過JavaScript來建立一個XMLHttpRequest類的實例;
2.通過屬性onreadystatechange來設定回調函數;
3.調用該實例的open方法:open(數據傳送方式GET/POST,服務器URL,是否異步,[用戶名],[口令]);
4.調用該實例的send方法:send(XML數據/字符串/流/無符號整數數組/null),注意如果為null,則表示不傳遞額外的數據,僅用Open方法中指定的服務器URL來進行響應即可;
5.在回調函數中先通過readyState屬性檢測異步操作的狀態:未初始化(0),正在加載(1),已加載(2),交互(3),已完成(4);
6.再在回調函數中檢測服務器返回的HTTP狀態碼status,200代表正常;
7.再在回調函數中,利用返回的數據(responseBody:返回為無符號整數數組/responseStream:返回為IStream流/responseText :返回字符串/responseXML:返回為XML格式數據。),基于DOM,使用JavaScript技術來修改文檔的結構。
總結一下:
其實,Ajax就是通過JavaScript創建XMLHttpRequest對象,再由JavaScript調用XMLHttpRequest對象的方法完成異步通信;然后,再由JavaScript通過DOM的屬性和方法,完成頁面的不完全刷新。
最后再說明一下異步:同步表示send之后需要一直等待服務器完全響應之后才能進行后續的操作,因此需要等待;而異步表示send之后立即返回,可以繼續其他的操作,而服務器一旦返回后可以自行調用回調函數來執行動作。
在ASP.NET應用中,可以先安裝一個Microsoft ASP.NET 2.0 AJAX Extensions 1.0,然后就可以使用Ajax的一些常用控件了,比如UpdatePanel,以及Timer等,但用之前不要忘記在頁面開始加一個ScriptManager;也可以再安裝AjaxControlToolkit來獲得更多的Ajax控件。
=========================
Ajax 應用程序所用到的基本技術
1.html
組成web頁面所用到的基本元素
2.javascript
javascript代碼是AJAX應用程序核心的代碼,幫助ajax程序改進與服務器通訊以實現不一樣的用戶體驗
3.Dynamic HTML
用于動態更新web頁面
4.DOM(文檔對象模型)
用于通過javascrip代碼處理HTML或服務器返回的XML
javascript與服務器端通信的最核心的對象
xmlHttp對象:傳送XML格式數據的超文本傳輸協議
實際上XMLHTTP傳輸的數據可以是XML格式數據,也可以是字符串,流,或者一個無符號整數數組。還可以是URL的參數,它下達的結果可以是XML格式數據,也可以是字符串,流,或者一個無符號整數數組。
調用步驟
1、創建XMLHTTP對象
2、打開與服務端的連接,同時定義指令發送方式,服務網頁(URL)和請求權限等。
3、發送指令。
4、等待并接收服務端返回的處理結果。
5、釋放XMLHTTP對象
方法
open(數據傳送方式(GET/POST/HEAD),服務器URL,是否異步執行,[用戶名],[口令])
如:
open("GET","http://www.sohu.com",true)
send(content)
可以是XML格式數據,也可以是字符串,流,或者一個無符號整數數組。也可以省略,讓指令通過Open方法的URL參數代入。
如:send(null);
setRequestHeader(HTTP 頭,HTTP 頭值)
如:xmlhttp.setRequestHeader("Content-Type", "application/x-www-form-urlencoded")
abort()取消當前 HTTP 請求
getAllResponseHeaders ()
從響應信息中檢索所有的HTTP 頭字段
getResponseHeader(HTTP 頭)
從響應信息正文中獲得一個 HTTP 標頭值
屬性
onreadystatechange:用以狀態改變后所要作的處理的事件句柄。
readyState 異步操作的狀態:未初始化(0),正在加載(1),已加載(2),交互(3),已完成(4)
responseBody:返回為無符號整數數組。
responseStream:返回為IStream流。
responseText :返回字符串。
responseXML:返回為XML格式數據。
status:服務器返回的HTTP狀態碼
statusText :服務器HTTP響應行狀態
說明
1.同步和異步
同步狀態下發送http請求后,只有當客戶端接收到來自服務端的全部應答數據或協議棧超時返回!反之異步狀態下,直接返回。在異步方式下數據包一旦發送完畢就結束send進程客戶端執行其他的操作,而在同步方式下客戶端要等到服務器返回確認消息后才結束send進程。實際運用中我們根據實際情況使用同步或異步,注意了如果設為同步狀態可能因為服務器返回數據量大或響應慢而導致不必要的長時間等待!
2.POST和GET
用"POST"方式發送數據.可以大到4MB "GET"只能256KB
========================================================
一個實例:
<!--Request.htm----------------------------------------------------------->
<html>
<head>
<title>Ajax應用實例</title>
<script type="text/javaScript">
var xmlHttp;
var requestType="";
function createXMLHttpRequest(){
if(window.ActiveXObject){
xmlHttp = new ActiveXObject("Microsoft.XMLHTTP");
}
else if(window.XMLHttpRequest){
xmlHttp = new XMLHttpRequest();
}
}
function startRequest(theRequestType){
requestType = theRequestType;
createXMLHttpRequest();
xmlHttp.onreadystatechange = myCallback;
xmlHttp.open("GET","Response.xml",true);
xmlHttp.send(null);
}
function myCallback(){
if(xmlHttp.readyState==4){
if(xmlHttp.status==200){
if(requestType=="all")
listAll();
else if(requestType=="north")
listNorth();
}
}
}
function listAll(){
var xmlDoc = xmlHttp.responseXML;
var allProvs = xmlDoc.getElementsByTagName("prov");
outputList("all",allProvs);
}
function listNorth(){
var xmlDoc = xmlHttp.responseXML;
var north = xmlDoc.getElementsByTagName("north")[0];
var northProvs = north.getElementsByTagname("prov");
outputList("north",northProvs);
}
function outputList(title,provs){
var out=title;
var currentProv = null;
for(var i=0;i<provs.length;i++){
currentProv = provs[i];
out = out + “<br/>” + currentProv.childNodes[0].nodeValue;
}
document.getElementById(title).innerHTML = out;
}
</script>
</head>
<body>
<h1> Ajax應用實例</h1>
<form action="#">
<input type="button" value="列出所有沿海省市"
conclick="startRequest('all'); "/>
<div id="all"></div>
<input type="button" value="列出江北沿海省市"
conclick="startRequest('north'); "/>
<div id="north"></div>
</form>
</body>
</html>
<!--Response.xml---------------------------------------------------------->
<?xml version="1.0"encoding="utf-8" ?>
<provs>
<north>
<prov>遼寧</prov><prov>河北</prov><prov>天津</prov>
<prov>山東</prov><prov>江蘇</prov>
</north>
<south>
<prov>浙江</prov><prov>福建</prov><prov>廣東</prov>
<prov>廣西</prov><prov>海南</prov><prov>上海</prov>
<prov>臺灣</prov><prov>香港</prov><prov>澳門</prov>
</south>
</provs>