Ajax学习笔记1之第一个Ajax应用程序

代码

<head>
    <title>An Ajax demo</title>
    <script src="../js/jquery-1.4.1.js" type="text/javascript"></script>
    <script type="text/javascript">
        //XMLHttpRequest对象:初始化为false;
        var XMLHttpRequestObject = false;

        //Netscape Navigator(7.0版及更高版本),Apple Safari(1.2及更高版本)和Firefox
        if (window.XMLHttpRequest) {
            XMLHttpRequestObject = new XMLHttpRequest();
        }
        //在Internet Explorer(5.0及更高版本)
        else if (window.ActiveXObject) {
            XMLHttpRequestObject = new ActiveXObject("Microsoft.XMLHTTP");
        }

        function getData(dataSource, divID) {
            //如果创建的XMLHttpRequest对象无效，则退出
            if (XMLHttpRequestObject) {
                var obj = document.getElementById(divID);
                //打开XMLHttpRequest对象并配置好以便和服务器通信
                XMLHttpRequestObject.open("GET", dataSource);

                //处理数据下载
                XMLHttpRequestObject.onreadystatechange = function () {
                    if (XMLHttpRequestObject.readyState == 4 && XMLHttpRequestObject.status == 200) {
                        //获取数据
                        obj.innerHTML = XMLHttpRequestObject.responseText;
                    }
                }
                //真正执行下载的代码使用post方法时send("data="+data)
                XMLHttpRequestObject.send(null);
            }
            else {
                var obj = document.getElementById("targetDiv");
                obj.innerHTML = "Sorry,your browser can't do Ajax.";
            }
        }
    </script>
</head>
<body>
    <h1>
        An Ajax demo</h1>
    <form>
    <!--data.txt文件和index.htm必须确保位于服务器的同一目录中,如果不在同一目录，必须加上上几级目录,例:data/data.txt-->
    <input type="button" value="Fetch the message" onclick="getData('data.txt','targetDiv')" /></form>
    <div id="targetDiv">
        <p>
            The fetched message will appear here</p>
    </div>
</body>
</html>

运行结果：

代码说明：

创建XMLHttpRequest对象

//在Netscape Navigator(7.0版及更高版本),Apple Safari(1.2及更高版本)和Firefox中，可以用下列代码创建XMLHttpRequest对象
//window.XMLHttpRequest:判断window.XMLHttpRequest对象是否存在(存在则浏览器可以用下面的方法创建XMLHttpRequest对象)
if (window.XMLHttpRequest) {
　　XMLHttpRequestObject = new XMLHttpRequest();
}
//在Internet Explorer(5.0及更高版本)中可以用下列代码创建XMLHttpRequest对象
//假如用户使用的是Microsoft Internet Explorer则应判断window.ActiveXObject对象是否存在(存在则浏览器可以用下面的方法创建XMLHttpRequest对象)
else if (window.ActiveXObject) {
　　XMLHttpRequestObject = new ActiveXObject("Microsoft.XMLHTTP");
}

打开XMLHttpRequest对象

//open("Method","URL"[,asyncFlag[,"userName"[,"password"]]])方括号[]中的内容是可选的
//各个参数含义如下:
//Method:用于打开HTTP的方法,如GET,POST,PUT,HEAD或PROPFIND
//URL:请求的URL
//asyncFlag:表示是否为异步调用的布尔值,默认为true
//userName:用户名
//password:密码
XMLHttpRequestObject.open("GET", dataSource);

XMLHttpRequest.readyState和XMLHttpRequest.status

//readyState
//0:未初始化
//1:正在加载
//2:已加载
//3:交互式
//4:完成,表示数据已下载完毕

//status
//200:正常,表示下载正常
//404:未找到
if (XMLHttpRequestObject.readyState == 4 && XMLHttpRequestObject.status == 200) {
    //下载的数据是简单文本对象,可从XMLHttpRequest对象的responseText属性读取这些数据
    //下载的数据是XML格式,可从XMLHttpRequest对象的responseXml属性读取这些数据
    obj.innerHTML = XMLHttpRequestObject.responseText;
}

//真正执行下载的代码
XMLHttpRequestObject.send(null);

总结：

创建Ajax的一般步骤:
(1)、创建一个XMLHttpRequest对象
(2)、使用XMLHttpRequest对象的open方法对其进行配置
(3)、将一个处理下载的JavaScript匿名函数通XMLHttpRequest对象的onreadystatechange属性关联起来
(4)、使用GET HTTP方法来获取数据，发送一个null值给服务器，这样将开始下载数据

注：在IE浏览器上按F12调试，只有在版本为10以上时才得到正确结果，在360上没任何问题