AJAX入门实例

1、什么是 AJAX ？

AJAX = 异步 JavaScript 和 XML。

AJAX 是一种用于创建快速动态网页的技术。

通过在后台与服务器进行少量数据交换，AJAX 可以使网页实现异步更新。这意味着可以在不重新加载整个网页的情况下，对网页的某部分进行更新。

传统的网页（不使用 AJAX）如果需要更新内容，必需重载整个网页面。

有很多使用 AJAX 的应用程序案例：新浪微博、Google 地图、开心网等等。

 

2、实例

//webDemo/ajax/ajaxtest1.html

<html>
<head>
<script type="text/javascript">
function loadXMLDoc()
{
    var xmlhttp;
    if (window.XMLHttpRequest)
      {// code for IE7+, Firefox, Chrome, Opera, Safari
      xmlhttp=new XMLHttpRequest();
      }
    else
      {// code for IE6, IE5
      xmlhttp=new ActiveXObject("Microsoft.XMLHTTP");
      }
    xmlhttp.onreadystatechange=function()
      {
      if (xmlhttp.readyState==4 && xmlhttp.status==200)
        {
        document.getElementById("myDiv").innerHTML=xmlhttp.responseText;
        }
      }
    xmlhttp.open("GET","/webDemo/ajax/demo_ajax.html",true);
    xmlhttp.send();
    alert("异步模式，不用等待服务器响应就直接执行");
}
</script>
</head>
<body>

<h2>AJAX</h2>
<button type="button" onclick="loadXMLDoc()">请求数据</button>
<div id="myDiv"></div>

</body>
</html>

//webDemo/ajax/demo_ajax.html

<html>
<body>
<p>ajax 异步请求结果</p>
</body>
</html>

 

点击前：

 

 

点击后：

 

 

3、onreadystatechange 事件

当请求被发送到服务器时，我们需要执行一些基于响应的任务。

每当 readyState 改变时，就会触发 onreadystatechange 事件。

readyState 属性存有 XMLHttpRequest 的状态信息。

下面是 XMLHttpRequest 对象的三个重要的属性：

属性描述
onreadystatechange 存储函数（或函数名），每当 readyState 属性改变时，就会调用该函数。
readyState

存有 XMLHttpRequest 的状态。从 0 到 4 发生变化。

  • 0: 请求未初始化
  • 1: 服务器连接已建立
  • 2: 请求已接收
  • 3: 请求处理中
  • 4: 请求已完成，且响应已就绪
status

200: "OK"

404: 未找到页面

在 onreadystatechange 事件中，我们规定当服务器响应已做好被处理的准备时所执行的任务。

 

4、使用 Callback 函数

callback 函数是一种以参数形式传递给另一个函数的函数。

如果您的网站上存在多个 AJAX 任务，那么您应该为创建 XMLHttpRequest 对象编写一个标准的函数，并为每个 AJAX 任务调用该函数。

该函数调用应该包含 URL 以及发生 onreadystatechange 事件时执行的任务（每次调用可能不尽相同）：

//方式1——较好理解

 

 1 <html>
 2 <head>
 3 <script type="text/javascript">
 4 var xmlhttp;
 5 function loadXMLDoc()
 6 {
 7     if (window.XMLHttpRequest)
 8       {// code for IE7+, Firefox, Chrome, Opera, Safari
 9       xmlhttp=new XMLHttpRequest();
10       }
11     else
12       {// code for IE6, IE5
13       xmlhttp=new ActiveXObject("Microsoft.XMLHTTP");
14       }
15     xmlhttp.onreadystatechange=callbackFunc;
16     xmlhttp.open("GET","/webDemo/ajax/demo_ajax.html",true);
17     xmlhttp.send();
18     alert("异步模式，不用等待服务器响应就直接执行");
19 }
20 
21 function callbackFunc()
22 {
23     if (xmlhttp.readyState==4 && xmlhttp.status==200)
24     {
25         document.getElementById("myDiv").innerHTML=xmlhttp.responseText;
26     }
27 }
28 </script>
29 </head>
30 <body>
31 
32 <h2>AJAX</h2>
33 <button type="button" onclick="loadXMLDoc()">请求数据</button>
34 <div id="myDiv"></div>
35 
36 
37 </body>
38 </html>

 

 

 

//方式2

 

 1 <html>
 2 <head>
 3 <script type="text/javascript">
 4 var xmlhttp;
 5 function loadXMLDoc(url, callbackFunc)
 6 {
 7     if (window.XMLHttpRequest)
 8       {// code for IE7+, Firefox, Chrome, Opera, Safari
 9       xmlhttp=new XMLHttpRequest();
10       }
11     else
12       {// code for IE6, IE5
13       xmlhttp=new ActiveXObject("Microsoft.XMLHTTP");
14       }
15     xmlhttp.onreadystatechange=callbackFunc;
16     xmlhttp.open("GET",url,true);
17     xmlhttp.send();
18     alert("异步模式，不用等待服务器响应就直接执行");
19 }
20 
21 function myFunction()
22 {
23 loadXMLDoc("/webDemo/ajax/demo_ajax.html",function()
24   {
25   if (xmlhttp.readyState==4 && xmlhttp.status==200)
26     {
27     document.getElementById("myDiv").innerHTML=xmlhttp.responseText;
28     }
29   });
30 }
31 
32 </script>
33 </head>
34 <body>
35 
36 <h2>AJAX</h2>
37 <button type="button" onclick="myFunction()">请求数据</button>
38 <div id="myDiv"></div>
39 
40 </body>
41 </html>

 

 

 

下一篇会用Chrome自带的功能进行调试，理解同步、异步调用。

 

现在，记住Ajax如何首先处于异步处理状态？当你发送HTTP请求，你不希望浏览器挂起并等待服务器的响应，取而代之的是，你希望通过页面继续响应用户的界面交互，并在服务器响应真正到达后处理它们。要完成它，你可以向XMLHttpRequest注册一个回调函数，并异步地派发XMLHttpRequest请求。控制权马上就被返回到浏览器，当服务器响应到达时，回调函数将会被调用。

http://hi.baidu.com/gfoshizwxbgjpye/item/474430c0a04c99c4994aa05c

http://www.cnblogs.com/liyuyang/articles/1310716.html

http://www.cnblogs.com/sandybeach/archive/2009/05/01/1447560.html

http://mrthink.net/ajax-starter-xmlhttpreq/

posted on 2013-08-27 10:28  gogoy  阅读(213)  评论(0)  编辑  收藏  举报

导航