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

　　这样就能够正确访问了。

　　参考：

　　【1】《Javascript DOM编程艺术》

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