本想翻譯IBM的一篇文章 Build apps using Asynchronous JavaScript with XML 但是發現不如就按照那個方式想怎么寫就怎么寫。之后有時間了會把其中的一個系列從基本應用到使用DWR框架的翻出來，也許對一些被AJAX buzz word一直騷擾但是沒親密接觸的人有些用處。嗯，把dojo也列入計劃吧，但愿我能堅持。
由于JAVA版 servlet+web.xml配置起來稍顯麻煩，而且此處主要介紹前端javascript，并且是入門文章，所以來個PHP版本，算是IBM意譯PHP Ver.我會把code workthrough伴隨在講解當中。
AJAX是asynchronous javascript and xml的簡稱。異步是通過由XMLHttpRequest對象替代傳統頁面刷新式請求來實現，異步的目的是提供更加連續的 友好的用戶交互。我想大多數人都討厭等待瀏覽器的processBar藍色慢慢變長的無聊過程和枯燥的白色無響應頁面。
那組成AJAX的幾項關鍵技術 javascript css DOM XMLHttpRequest，可能只有XMLHttpRequest對我們來說是相對來說陌生的，前3項，只要做過web app的都不可以說不了解。
XMLHttpRequest：XMLHttpRequest是一個可以讓用戶不刷新頁面的前提下直接提交和得到xml數據的對象。
這并不是一個xx組織的標準產生物，所以要得到一個這樣的對象，是通過不同瀏覽器的擴展來實現。IE通過ActiveX Object來提供，所以大多數ajax應用會看到對象的產生過程都有對瀏覽器的判斷以達到兼容。不要開始大罵MS,平臺給我們帶來的麻煩并非都是微軟造成。對于此對象，我不是個歷史學家，所以只能稍微查找些資料來了解。
It is not yet being embodied in any public standard (although something similar is in the works for the proposed W3C DOM Level 3 Load and Save spec)from XML.COM所以它不是一個標準而微軟不去執行的例子。
Microsoft first implemented the XMLHttpRequest object in Internet Explorer 5 for Windows as an ActiveX object. Engineers on the Mozilla project implemented a compatible native version for Mozilla 1.0 (and Netscape 7). Apple has done the same starting with Safari 1.2. from apple.com
所以，可以感謝一下微軟，還是做了些創新的，估計是為了他的EXChangeServer的web client端服務的……我猜我猜。
Similar functionality is covered in a proposed W3C standard, Document Object Model (DOM) Level 3 Load and Save Specification. In the meantime, growing support for the XMLHttpRequest object means that is has become a de facto standard that will likely be supported even after the W3C specification becomes final and starts being implemented in released browsers (whenever that might be).from apple.com
所以我們還是要通過如下代碼方式創建一個對象：
function init() 
{
if (window.XMLHttpRequest) {
req = new XMLHttpRequest();
} else if (window.ActiveXObject) {
window.alert("ActiveXObject");
req = new ActiveXObject("Microsoft.XMLHTTP");
}
var url = "server.php";
req.open("POST", url, true);
req.setRequestHeader("Content-Type","application/x-www-form-urlencoded");
}
通過對不同瀏覽器的判斷，產生不同的對象。我想大至大家了解了此對象用處，http請求也是在一些標準協議中定義的header之后以名稱，值對的方式來向服務器發送，作為xml天生對數據良好描述的本領，擔任此任務小case，但是對于文件上穿等，還是用傳統form來解決滴吧。
備考：Table 1. Common XMLHttpRequest Object Methods
|
|
|
Method |
Description |
|
abort() |
Stops the current request |
|
getAllResponseHeaders() |
Returns complete set of headers (labels and values) as a string |
|
getResponseHeader("headerLabel") |
Returns the string value of a single header label |
|
open("method", "URL"[, asyncFlag[, "userName"[, "password"]]]) |
Assigns destination URL, method, and other optional attributes of a pending request |
|
send(content) |
Transmits the request, optionally with postable string or DOM object data |
|
setRequestHeader("label", "value") |
Assigns a label/value pair to the header to be sent with a request |
好了，廢話講完了，開始菜鳥級別的親密接觸。我想ajax是有應用場景的，那么我舉個我感覺很貼切的應用場景，在論壇注冊的時候，驗證是否已經存在你要注冊的用戶名。在沒有ajax之前，我們都要單獨點一個button，彈出新窗口等待結果。這里面我們使用戶輸入完了用戶名之后，不影響其正常填寫其他內容，神不知鬼不覺地完成驗證并提醒客戶是否已經有人注冊了。
首先構建一個注冊畫面 regForm.php
<html>
<head>
<script type="text/javascript" src="ajax.js" >
</script>
</head>
<body>
<font face="Arial,Helvetica,Verdana" size="3">
<form name="regForm" action="reg.php">
<b>Enter Your User ID: </b>
<input type="text" name="userID" onblur="validate(this.form)"/>
<!--Message -->
<span id="msg"></span>
<br/>
<input type=”password” name=”pwd”/>
.other input filed
<hr>
</body>
</html>
好啦，一個丑陋無比的注冊頁面搞定了。
緊接著，完成我們的ajax.js文件
var req;
var url;
定義req url全局變量 一個用來表示XMLHttpReqeust一個表示請求的服務器端資源。
function init() {
//。。。。。看上面
}
function validate(formObj) {
init();
req.onreadystatechange = userIDValidator;
req.send("userID ="+formObj.userID.value);
}
此函數便是當用戶輸入完了用戶名，自鳴得意的去輸入其他的文本域時觸發的事件，它悄悄地執行。由于在init()函數中我們如此設置req.open("POST", url, true);最后一個參數true就是異步的設置所在，如果未false,效果大家看看msn spaces的流言就知道了，葉面雖然不刷新但是要停止響應一段時間，嗯，給你點看字的機會卻不讓你滾動邊上可愛的scroll翻頁。
既然我們設置了異步處理，那么執行完了通知誰啊?通過此句req.onreadystatechange = userIDValidator;當req狀態改變的時候，執行userIDValidator。這是一個回調函數的應用，不理解啥是回調沒關系，總之req狀態改變了，就執行此函數名字的函數(你也可以寫匿名函數req.onreadystatechange=new Function{javascript真偉大}).一切就緒，向服務器發送請求。Send()方法中傳遞請求的參數。
當服務器響應了呢？那就是userIDValidator要干活的時候啦。
function userIDValidator() {
if (req.readystate == 4) {
if (req.status == 200) {
if(req.responseText!=”true”){
window.alert(“你怎么注冊別人有的用戶名啊?”);
document.getElementById(“msg”).innerHTML=”換一個換一個”;
};
}
}
}
req.readystate == 4代表請求響應完成 具體的代碼意義如下
0 = uninitialized
1 = loading
2 = loaded
3 = interactive
4 = complete
req.status == 200這個是標準的http響應狀態碼，有些時候你的ajax應用響應石沉大海，你就可以輸出這個req.status調試一下，看看是不是出現了404 202等咚咚。
待會我們看見那個極其簡單的服務器端php文件返回的text/html普通響應，所以此刻我們用req.responseText。其實稍微復雜一些的應用都要返回xml作為響應結果，然后客戶端用腳本解析xml文件再通過操作DOM來改變頁面內對象的內容或者結構等。也可以返回的xml對象通過xslt來解析，不過增加了學習的曲線。服務器端產生xml對象也是繁瑣的工程，所以出現了很多現成的框架幫助簡化開發，比如國產buffalo,洋貨DWR等，通過與前端dojo Rico等框架組合，產生強大的交互功能，一流的用戶體驗。
那么簡單的xml操作可參考ibm文章中做法：
var messageObj = req.responseXML.getElementsByTagName("message")[0];
var message = messageObj.childNodes[0].nodeValue;
if (message == "true") {
msg.innerHTML = "Subscription is valid";
document.forms[0].order.disabled = false;
} else {
msg.innerHTML = "Subscription not valid";
document.forms[0].order.disabled = true;
}
ok了，看看服務器端廬山真面目吧。
<?php
$userid = $_POST['userid'];
echo "true";
?>
我靠，太簡單了吧，你耍我呢啊？這個……我用寫全么？無非就是
<?php
echo isValide($_POST['userid']);
?>
isValide()中連接數據庫，查詢，返回結果……
ｏｋ，你已經可以神不知鬼不覺地檢查用戶名，然后突然彈出窗口提示用戶，你的名字不對。
下一教程應該是談論對象序列化和反序列化問題 之后是ＤＷＲ 之后是ｄｏｊｏ 之后是javascript的debug 之后是buffalo 之后是……之后是……