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>