ajax教程

1.同步與異步

同步：

送出請求->等待伺服器處理->處理完後傳回結果

處理過程中用戶端不能處理其它事務

發送方發出資料後，等接收方發回響應後才能發下一個資料包

異步：

請求通過事件觸發->伺服器處理->處理完畢傳回結果

伺服器處理時，用戶端可以處理其它事務

發送方發出資料後，不等接收方發回響應，接着發送下一個資料包

2.ajax

Aysnchronous JavaScript and XML異步無重新整理

應用

google搜尋提示

google地圖

注冊時使用者的驗證

核心

XmlHttpRequest對象

工作原理

用戶端->ajax->伺服器->ajax->用戶端

包含的技術

javascript

xml

css

xhtml

dom

缺點

不同浏覽器建立XmlHttpRequest對象方式不同

不會重新整理頁面，浏覽器後退失效

對于流媒體沒有flash,javaapplet好

手機,pda等還不能很好的支援

3.用戶端與伺服器端通信狀态

含義 狀态

1.正在初始化 0

2.正在打開與伺服器端的連接配接open方法調用，send方法沒調用 1

3.send方法調用 ，請求已經開始 2

4.進行中，伺服器發送響應 3

5.響應完畢，處理完成 4

4.使用者狀态碼

狀态碼 含義

404 沒找到頁面

403 禁止通路

500 伺服器内部出錯

200 一切正常

304 沒有修改

5.實作注冊業務中驗證使用者名是否被注冊

準備工作

建立jsp頁面

建立Servlet

1.建立XmlHttpRequest對象

建立方式很多，不同浏覽器的方式不同

var xmlHttpReq;

function getXmlHttpRequest() {

if (window.ActiveXObject) {//IE浏覽器建立XMLHttpRequest對象

xmlHttpReq = new ActiveXObject("MSXML2.XMLHTTP.3.0");

} else if (window.XMLHttpRequest) {

xmlHttpReq = new XMLHttpRequest();

}

2.打開與伺服器的連接配接

/*

get:送出方式

${pageContext.request.contextPath }/ays.AjaxServlet:請求路徑

true:表示是否是異步

時間戳：timeStamp+="+new Date().getTime():實作請求一直可用，不讀緩存

*/

//xmlHttpReq.open("get","${pageContext.request.contextPath }/ays.AjaxServlet?timeStamp+="+new Date().getTime()+"&name=deng",true);

3.發送請求

xmlHttpReq.send(null);

4.處理傳回結果

xmlHttpReq.onreadystatechange=executeResult;

function executeResult(){

//使用者狀态碼

if (xmlHttpReq.status == 200 && xmlHttpReq.readyState==4) {

var text = xmlHttpReq.responseText;

var objSpan = $("usermsg");

if (text == "false") {

objSpan.innerHTML="可用！";

return true;

}else{

objSpan.innerHTML="已經被使用！";

return false;

本文轉自 素顔豬 51CTO部落格，原文連結:http://blog.51cto.com/suyanzhu/1896874