Ajax的理解

           初学JS，一直认为Ajax是个很高级的、不可亵玩的东西。这两天怀着忐忑的心情接触了一下它，

     感觉它并没有想象中的那么难理解。

           其实，Ajax就是浏览器端向服务器请求资源的一个对象（方法）。

           就跟打电话的过程差不多。

            先以打电话为例，我们分为四个步骤：

            1.手机

            2.拨号

            3.说话

            4.对方回话

        那么在Ajax中也是这四步：

           1.创建对象（XMLHttpRequest）

           2.连接服务器（open(方法, 文件名, 异步传输)）

           3.发送请求  （send()）

           4.接收请求并响应

        废话不多说，先上封装好的一个Ajax（命名为Ajax.js）

       

 1 function ajax(url, fnSucc, fnFaild)
 2 {
 3     //1.创建Ajax对象
 4     if(window.XMLHttpRequest)
 5     {
 6         var oAjax=new XMLHttpRequest();
 7     }
 8     else
 9     {
10         //IE6
11         var oAjax=new ActiveXObject("Microsoft.XMLHTTP");
12     }
13     
14     //2.连接服务器
15     //open(方法, 文件名, 异步传输)
16     oAjax.open('GET', url, true);
17     
18     //3.发送请求
19     oAjax.send();
20     
21     //4.接收返回
22     oAjax.onreadystatechange=function ()
23     {
24         //oAjax.readyState    //浏览器和服务器，进行到哪一步了
25         if(oAjax.readyState==4)    //读取完成
26         {
27             if(oAjax.status==200)    //成功
28             {
29                 fnSucc(oAjax.responseText);
30             }
31             else
32             {
33                 if(fnFaild)
34                 {
35                     fnFaild(oAjax.status);
36                 }
37                 //alert('失败:'+oAjax.status);
38             }
39         }
40     };
41 }


然后我们在html里面直接用它就可以了

 1 <!DOCTYPE HTML>
 2 <html>
 3 <head>
 4 <meta charset="utf-8">
 5 <title>无标题文档</title>
 6 <script src="Ajax.js"></script>
 7 <script>
 8 window.onload=function ()
 9 {
10     var oBtn=document.getElementById('btn1');
11     
12     oBtn.onclick=function ()
13     {
14         ajax('a.txt', function (str){
15             alert(str);
16         });
17     };
18 };
19 </script>
20 </head>
21 
22 <body>
23 <input id="btn1" type="button" value="读取" />
24 </body>
25 </html>

注：

在计算机上装一个服务器

http://wamp-server-wamp5.cn.uptodown.com/

将文件放在www文件夹下

访问：locahost/文件名

就可以了。

posted @ 2013-10-05 16:15  虎伢  阅读(293)  评论(2)    收藏  举报