Ajax温习

AJAX = Asynchronous JavaScript and XML（异步的 JavaScript 和 XML）。AJAX 是与服务器交换数据并更新部分网页的艺术，在不重新加载整个页面的情况下。

GET 还是 POST？

与 POST 相比，GET 更简单也更快，并且在大部分情况下都能用。

然而，在以下情况中，请使用 POST 请求：

无法使用缓存文件（更新服务器上的文件或数据库）
向服务器发送大量数据（POST 没有数据量限制）
发送包含未知字符的用户输入时，POST 比 GET 更稳定也更可靠
More

封装ajax()函数，代码如下-----注意window.XMLHttpRequest中的window不能少，否则会出错。XMLHttpRequest相当于window的一个属性

 1 // JavaScript Document
 2 function ajax(url,fnSucc,fnFailed){
 3     //1.创建对象
 4     var oAjax=null;
 5     if(window.XMLHttpRequest){
 6         oAjax=new XMLHttpRequest();    
 7     }    
 8     else{
 9         oAjax=new ActiveXObject("Microsoft.XMLHTTP");    
10     }    
11     //alert(oAjax);
12     //2.连接服务器
13     //open(请求方式，url，是否异步)
14     oAjax.open('GET',url,true)
15     //3.发送请求
16     oAjax.send();
17     //4.返回数据
18     oAjax.onreadystatechange=function(){
19         if(oAjax.readyState==4){
20             if(oAjax.status==200){
21                 //alert("victory"+oAjax.responseText);
22                 fnSucc(oAjax.responseText);
23             }    
24             else{
25                 if(fnFailed){
26                     fnFailed();    
27                 }
28             }
29         }    
30     }
31 };

ajax()函数测试版

 1 <!doctype html>
 2 <html>
 3 <head>
 4 <meta charset="utf-8">
 5 <title>无标题文档</title>
 6 <script>
 7     //用未定义的变量会出错------用未定义的属性undefined
 8     //alert(a);
 9     //alert(window.a);
10     window.onload=function(){
11         var oBtn=document.getElementById('btn');
12         oBtn.onclick=function(){
13             //1.创建对象
14             var oAjax=null;
15             if(window.XMLHttpRequest){
16                 oAjax=new XMLHttpRequest();    
17             }    
18             else{
19                 oAjax=new ActiveXObject("Microsoft.XMLHTTP");    
20             }    
21             //alert(oAjax);
22             //2.连接服务器
23             //open(请求方式，url，是否异步)
24             oAjax.open('GET','abc.txt',true)
25             //3.发送请求
26             oAjax.send();
27             //4.返回数据
28             oAjax.onreadystatechange=function(){
29                 if(oAjax.readyState==4){
30                     if(oAjax.status==200){
31                         alert("victory"+oAjax.responseText);
32                     }    
33                     else{
34                         alert("defeat!");    
35                     }
36                 }    
37             }
38         };
39     }
40     
41 </script>
42 </head>
43 
44 <body>
45 <input type="button" id="btn" value="create">
46 </body>
47 </html>

View Code

实例1-----案例的文件都在服务器端www目录下，在本地PC安装WAMP程序即可。

 1 <!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
 2 <html xmlns="http://www.w3.org/1999/xhtml">
 3 <head>
 4 <meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
 5 <title>Untitled Document</title>
 6 <script src="ajax.js"></script>
 7 <script>
 8     window.onload=function(){
 9         var oBtn=document.getElementById('btn1');
10         oBtn.onclick=function(){
11             ajax("one.txt",function(str){
12                 alert(str);
13             })
14         }
15     }
16 </script>
17 </head>
18 
19 <body>
20 <input type="button" id="btn1" value="readme">
21 </body>
22 </html>

实例2-----清除缓存。

 1 <html>
 2 <head>
 3     <title></title>
 4     <meta http-equiv="Content-Type" content="text/html; charset=utf-8"/>
 5     <style type="text/css">
 6         #div1{width:400px;height:300px;border:1px solid #333;}
 7     </style>
 8     <script src="ajax.js"></script>
 9     <script type="text/javascript">
10         window.onload=function(){
11             var oBtn=document.getElementsByTagName('input');
12             var oDiv=document.getElementById('div1');
13             for (var i = 0; i < oBtn.length; i++) {
14                 oBtn[i].index=i;
15                 oBtn[i].onclick=function(){
16                     //缓存问题,获取1970到现在的毫秒数
17                     ajax(this.index+1+'.txt?t='+new Date().getTime(),function(str){
18                         oDiv.innerHTML=str;
19                     })
20                 }
21             };
22         }
23     </script>
24 </head>
25 <body>
26 <input type="button" id="btn1"    value="button1">
27 <input type="button" id="btn2"    value="button2">
28 <input type="button" id="btn3"    value="button3">
29 <div id="div1">
30 
31 </div>
32 </body>
33 </html>

实例3-----读取文件里的数组

 1 <html>
 2 <head>
 3     <title></title>
 4     <script src="ajax.js"></script>
 5     <script type="text/javascript">
 6         window.onload=function(){
 7             var oBtn=document.getElementById('btn1');
 8             oBtn.onclick=function(){
 9                 ajax('arr.txt',function(str){
10                     var arr=eval(str);
11                     alert(arr[0]);
12                 })
13             };
14         };
15     </script>
16 </head>
17 <body>
18     读取静态数组文件
19     <input type="button" id="btn1" value="readtxt">
20 </body>
21 </html>

eval() 函数可计算某个字符串，并执行其中的的 JavaScript 代码。eval知识详解

实例4-----读取文件，实现分页

 1 <html>
 2 <head>
 3     <title></title>
 4     <script src="ajax.js"></script>
 5     <script>
 6         window.onload=function(){
 7             var oUl=document.getElementById('ul1');
 8             var a=document.getElementsByTagName('a');
 9 
10             for (var i = 0; i < a.length; i++) {
11                 a[i].index=i;
12                 a[i].onclick=function(){
13                     ajax('page'+(this.index+1)+'.txt',function(str){
14                         var arr=eval(str);
15                         
16                         oUl.innerHTML='';
17                         for (var i = 0; i < arr.length; i++) {
18                             var oLi=document.createElement('li');
19                             oLi.innerHTML='<strong>'+arr[i].user+'</strong>'+'<h6>'+arr[i].pass+'</h6>';
20                             oUl.appendChild(oLi);
21                         };
22                     })
23                 }
24             };
25         }
26     </script>
27 </head>
28 <body>
29     <ul id="ul1"></ul>
30 <a href="javascript:;">1</a>
31 <a href="javascript:;">2</a>
32 <a href="javascript:;">3</a>
33 </body>
34 </html>

念念不忘，必有回响。