Ajax與DOM實現動態加載

時間 2019-11-19

標籤 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

　　這樣就能夠正確訪問了。