AJAX指南（1）---- Hello，world

来源：互联网发布：小心网络陷阱教案编辑：程序博客网时间：2024/05/17 03:48

在开始之前，首先解释一下什么是AJAX，AJAX的英文全称是Asynchronous JavaScript and XML，即异步JavaScript与XML。它是一种新兴的用于开发RIA程序的Web开发技术。目前比较典型的应用包括GMail，Google maps，Google group。

对于用户来说它的最大好处就是不必每次都刷新整个页面，而只需对发生变化的部分进行更新，从而有效提高网页的加载速度。对于开发者来说，AJAX提供了一种高效的RIA（胖客户端程序）开发模型，由于AJAX使用的都是已经存在好多年的"旧"技术，因此进入门槛很低，并且这些技术都已经标准化，并得到了主流厂商的支持，因此AJAX具有良好的跨平台特性，还有很重要的一点，同商业的RIA解决方案（比如MicroMedia的Flex）比较起来，AJAX 几乎是免费，一般来说，要开发一个AJAX应用，一个写字板就足够了。

介绍了这么多，下面就让我们先从最简单的Hello World开始吧！

与传统的Web应用仅由服务端构成不同，AJAX应用分为客户端和服务端两个部分，客户端的作用在于它可以异步的从服务端获取数据并将其动态插入到 HTML中，因此我们首先需要构造一个静态的HTML页面hello.html，并为它添加一个DIV标签：

    <HTML>
    <HEAD>
    <TITLE> AJAX指南(1) ---- Hello,world! </TITLE>
    </HEAD>
    <BODY onload="HelloWorld()">
    <DIV ID="ajax-sample">
    </DIV>
    </BODY>
    </HTML>

接下来我们要做的事情就是从服务端异步的获取一条信息并将他插入到DIV标签内，要从服务端获取消息，首先我们需要获取一个HTTP请求对象，下面的 JavaScript函数可以做到这一点：

    //获取Http请求对象，这个对象用于客户端向服务
    //端发送异步的http请求
    function getHTTPObject()
    {
          var http;
          var browser = navigator.appName;

          if(browser == "Microsoft Internet Explorer")
          {
                //如果用户使用IE，就返回XMLHTTP的ActiveX对象
                http = new ActiveXObject("Microsoft.XMLHTTP");
          }
          else
          {
                //否则返回一个XMLHttpRequest对象
                http = new XMLHttpRequest();
          }

return http;
}

得到HTTP请求对象之后，我们需要向服务段发送请求，假设服务端为hello.php，下面的代码负责获取服务端的响应：

//获取全局的HTTP请求对象
var http = getHTTPObject();

    //处理请求状态变化
    function getHello()
    {
          //4表示请求已完成
          if (http.readyState == 4)
          {

//获取服务段的响应文本
var helloStr = http.responseText;

                //插入响应到ID为ajax-sample的DIV标签内
                document.getElementById("ajax-sample").innerHTML = helloStr;
          }
    }

    function HelloWorld()
    {
          var url = "hello.php";

          //指定服务端的地址
          http.open("GET", url, true);
          //请求状态变化时的处理函数
          http.onreadystatechange = getHello;
          //发送请求
          http.send(null);
    }

将上面这段代码插入Head标签，然后将Body标签的onload属性设为HelloWorld方法，整个客户端就完工了。

    服务端(hello.php )相当简单，它只是向客户端发送一个Hello World消息：
    <?php
          echo "Hello, world!";
    ?>

最后需要注意的是，出于安全方面的考虑，HTTP请求对象只能向同一个域(domain)发送请求，也就是hello.html和hello.php必须属于同一个域，但是允许使用.和..，也就是说他们可以处于不同的目录。