首先，示範一下實際啟動並執行ajax/ajax.html' target='_blank' class='l2'>效果。點擊彈出新頁面中的“See Author”連結，你將會看到該頁面作者。從頁面提交到顯示從伺服器獲得的結果，這段過程你將不會發現頁面的重重新整理。
下面給出該樣本的代碼：
1. ajax.html
1. <html>
2. <head>
3. <meta http-equiv="Content-Type" content="text/html; charset=iso-8859-1">
4. <title>A simple AJAX example</title>
5. <script type="text/javascript"><!--
6. function findAuthor(file){
7. var xmlObj = null;
8. if(window.XMLHttpRequest){
9. xmlObj = new XMLHttpRequest();
10. } else if(window.ActiveXObject){
11. xmlObj = new ActiveXObject("Microsoft.XMLHTTP");
12. } else {
13. return;
14. }
15. xmlObj.onreadystatechange = function(){
16. if(xmlObj.readyState == 4){
17. updateObj('author',
18. xmlObj.responseXML.getElementsByTagName('name')[0].firstChild.data);
19. }
20. }
21. xmlObj.open ('GET', file, true);
22. xmlObj.send ('');
23. }
24. function updateObj(obj, data){
25. var textNode = document.createTextNode(data);
26. document.getElementById(obj).appendChild(textNode);
27. }
28. //--></script>
29. </head>
30. <body>
31. <h1>A simple AJAX program</h1>
32. <p id="obj">This page is powered by <a id='link' href="data.xml"
33. title="View the author."
34. onclick="findAuthor('data.xml'); this.style.display='none'; return false">See
35. Author.</a><span id="author" style="color: olive; font-weight: bolder"></span></p>
36. </body>
37. </html>
2.data.xml
1. <?xml version="1.0" encoding="UTF-8"?>
2. <author>
3. <name>www.jsfchina.org</name>
4. </author>
解析下。
該例應該算是最簡單的ajax應用了。為了盡求簡單性，這裡沒有使用到任何伺服器端技術，諸如servlet,cgi等等。這裡並沒有使用到任何業務方法，而是直接從伺服器的一個xml文檔(data.xml)中讀取資料。為了簡潔性，本例將JavaScript檔案也整合到了ajax.html中，實際應用中完全可以獨立出去使用。
該例通過點選連結，激發了一個javascript的方法然後進行互動處理。
AJAX的核心是XMLHttpRequest，本例通過下列代碼建立這個對象
1. var xmlObj = null;
2. if(window.XMLHttpRequest){
3. xmlObj = new XMLHttpRequest();
4. } else if(window.ActiveXObject){
5. xmlObj = new ActiveXObject("Microsoft.XMLHTTP");
6. } else {
7. return;
8. }
if(window.XMLHttpRequest)處理了瀏覽器是mozilla的情況，而if (window.ActiveXObject)則處理了瀏覽器為IE的情況，目的都是一個：建立了一個XMLHttpRequest對象。建立這個對象的目的就是讓XMLHttpRequest對象與伺服器互動，而不影響使用者正在瀏覽的頁面。這也是AJAX稱謂的由來，非同步javascript互動xml 處理。
建立好XMLHttpRequest對象之後，調用的函數將會監聽該對象狀態的變化，即onreadystatechange屬性。XMLHttpRequest對象有5個狀態，從0－4的整數，也就是說onreadystatechange調用的函數（樣本中function (){...}）將會執行4次。樣本中我們在該對象處於完成狀態(readyState=4)時進行處理（此時伺服器已經傳回所有資訊），為id為 “author”的span對象添加了一個textNode節點，該textNode是data.xml文檔中name節點的第一個子項目的值。
好了，這就是完成一次非同步互動所需要的步驟。
以下是一些注意點。
第一，本例中使用的http的GET方法，你也可以使用POST，但是要設定Content-Type值，即 xmlObj.setRequestHeader("Content-Type","application/x-www-form-urlencoded")，這個方法用來設定了MIME類型。還有一點要注意，這些方法最好都大寫，否則在firefox下將沒有作用。
第二，xmlObj.open ('GET', file, true)。該方法會建立與伺服器的連結，‘GET’指明了http調用方法；file指明了調用的url；true指明了該調用是非同步處理，可以省略，預設為'true'。
第三，xmlObj.send(para)向伺服器發出請求。是以POST向伺服器發出request，其參數格式為:name=namevalue&so=on
Start building with 50+ products and up to 12 months usage for Elastic Compute Service
1 on 1 presale consultation
24/7 Technical Support 6 Free Tickets per Quarter Faster Response
Alibaba Cloud offers highly flexible support services tailored to meet your exact needs.
A comprehensive suite of global cloud computing services to power your business
Payment Methods We Support
