七、AJAX開發
到這里，已經可以清楚的知道AJAX是什么，AJAX能做什么，AJAX什么地方不好。如果你覺得AJAX真的能給你的開發工作帶來改進的話，那么繼續看看怎么使用AJAX吧。
IE5.0開始，開發人員可以在Web頁面內部使用XMLHTTP ActiveX組件擴展自身的功能，不用從當前的Web頁面導航就可以直接傳輸數據到服務器或者從服務器接收數據。,Mozilla1.0以及NetScape7則是創建繼承XML的代理類XMLHttpRequest；對于大多數情況，XMLHttpRequest對象和XMLHTTP組件很相似，方法和屬性類似，只是部分屬性不同。
XMLHttpRequest對象初始化：<script language=”javascript”>var http_request = false;//IE瀏覽器http_request = new ActiveXObject("Msxml2.XMLHTTP");http_request = new ActiveXObject("Microsoft.XMLHTTP");//Mozilla瀏覽器http_request = new XMLHttpRequest();</script>XMLHttpRequest對象的方法：
方法描述
abort()
停止當前請求
getAllResponseHeaders()
作為字符串返回完整的headers
getResponseHeader("headerLabel")
作為字符串返回單個的header標簽
open("method","URL"[,asyncFlag[,"userName"[, "password"]]])設置未決的請求的目標 URL，方法，和其他參數
send(content)發送請求
setRequestHeader("label", "value")設置header并和請求一起發送
XMLHttpRequest對象的屬性：
屬性描述
onreadystatechange狀態改變的事件觸發器
readyState對象狀態(integer):
0 = 未初始化
1 = 讀取中
2 = 已讀取
3 = 交互中
4 = 完成
responseText服務器進程返回數據的文本版本
responseXML服務器進程返回數據的兼容DOM的XML文檔對象
status服務器返回的狀態碼, 如：404 = "文件未找到" 、200 ="成功"
statusText服務器返回的狀態文本信息
有些版本的Mozilla瀏覽器處理服務器返回的未包含XML mime-type頭部信息的內容時會出錯。因此，要確保返回的內容包含text/xml信息。
http_request = new XMLHttpRequest();http_request.overrideMimeType('text/xml');B、指定響應處理函數需要指出的時，這個函數名稱不加括號，不指定參數。也可以用Javascript即時定義函數的方式定義響應函數。比如：
http_request.onreadystatechange = function() { };
C、發出HTTP請求指定響應處理函數之后，就可以向服務器發出HTTP請求了。這一步調用XMLHttpRequest對象的open和send方法。
http_request.open('GET', 'http://www.example.org/some.file', true);http_request.send(null);open的第一個參數是HTTP請求的方法，為Get、Post或者Head。
open的第二個參數是目標URL?；诎踩紤]，這個URL只能是同網域的，否則會提示“沒有權限”的錯誤。這個URL可以是任何的URL，包括需要服務器解釋執行的頁面，不僅僅是靜態頁面。目標URL處理請求XMLHttpRequest請求則跟處理普通的HTTP請求一樣，比如JSP可以用request.getParameter(“”)或者request.getAttribute(“”)來取得URL參數值。
open的第三個參數只是指定在等待服務器返回信息的時間內是否繼續執行下面的代碼。如果為True，則不會繼續執行，直到服務器返回信息。默認為True。
按照順序，open調用完畢之后要調用send方法。send的參數如果是以Post方式發出的話，可以是任何想傳給服務器的內容。不過，跟form一樣，如果要傳文件或者Post內容給服務器，必須先調用setRequestHeader方法，修改MIME類別。如下：
http_request.setRequestHeader(“Content-Type”,”application/x-www-form-urlencoded”);這時資料則以查詢字符串的形式列出，作為sned的參數，例如：
name=value&anothername=othervalue&so=onD、處理服務器返回的信息首先，它要檢查XMLHttpRequest對象的readyState值，判斷請求目前的狀態。參照前文的屬性表可以知道，readyState值為4的時候，代表服務器已經傳回所有的信息，可以開始處理信息并更新頁面內容了。如下：
if (http_request.readyState == 4) {// 信息已經返回，可以開始處理} else {// 信息還沒有返回，等待}服務器返回信息后，還需要判斷返回的HTTP狀態碼，確定返回的頁面沒有錯誤。所有的狀態碼都可以在W3C的官方網站上查到。其中，200代表頁面正常。
if (http_request.status == 200) {// 頁面正常，可以開始處理信息} else {// 頁面有問題} XMLHttpRequest對成功返回的信息有兩種處理方式：
responseText：將傳回的信息當字符串使用；
responseXML：將傳回的信息當XML文檔使用，可以用DOM處理。
在<body></body>之間增加一段form表單代碼：
<form action="" method="post">在開發框架的基礎上再增加一個調用函數：
function userCheck() {var f = document.form1;var username = f.username.value;if(username=="") {window.alert("用戶名不能為空。");f.username.focus();return false;}else {send_request('sample1_2.jsp?username='+username);}}看看sample1_2.jsp做了什么：
<%@ page contentType="text/html; charset=gb2312" errorPage="" %><%String username = request.getParameter("username");if("educhina".equals(username)) out.print("用戶名已經被注冊，請更換一個用戶名。");else out.print("用戶名尚未被使用，您可以繼續。");%>運行一下，嗯，沒有彈出窗口，沒有頁面刷新，跟預想的效果一樣。如果需要的話，可以在sample1_2.jsp中實現更復雜的功能。最后，只要將反饋信息打印出來就可以了。
首先，在<body></body>中間增加如下HTML代碼：
<table cellspacing="0" cellpadding="0"><tr><td><a href="javascript:void(0)">經理室</a></td></tr><tr><td> </td></tr><tr><td><a href="javascript:void(0)">開發部</a></td></tr><tr><td> </td></tr></table>在框架的基礎上增加一個響應函數showRoles(obj)：
//顯示部門下的崗位function showRoles(obj) {document.getElementById(obj).parentNode.style.display = "";document.getElementById(obj).innerHTML = "正在讀取數據..."currentPos = obj;send_request("sample2_2.jsp?playPos="+obj);}修改框架的processRequest函數：
// 處理返回信息的函數function processRequest() {if (http_request.readyState == 4) { // 判斷對象狀態if (http_request.status == 200) { // 信息已經成功返回，開始處理信息document.getElementById(currentPos).innerHTML = http_request.responseText;} else { //頁面不正常alert("您所請求的頁面有異常。");}}}最后就是smaple2_2.jsp了：
<%@ page contentType="text/html; charset=gb2312" errorPage="" %>運行一下看看效果：
7.4、文檔對象模型（DOM）當前1/3頁
新聞熱點
疑難解答
圖片精選
