Ajax学习入门

Ajax在国外已经很流行而且比较热门了，比如Google的gmail等。我们中国看来还是对新技术的感冒程度差了不少，到现在还基本没有什么站点在使用。最近虽然很紧张，不过日子太枯燥，今天稍微偷点闲，在网上找点资料看了两小时。自己写了个小程序来试验试验，还不错，运行成功。现在跟大家稍微分享一下，希望也能起个抛砖引玉的作用，以后大家也能多发一些技术学习心得交流的帖子。War程序我也会在添附文件中加上，大家可以试着运行运行。

   传统的web应用程序都是要么静态HTML以及SSI技术进行动态Load，或者用服务器脚本技术比如JSP，ASP等等在后台服务器动态生成HTML再发送到前台客户浏览器上。这两种方法有一个共同点，就是页面到达客户端以后都将是静态的了，如果想再想从服务器取得信息的话，要么通过iFrame来进行隐藏的submit，要么就是刷新整个页面。一方面如果提交整个页面给后台处理的话，会进行许多无谓的你所不关心的信息的更新，造成性能上的下降，另一方面传递整张web页面的流量通常比较大，特别是如果还有图片或者很复杂的UI的情况下一个HTML页面就有可能几百K从而让客户感觉性能不佳。Ajax技术的出现也可以认为是这种问题的一个很好的解决方案，使用了Ajax可以只从服务器获取想要的一部分信息，其余部分保留原样，客户端不会刷新，使得web页面具有了Rich客户端的优点。

Ajax也就是异步JavaScript动态与服务器交互的技术，利用XMLHttpRequest来作为和后台通信的媒介。当浏览器无法使用HttpRequest的时候就会利用生成ActiveXObject控件来作为这个媒介。于是就有了下面类似的Javascript。

url = "increase.act";

           var callback = ajaxCallback;

        if (window.XMLHttpRequest) {

            req = new XMLHttpRequest();

            req.onreadystatechange = callback;

            req.open("GET", url, true);

            req.send(null);

        } else if (window.ActiveXObject) {

            req = new ActiveXObject("Microsoft.XMLHTTP");

            if (req) {

              req.onreadystatechange = callback;

              req.open("GET", url, true);

              req.send();

            }

        }

我们在这里需要定义回调函数（callback），设置好这个回调函数，我们可以使得在服务器端返回结果后让客户端自动调用这个回调函数来使得客户端UI进行变更。req.open("GET", url, true);这句话使得XMLHttpRequest去联结服务器地址，这个地址在这里我指向了一个自定义Servlet，这个servlet访问一个全局Singleton变量，每访问一次就会产生1的自增。而三个参数的true的含义就是是否异步调用，也就是当这个服务器端调用结束以前是不是继续执行我们的Javascript。在这里Ajax的A顾名思义就是异步（Asynchronous）的缩写，所以我们自然设置为true。这个时候就有点类似于Java中的多线程操作，XMLHttpRequest这个时候去调用服务器端，而剩下来的客户端Javascript则被继续运行。在req.send()以后客户端就会不断调用这个回调函数，直到这个XMLHttpRequest当前状态称为4（完成complete）为止。下面我们来看看这个被执行N次的回调函数。

 

 

 

    function ajaxCallback() {

        if (req.readyState == 4) {

            if (req.status == 200) {

                document.all.cnt.innerHTML = req.responseText;

            }

        }

    }

这里这个回调函数也很简单，当XMLHttpRequest的状态为4（完成complete）的时候，再检查返回的http状态，了解HTTP协议状态代码的人应该比较清楚，200代表成功运行。所以当成功运行的时候，就把页面上某个span域给设定为从Server端返回的值。

在这里再附一下XMLHttpRequest的readyState属性的几种状态。

0 = 未初始化（uninitialized）

1 = 正在加载（loading）

2 = 加载完毕（loaded）

3 = 交互（interactive）

4 = 完成（complete）

我所写的这个简单例子差不多也就介绍到这里，由于就随便看了一会，所以作出来的东西很简单，只能供入门使用。大家现在也应该能感觉出来Ajax可能会是Web开发中模式的一次革命，我觉得回来以后还是要找个时间认真研究一下。

 

 

 

不过我这里运行的时候由于有IE的cache在，所以我点了一次button以后就好像以后值不再变动，后来我在选项设置上把脱机文件选为每次都要更新，这样才没有问题。找了很多种设置手段，包括

<meta http-equiv="pragma" content="no-cache">

<meta http-equiv="Cache-Control" content="no-cache, must-revalidate">

<meta http-equiv="expires" content="0">

都用上来了，可是 cache 还是在，由于我采用的是 html 页面，不是 JSP ，所以好像不好写 HTTP 协议头，不知道应该有什么方法解决。希望大家不吝赐教啊。