对Ajax的初步认识

julyfire 2011-08-03

展开全文

ajax是Asynchronous JavaScript and XML的缩写，中文的意思就是：异步的JavaScript和XML，以下例子通过ajax实现了在页面显示时间的功能

先添加一个网页，名称就定义为ServerTime.aspx代码如下：

 1 <!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www./TR/xhtml1/DTD/xhtml1-transitional.dtd">
 2  <html xmlns="http://www./1999/xhtml" >
 3  <head>
 4     <title>服务时间</title>
 5  </head>
 6  <body>
 7         <span id="clock">注意变化</span>
 8         <script language="javascript" type="text/javascript">
 9         //对于没有XMLHttpRequest对象的浏览器，需要构造一个
10         //该方法可写在公共js文件中，定义全局变量保存
11             if (!window.XMLHttpRequest) {
12                 window.XMLHttpRequest = function () {
13                     return new ActiveXObject("Microsoft.XMLHTTP");
14                 }
15             }
16             function UpdateClock() {
17                 var aRequest = new XMLHttpRequest();
18                 //第一个参数传输方式
19                 //第二个参数是目标的地址
20                 //第三个参数是表示是否为异步调用，false非异步，即同步；为true则为异步调用
21                 aRequest.open("POST", "ServerTime.aspx", false);
22                 aRequest.send("");
23                 //根据返回的结果，去更新网页局部元素的信息
24                 document.getElementById("clock").innerHTML = aRequest.responseText;
25             }
26             //每隔一秒调用一次UpdateClock函数
27             setInterval(UpdateClock, 1000);
28     </script>
29 </body>
30 </html>

运行的效果显示一个动态的时间，这个还不算ajax，因为它还是属于同步调用，接下来对程序稍做修改

添加一个ajax.htm的文件，代码如下：

 1 <!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www./TR/xhtml1/DTD/xhtml1-transitional.dtd">
 2 <html xmlns="http://www./1999/xhtml" >
 3 <head>
 4     <title>服务时间</title>
 5 </head>
 6 <body>
 7         <span id="clock">注意变化</span>
 8         <script language="javascript" type="text/javascript">
 9             if (!window.XMLHttpRequest) {
10                 window.XMLHttpRequest = function () {
11                     return new ActiveXObject("Microsoft.XMLHTTP");
12                 };
13             };
14             function AsynRequest() {
15                 //定义一个XMLHttpRequest,用于请求ServerTime.aspx页面
16                 var aRequest = new XMLHttpRequest();
17                 //第一个参数传输方式
18                 //第二个参数是目标的地址
19                 //第三个参数是表示是否为异步调用，false非异步，即同步；为true则为异步调用
20                 aRequest.open("POST", "ServerTime.aspx", true);//异步，发出调用后会立即返回，处理其他事件并等待请求的返回
21                 
22                 //异步调用与同步调用的区别：
23                 
24                 //同步的XMLHttpRequest请求发出之后，JavaScript程序需等待请求完成才会继续运行，
25                 //由于JavaScript是单线程的，因此在等待请求过程中，浏览器会停止响应，这样很容易让客户看到整个页面空白
26                 
27                 //异步处理，就是当前的线程发出去后调用会立即返回，当前线程就可以处理其他事情，一旦请求的数据处理完毕，
28                 //将主动通知当前线程再来处理
29                 
30                 //请求完成将收到此事件
31                 aRequest.onreadystatechange = function()
32                 {
33                     if(aRequest.readyState === 4)//状态4表示请求成功
34                         UpdateClock(aRequest.responseText);//调用UpdateClock函数
35                 };
36                 aRequest.send("");
37             };
38             function UpdateClock(aTime)
39             {
40                 document.getElementById("clock").innerHTML = aTime;
41             };
42             //每隔一秒调用一次UpdateClock函数
43             setInterval(AsynRequest, 1000);
44     </script>
45 </body>
46 </html>