《JavaScript DOM 编程艺术》小结（二）

最新推荐文章于 2024-06-10 22:52:06 发布

「已注销」

最新推荐文章于 2024-06-10 22:52:06 发布

阅读量523

点赞数

分类专栏： Web开发文章标签： javascript ajax dom

本文链接：https://blog.csdn.net/Lovejulyer/article/details/71429470

版权

Web开发专栏收录该内容

50 篇文章 1 订阅

订阅专栏

《JavaScript DOM 编程艺术》（第2版）【 0501—0510 】

Ajax

<!DOCTYPE html>
<html lang="en">
    <head>
        <meta charset="utf-8">
        <title>AJAX Example</title>
    </head>
    <body>
        <div id="new"></div>        
        <script>

            // getHTTPObject()
            function getHTTPObject(){
                if(typeof XMLHttpRequest == "undefined"){
                    XMLHttpRequest = function(){
                        try { return new ActiveObject("Msxml2.XMLHTTP.6.0"); }
                            catch (e) {}
                        try { return new ActiveObject("Msxml2.XMLHTTP.3.0"); }
                            catch (e) {}
                        try { return new ActiveObject("Msxml2.XMLHTTP"); }
                            catch (e) {}
                        return false;
                    }
                }
                return new XMLHttpRequest();
            }

            function getNewContent(){
                var request = getHTTPObject();
                if(request){
                    request.open( "GET", "example.txt", true );
                    request.onreadystatechange = function(){
                        if(request.readyState == 4){
                            console.log("#### Response Received ####");
                            var para = document.createElement("p");
                            var txt = document.createTextNode(request.responseText);
                            para.appendChild(txt);
                            document.getElementById("new").appendChild(para);
                        }
                    };
                    request.send(null);
                }else{
                    alert("no support XMLHttpRequest");
                }
                 console.log("#### Function Done ####");
            }

            // addLoadEvent函数
            function addLoadEvent(func){
                var oldonload = window.onload;
                if(typeof window.onload != 'function'){
                    window.onload = func;
                }else{
                    window.onload = function(){
                        oldonload();
                        func();
                    }
                }
            }

            addLoadEvent(getNewContent);

        </script>
    </body>
</html>

XMLHttpRequest对象

该对象充当着浏览器中的客户端与服务器之间的中间人角色。以往的请求由浏览器发出，而JavaScript通过这个对象可以自己发生请求，同时也自己处理响应。
open方法：用来指定服务器上将要访问的文件，指定请求类型，GET、POST、SEND。第三个参数用于指定请求是否以异步方式发送和处理。
ononreadystatechange是一个事件处理函数，它会在服务器给XMLHttpRequest对象送回响应的时候被触发执行。在这个处理函数中，可以根据服务器的具体响应做响应的处理。

        request.ononreadystatechange = doSomething;

readyState属性：

         0：表示未初始化
         1：表示正在加载
         2：表示加载完成
         3：表示正在交互
         4：表示完成

访问服务器发送回来的数据要通过两个属性完成。一个是responseText属性，这个属性用于保存文本字符串形式的数据。另一个属性是responseXML属性，用于保存Content-Type头部中指定为“text/xml”的数据，其实是一个DocumentFragment对象。
异步性

「已注销」

关注

0
点赞
踩
0

收藏

觉得还不错? 一键收藏
0
评论
《JavaScript DOM 编程艺术》小结（二）

《JavaScript DOM 编程艺术》（第2版）【 0501—0510 】学习总结
复制链接

扫一扫

专栏目录

《JavaScript DOM 编程艺术》小结（二）

Ajax

XMLHttpRequest对象

“相关推荐”对你有帮助么？