Ajax與DOM實現動態加載

時間 2019-11-11

標籤 ajax dom 實現動態加載欄目 Ajax 简体版

原文原文鏈接

首先說下問題背景：想要經過異步請求一個文本文件，而後經過該文件的內容動態建立一個DOM節點添加到網頁中。javascript

基於這個須要瞭解：html

　　1 DOM如何動態添加節點java

　　2 Ajax異步請求chrome

　　3 Chrome瀏覽器如何處理本地請求編程

　　DOM如何動態添加節點

　　想要動態的添加節點，就須要良好的理解DOM文檔。瀏覽器

　　經常使用的幾個方法：app

　　getElementById() getElementsByTagName() getAttribute() setAttribute()異步

　　以及ide

　　createElement() createTextNode() appendChild()ui

　　等等。

　　下面看一下建立一個DOM節點的方法過程，首先須要有一個掛載的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>

　　這樣就完成了動態的建立節點。

　　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方法。

　　這裏直接放在一個方法中：

            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就能夠了。

　　所有代碼：

<!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

　　執行結果：

　　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'.

　　因此在Chrome的快捷方式後面添加：--allow-file-access-from-files 便可。注意後面要添加一個空格，否則會提示錯誤！

　　正確的寫法：

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

　　這樣就能夠正確訪問了。