JS——Ajax原理應用（三個案例）

時間 2019-12-10

標籤 ajax 原理應用三個案例欄目 JavaScript 简体版

原文原文鏈接

案例一（請求並顯示靜態txt文件）：javascript

如上圖，首先在本地服務器wamp下的www文檔中存儲3個txt格式的文檔，用於保存等會須要調用的文檔內容（圖示1）；html

接着（圖示2）用於編寫js和網頁的代碼；java

最後（圖示3）事先準備好上一節內容本身編寫的ajax代碼。稍後須要調用。ajax

運行結果以下圖所示：json

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文件裏的內容app

運行效果以下圖所示：函數

js代碼以下：this

 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>