AjaxAjax与DOM完成动态加载

  Ajax异步请求

  首先针对分裂的浏览器,创制XMLHttpRequest对象,可以利用上面包车型地铁法门:

            function getHTTPObject(){
                if(typeof XMLHttpRequest == "undefined"){
                    XMLHttpRequest = function(){
                        try{
                            return new ActiveXObject("Microsoft.XMLHTTP");
                        }catch(e){}
                        return false;
                    }
                }
                return new XMLHttpRequest();
            }

  那样就可以回去浏览器扶助的request对象了。然后创设对应的request的open
send onreadystatechange方法。

  那里平昔放在2个主意中:

            function getNewContent(){
                var request = getHTTPObject();
                if(request){
                    request.open("GET","test.txt",true);
                    request.onreadystatechange = function(){
                        if(request.readyState == 4){
                            //核心代码
                        }
                    };
                    request.send(null);
                }else{
                    console.log("Browser does not support XMLHttpRequest");
                }
                console.log("Function Done!");
            }

  然后等待出发getNewContent就足以了。

  全体代码:

Ajax 1Ajax 2

<!doctype html>
<html>
    <head>
         <meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
         <title>Ajax test</title>
    </head>
    <body>
        <div id="test"></div>

        <script type="text/javascript">
            function getHTTPObject(){
                if(typeof XMLHttpRequest == "undefined"){
                    XMLHttpRequest = function(){
                        try{
                            return new ActiveXObject("Microsoft.XMLHTTP");
                        }catch(e){}
                        return false;
                    }
                }
                return new XMLHttpRequest();
            }

            function getNewContent(){
                var request = getHTTPObject();
                if(request){
                    request.open("GET","test.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("test").appendChild(para);
                        }
                    };
                    request.send(null);
                }else{
                    console.log("Browser does not support XMLHttpRequest");
                }
                console.log("Function Done!");
            }

            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>

View Code

  执行结果:

Ajax 3

  DOM怎样动态增进节点

  想要动态的增加节点,就供给能够的了然DOM文书档案。

  常用的多少个点子:

  getElementById()
 getElementsByTagName() getAttribute() setAttribute()

  以及

  createElement() createTextNode()
appendChild()

  等等。

  上边看一下创制三个DOM节点的措施进度,首先必要有3个挂载的div,这几个div需要安装上二个id,那样方便通过getElementById来收获。

        <div id="test"></div>

        <script type="text/javascript">
             var para = document.createElement("p");//创建一个p标签节点
             var txt  = document.createTextNode("文本内容");//创建一个文本节点,指定相关的内容
             para.appendChild(txt);//把文本节点添加到p标签节点
             document.getElementById("test").appendChild(para);//把p标签节点,添加到div中
        </script>

  这样就达成了动态的创办节点。

  Chrome处理地方Ajax异步请求

  由于Chrome不帮忙本地的异步请求,因而向来通过file://访问文件就会报错!

  报错音讯如下:

  XMLHttpRequest cannot load
file:///C:/Users/Administrator/Desktop/test.txt. Cross origin requests are only supported for
protocol schemes: http, data, chrome-extension, https,
chrome-extension-resource.

  Uncaught NetworkError: Failed to
execute ‘send’ on ‘XMLHttpRequest’: Failed to load
‘file:///C:/Users/Administrator/Desktop/test.txt’.

 

Ajax 4

  所以在Chrome的连忙情势后边添加:–allow-file-access-from-files
即可。注意前面要添加二个空格,不然会提醒错误!

Ajax 5

  正确的写法:

  ”C:\Program Files
(x86)\Google\Chrome\Application\chrome.exe”
–allow-file-access-from-files

  那样就能够正确访问了。

style=”font-size: 13px;”>首先说下难点背景:想要通过异步请求1个文本文件,然后通过该文件的剧情动态创立1个DOM节点添加到网页中。

听别人讲那些要求精通:

  1
DOM怎么着动态增进节点

  2
Ajax异步请求

  3
Chrome浏览器如何处理地点请求

  参考:

  【1】《Javascript DOM编制程序艺术》

  【2】如何缓解XMLHttpRequest cannot
load…:http://blog.csdn.net/dandanzmc/article/details/31344267/

相关文章