Ajax日记

简要讲Ajax 的内容归纳为博客。

AJAX能且仅能从服务器上读取文件，我们使用ajax的时候分为以下几个步骤：

1、创建ajax对象

2、链接服务器

3、发送请求

4、接收返回值

下面是详细实现过程

 1 <!DOCTYPE>
 2 <html>
 3     <head>
 4         <meta charset = "utf-8" />
 5         <title>ajax</title>
 6         <script type="text/javascript">
 7         window.onload = function(){
 8             var obtn1 = document.getElementById('btn1');
 9             obtn1.onclick = function(){
10                 //1、创建ajax对象
11                 //var oAjax = new XMLHttpRequest();//非IE6
12                 //var oAjax = new ActiveXObject("Microsoft.XMLHTTP");//IE6
13                 //兼容写法
14                 var oAjax = null;
15                 if(window.XMLHttpRequest){
16                     oAjax = new XMLHttpRequest();
17                 }
18                 else{
19                     oAjax = new ActiveXObject("Microsoft.XMLHTTP");
20                 }
21                 //2、链接服务器
22                 //open（方法，url，是否异步）
23                 //同步：一件件事情做。异步：多件事情一起做。
24                 oAjax.open("GET","like.txt",true);
25                 //3、发送请求
26                 oAjax.send();
27                 //4、接收请求 onreadystatechange 查看进度的事件 当oAjax.readyState == 4表示已经完成，而当oAjax.status == 200时，表示接收数据成功 
28                 oAjax.onreadystatechange = function(){
29                     if(oAjax.readyState == 4){
30                         if(oAjax.status == 200){
31                             alert("成功"+oAjax.responseText);
32                         }
33                         else{
34                             alert("失败");
35                         }
36                     }
37                 }
38             }
39         }
40         </script>
41     </head>
42     <body>
43         <input id="btn1" type="button" value="读取文件" />
44     </body>
45 </html>

以上过程分四步在服务器上读取了like.txt中的文件

同样的方法可以读取josn文件和XML文件

下面是将以上内容封装为函数的代码，可以直接用

 1 function ajax(url,fnSucess,fnFaild){
 2                 //1、创建ajax对象
 3                 //var oAjax = new XMLHttpRequest();//非IE6
 4                 //var oAjax = new ActiveXObject("Microsoft.XMLHTTP");//IE6
 5                 //兼容写法
 6                 var oAjax = null;
 7                 if(window.XMLHttpRequest){
 8                     oAjax = new XMLHttpRequest();
 9                 }
10                 else{
11                     oAjax = new ActiveXObject("Microsoft.XMLHTTP");
12                 }
13                 //2、链接服务器
14                 //open（方法，url，是否异步）
15                 //同步：一件件事情做。异步：多件事情一起做。
16                 oAjax.open("GET",url,true);
17                 //3、发送请求
18                 oAjax.send();
19                 //4、接收请求 onreadystatechange 查看进度的事件 当oAjax.readyState == 4表示已经完成，而当oAjax.status == 200时，表示接收数据成功 
20                 oAjax.onreadystatechange = function(){
21                     if(oAjax.readyState == 4){
22                         if(oAjax.status == 200){
23                             alert("成功"+oAjax.responseText);
24                             fnSucess(oAjax.responseText);
25                         }
26                         else{
27                             fnFaild();
28                         }
29                     }
30                 }
31             }

函数接收三个参数：第一个参数为url，请求的服务器地址。第二个参数为fnSucess函数，当请求并接收数据成功的时候执行该函数，该函数接收一个参数，该参数为接收的文件字符串。第三个参数为fnFaild（）函数，当请求数据失败的时候，执行该函数。

整个Ajax说的神神叨叨，其实也就用这么点东西。