要在本地測試AJAX，首先是環境的搭建，下面以wamp為例。
1、先在wamp的官網下載wamp的安裝包，網址 http://www.wampserver.com/。
2、安裝wamp。如果安裝過程中提示丟失VCRUNTIME140.DLL缺失，請看這篇文章：http://www.jb51.net/article/81595.htm。
3、安裝完wamp后，雙擊桌面上wamp的快捷方式啟動wamp。
如果wamp正常啟動，任務欄右下角有綠色的w圖標，如圖：
接下來是代碼的編寫。
在wamp安裝目錄下有一個www文件夾，用來測試的文件都保存在這個文件夾中。
下面是我的例子，效果圖是這樣的：
使用Ajax使當前價格隔一段時間自動更新一次，同時漲跌輻度也跟着更新。這個例子要創建兩個頁面，一個是前台的html頁面，用來發送請求和顯示服務器返回來的響應結果，一個是后台的php文件（我給這個文件命名price.php，代碼中要用到），用來接收請求。
首先是html頁面的html代碼:
1 <!DOCTYPE HTML> 2 <html> 3 <head> 4 <meta http-equiv="Content-Type" content="text/html; charset=utf-8" /> 5 <style type="text/css"> 6 *{ 7 margin: 0; 8 padding: 0; 9 } 10 body{ 11 font-size: 62.5%; 12 font-family: "微軟雅黑"; 13 } 14 #continer{ 15 position: absolute; 16 margin: auto; 17 top: 0; 18 bottom: 0; 19 left: 0; 20 right: 0; 21 height: 200px; 22 width: 300px; 23 background: linear-gradient(to bottom,#D87093,#FFE4E1); 24 border: 1px solid #C0C0C0; 25 border-radius: 10px; 26 padding: 1em; 27 } 28 h2{ 29 font-size: 2em; 30 font-weight: normal; 31 text-align: center; 32 margin-bottom: 0.5em; 33 } 34 p{ 35 font-size: 1.5em; 36 line-height: 1.5em; 37 } 38 </style> 39 </head> 40 <body> 41 <div id="continer"> 42 <h2>*ST橡塑(600346)股票行情</h2> 43 <p id="kaipan">開盤價格：<span id="kaipanprice"></span></p> 44 <p id="now">當前價格：<span id="nowprice"></span></p> 45 <p id="zhangdie">漲跌輻度：<span id="index"></span></p> 46 47 </div> 48 <script> 49 50 </script> 51 </body> 52 </html>
接下來是JavaScript代碼：
1 <script> 2 function $(id) { 3 return document.getElementById(id.substring(1)); 4 } 5 //在頁面加載完成時產生一個隨機的開盤價 6 function randomPrice() { 7 //產生一個隨機數 8 var num = Math.random()*20; 9 10 $('#kaipanprice').innerHTML = num.toFixed(2);//toFixed() 方法可把 Number 四舍五入為指定小數位數的數字。 11 } 12 //封裝一個創建XMLHttpRequest對象的函數，可以重復使用 13 function XMLHttp() { 14 var xmlhttp; 15 if(window.XMLHttpRequest) { 16 xmlhttp = new window.XMLHttpRequest(); 17 } else { 18 //用來兼容以前的IE瀏覽器 19 xmlhttp = new ActiveXObject('Microsoft.XMLHTTP'); 20 } 21 return xmlhttp; 22 } 23 24 //用一個全局變量保存創建的XMLHttpRequest， 25 //因為后面這個對象還要在回調函數里調用，不然的話無法在回調函數里調用 26 var xmlhttp; 27 28 //下面這個函數用來打開一個請求和發送請求 29 function priceChange() { 30 xmlhttp = XMLHttp(); 31 32 if(xmlhttp) { 33 //localhost就是wamp安裝目錄中的www文件夾，我在www文件夾下又創建了my文件夾，在my文件夾中又創建了ajax文件夾 34 var url = 'http://localhost/my/ajax/price.php'; 35 var data = 'item=nowprice'; 36 //綁定onreadystatechange事件 37 //JavaScript高級程序設計第三版上說在調用open()方法之前指定onreadystatechange事件能保證跨瀏覽器兼容性 38 xmlhttp.onreadystatechange = handle; 39 40 //用post方式打開請求，true表示異步機制 41 xmlhttp.open('post',url,true); 42 43 //用post方式發送請求必須添加下面這一句代碼，否則報錯 44 xmlhttp.setRequestHeader('Content-Type','application/x-www-form-urlencoded'); 45 46 //post方式的數據要在send()方法中發送，get方式向send()方法中傳入null，數據在url中發送 47 xmlhttp.send(data); 48 49 } 50 51 } 52 53 //指定回調函數 54 function handle() { 55 //xmlhttp.readyState=4表示服務器響應完成，並且客戶端已接受到全部響應數據，可以在客戶端使用了 56 if(xmlhttp.readyState == 4) { 57 58 //xmlhttp.status=200表示響應成功，等於304表示響應數據未發生修改可以使用瀏覽器緩存中的數據 59 //if語句的判斷條件是照抄JavaScript高級程序設計第三版上的 60 if((xmlhttp.status >= 200 && xmlhttp.status < 300) || xmlhttp.status == 304) { 61 //我這里返回的是JSON格式的字符串，用JSON對象的parse()方法把字符串轉換成一個JavaScript對象 62 var obj = JSON.parse(xmlhttp.responseText); 63 64 //獲取開盤價格 65 var kaipanjia = parseFloat($('#kaipanprice').innerHTML); 66 67 //寫入當前價格 68 $('#nowprice').innerHTML = obj.price; 69 70 //計算漲跌輻度 71 var percent = (100*(obj.price - kaipanjia)/kaipanjia).toFixed(2); 72 73 //不同的漲跌輻度使用不同的字體顏色 74 if(percent < 0){ 75 76 $('#index').style.color = "green"; 77 } 78 if(percent > 0){ 79 80 $('#index').style.color = "red"; 81 } 82 if(percent == 0){ 83 84 $('#index').style.color = "#FFFFFF"; 85 } 86 //寫入漲跌輻度 87 $('#index').innerHTML = percent + '%'; 88 } 89 } 90 91 } 92 window.onload = function() { 93 randomPrice(); 94 priceChange();
//兩秒鍾更新一次當前價格 95 updateprice = setInterval(priceChange,2000); 96 }; 97 98 </script>
JavaScript高級程序設計第三版上說，用get方式發送請求時添加到url末尾的數據必須經過encodeURIComponent()方法編碼。
關於服務器返回的數據格式主要有三種：
text格式（字符串），保存在XMLHttpRequest對象的responseText屬性中
xml格式，保存在XMLHttpRequest對象的responseXML屬性中
JSON格式，保存在XMLHttpRequest對象的responseText屬性中
下面是服務器端price.php文件的代碼：
1 <?php 2 //Content-Type指定返回的數據格式，text/xml 對應responXML，text/html對應responseText 3 header('Content-Type: text/html;charset=utf-8'); 4 5 //告訴瀏覽器不要緩存數據 6 header('Cache-Control: no-cache'); 7 8 //產生一個隨機浮點數，傳入的參數用於限制范圍 9 function randomFloat($min = 0, $max = 1) { 10 return $min + mt_rand() / mt_getrandmax() * ($max - $min); 11 } 12 $num = number_format(randomFloat(1, 20), 2, '.', ''); 13 14 //接收數據 15 $item = $_POST['item'];//請求的方式要對應，發送數據的名稱要對應 16 $info = ""; 17 if($item == 'nowprice') { 18 $info = '{"price":'.$num.'}';//返回一個JSON格式的字符串 19 } 20 echo $info;//echo的數據是返回給發送請求的頁面 21 22 ?>
代碼寫完之后，把HTML文件和php文件保存在wamp安裝目錄下www文件夾下相同的目錄下（我的是ajax文件夾），然后通過本地服務器打開html文件（比如我的是http://localhost/my/ajax/gujia.html/），每隔兩秒鍾就會看到數據的實時更新，而頁面並沒有刷新。
PS: 對於返回的xml格式的數據，可以通過操作DOM的方式獲取想要的數據，與HTML的DOM規范基本相同。