ajax简单示例

步骤 3 – "万事俱备!" - 简单实例

　　我们现在将整个过程完整地做一次,发送一个简单的HTTP请求. 我们用JavaScript请求一个HTML文件, test.html, 文件的文本内容为"I'm a test.".然后我们"alert()"test.html文件的内容.

<script type="text/javascript" language="javascript">
    var http_request = false;
    function makeRequest(url) {

        http_request = false;

        if (window.XMLHttpRequest) { // Mozilla, Safari,...
            http_request = new XMLHttpRequest();
            if (http_request.overrideMimeType) {
                http_request.overrideMimeType('text/xml');
            }
        } else if (window.ActiveXObject) { // IE
            try {
                http_request = new ActiveXObject("Msxml2.XMLHTTP");
            } catch (e) {
                try {
                    http_request = new ActiveXObject("Microsoft.XMLHTTP");
                } catch (e) {}
            }
        }

        if (!http_request) {
            alert('Giving up :( Cannot create an XMLHTTP instance');
            return false;
        }
        http_request.onreadystatechange = alertContents;
        http_request.open('GET', url, true);
        http_request.send(null);

    }

    function alertContents() {

        if (http_request.readyState == 4) {
            if (http_request.status == 200) {
                alert(http_request.responseText);
            } else {
                alert('There was a problem with the request.');
            }
        }

    }
</script>
<span
    style="cursor: pointer; text-decoration: underline"
    onclick="makeRequest('test.html')">
        Make a request
</span>

　　本例中:
　　用户点击浏览器上的"请求"链接;
　　接着函数makeRequest()将被调用.其参数 – HTML文件test.html在同一目录下;
　　这样就发起了一个请求.onreadystatechange的执行结果会被传送给alertContents();
　　alertContents()将检查服务器的响应是否成功地收到,如果是,就会"alert()"test.html文件的内容.

步骤 4 – "X-文档" 处理XML响应

　　在前面的例子中,当服务器对HTTP请求的响应被收到后,我们会调用请求对象的reponseText属性.该属性包含了test.html文件的内容.现在我们来试试responseXML属性.
　　首先,我们新建一个有效的XML文件,后面我们将使用这个文件.该文件(test.xml)源码如下所示:
<?xml version="1.0" ?>
<root>
    I'm a test.
</root>
　　在该脚本中,我们只需修改请求部分:
...
onclick="makeRequest('test.xml')">
...
　　接着,在alertContents()中,我们将alert()的代码alert(http_request.responseText);换成:

　　var xmldoc = http_request.responseXML;
　　var root_node = xmldoc.getElementsByTagName('root').item(0);
　　alert(root_node.firstChild.data);
　　这里,我们使用了responseXML提供的XMLDocument对象并用DOM方法获取存于XML文件中的内容.