案例一（請求並顯示靜態txt文件）：
如上圖，首先在本地服務器wamp下的www文檔中存儲3個txt格式的文檔，用於保存等會需要調用的文檔內容（圖示1）；
接着（圖示2）用於編寫js和網頁的代碼；
最后（圖示3）事先准備好上一節內容自己編寫的ajax代碼。稍后需要調用。
運行結果如下圖所示：
js代碼如下：
1 <script src="ajax.js"></script> <!--調用外部事先編寫好的ajax.js文件--> 2 <script> 3 window.onload=function(){ 4 var oDiv=document.getElementById('div'); 5 var aBtn=document.getElementsByTagName('input'); 6 7 for(var i=0;i<aBtn.length;i++){ //給按鈕做循環 8 aBtn[i].index=i; 9 aBtn[i].onclick=function(){ //點擊按鈕，觸發Ajax(url,fnSucc,fnFaild)調用方法 10 Ajax((this.index+1)+'.txt',function(str){ 11 //點擊某個按鈕，對應某個文檔 把文檔中的內容添加到div中 12 oDiv.innerHTML=str; 13 }) 14 } 15 } 16 } 17 </script>
案例二（動態數據：請求json文件）：
如上圖，新增了ajax.json文件，而且等會js代碼中將會獲取json文件里的內容
運行效果如下圖所示：
js代碼如下：
1 <script src="ajax.js"></script> <!--調用外部的ajax.js文件--> 2 <script> 3 window.onload=function(){ 4 var oBtn=document.getElementById('btn'); 5 6 oBtn.onclick=function(){ //點擊按鈕，觸發Ajax(url,fnSucc,fnFaild)調用方法 7 Ajax('ajax.json',function(str){ //str里面所存儲的是字符串形式 8 var arr=eval(str); //需要用eval()方法來處理 9 alert('輸出json中第一個數組的a和b的值：'+arr[0].a+','+arr[0].b); 10 alert('輸出json中第二個數組的a和b的值：'+arr[1].a+','+arr[1].b); 11 }); 12 } 13 } 14 </script>
關於evla()方法的講解：
定義和用法：
eval() 函數計算 JavaScript 字符串，並把它作為腳本代碼來執行。
如果參數是一個表達式，eval() 函數將執行表達式。如果參數是Javascript語句，eval()將執行 Javascript 語句。
【概括：eval就是計算字符串里的值】
案例三（分頁案例）：
如上圖，備注aaa的三個文檔，分別存了user和pass的內容，Ajax.html文檔用於以分頁的形式分別輸出三個文檔中的內容
效果圖如下：
代碼如下：
1 <script src="ajax.js"></script> <!--調用外部的ajax.js文件--> 2 <script> 3 window.onload=function(){ 4 var oUl=document.getElementById('ul'); 5 var aBtn=document.getElementsByTagName('a'); 6 7 for(var i=0;i<aBtn.length;i++){ 8 aBtn[i].index=i; 9 aBtn[i].onclick=function(){ 10 Ajax('aaa'+(this.index+1)+'.txt',function(str){ 11 var arr=eval(str); //str里面所存儲的是字符串形式 12 13 oUl.innerHTML=''; //讓ul的值為空，實現分頁效果！！！（最后一步） 14 15 for(var i=0;i<arr.length;i++){ //循環arr中的內容 16 var oLi=document.createElement('li'); //創建li用於存儲循環的內容 17 oLi.innerHTML='<strong>'+arr[i].user+'</strong>'+'<i>'+arr[i].pass+'</i>'; 18 //獲取arr中的user和pass數據，並存儲在li中 19 oUl.appendChild(oLi); //把li所得到的內容加到ul中 20 } 21 }); 22 } 23 } 24 } 25 </script> 26 </head> 27 <body> 28 分頁選項 29 </br> 30 <a href="javascript:;">1</a> 31<a href="javascript:;">2</a> 32 <a href="javascript:;">3</a> 33 <ul id="ul"></ul> 34 </body>