UDN-企业互联网技术人气社区

板块导航

浏览  : 1275
回复  : 6

[原生js] Ajax与DOM实现动态加载

[复制链接]
bobby的头像 楼主
发表于 2015-8-18 12:15:24 | 显示全部楼层 |阅读模式
首先说下问题背景:

        想要通过异步请求一个文本文件,然后通过该文件的内容动态创建一个DOM节点添加到网页中。


基于这个需要了解:

  • DOM如何动态添加节点
  • Ajax异步请求
  • Chrome浏览器如何处理本地请求


DOM如何动态添加节点:


  想要动态的添加节点,就需要良好的理解DOM文档。

  常用的几个方法:

  1、getElementById()  
       2、getElementsByTagName()
       3、getAttribute()
       4、setAttribute()


  以及

  1、createElement()
       2、createTextNode()
       3、appendChild()


  等等。

  下面看一下创建一个DOM节点的方法过程,首先需要有一个挂载的div,这个div需要设置上一个id,这样方便通过getElementById来获取。
  1.         <div id="test"></div>

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


       这样就完成了动态的创建节点。

Ajax异步请求:


       首先针对不同的浏览器,创建XMLHttpRequest对象,可以采取下面的方法:
  1.         function getHTTPObject(){
  2.                 if(typeof XMLHttpRequest == "undefined"){
  3.                     XMLHttpRequest = function(){
  4.                         try{
  5.                             return new ActiveXObject("Microsoft.XMLHTTP");
  6.                         }catch(e){}
  7.                         return false;
  8.                     }
  9.                 }
  10.                 return new XMLHttpRequest();
  11.             }
复制代码


 这样就可以返回浏览器支持的request对象了。然后创建对应的request的open send onreadystatechange方法。

  这里直接放在一个方法中:
  1.         function getNewContent(){
  2.                 var request = getHTTPObject();
  3.                 if(request){
  4.                     request.open("GET","test.txt",true);
  5.                     request.onreadystatechange = function(){
  6.                         if(request.readyState == 4){
  7.                             //核心代码
  8.                         }
  9.                     };
  10.                     request.send(null);
  11.                 }else{
  12.                     console.log("Browser does not support XMLHttpRequest");
  13.                 }
  14.                 console.log("Function Done!");
  15.             }
复制代码


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

  全部代码:
  1. <!doctype html>
  2. <html>
  3.     <head>
  4.          <meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
  5.          <title>Ajax test</title>
  6.     </head>
  7.     <body>
  8.         <div id="test"></div>

  9.         <script type="text/javascript">
  10.             function getHTTPObject(){
  11.                 if(typeof XMLHttpRequest == "undefined"){
  12.                     XMLHttpRequest = function(){
  13.                         try{
  14.                             return new ActiveXObject("Microsoft.XMLHTTP");
  15.                         }catch(e){}
  16.                         return false;
  17.                     }
  18.                 }
  19.                 return new XMLHttpRequest();
  20.             }

  21.             function getNewContent(){
  22.                 var request = getHTTPObject();
  23.                 if(request){
  24.                     request.open("GET","test.txt",true);
  25.                     request.onreadystatechange = function(){
  26.                         if(request.readyState == 4){
  27.                             console.log("Response Received!");
  28.                             var para = document.createElement("p");
  29.                             var txt  = document.createTextNode(request.responseText);
  30.                             para.appendChild(txt);
  31.                             document.getElementById("test").appendChild(para);
  32.                         }
  33.                     };
  34.                     request.send(null);
  35.                 }else{
  36.                     console.log("Browser does not support XMLHttpRequest");
  37.                 }
  38.                 console.log("Function Done!");
  39.             }

  40.             function addLoadEvent(func){
  41.                 var oldonload = window.onload;
  42.                 if(typeof window.onload != 'function'){
  43.                     window.onload = func;
  44.                 }else{
  45.                     window.onload = function(){
  46.                         oldonload();
  47.                         func();
  48.                     }
  49.                 }
  50.             }

  51.             addLoadEvent(getNewContent);
  52.         </script>
  53.     </body>
  54. </html>
复制代码

     执行结果:

1.jpg



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

2.jpg


       所以在Chrome的快捷方式后面添加:--allow-file-access-from-files 即可。注意后面要添加一个空格,不然会提示错误!

3.jpg


    正确的写法:  
  1. "C:\Program Files (x86)\Google\Chrome\Application\chrome.exe" --allow-file-access-from-files
复制代码

  这样就可以正确访问了。

相关帖子

发表于 2015-8-18 12:15:26 | 显示全部楼层
经常看到”bobby“发帖,辛苦了
使用道具 举报

回复

发表于 2015-8-19 10:52:22 | 显示全部楼层
OMG!介是啥东东
使用道具 举报

回复

发表于 2015-8-20 21:41:45 | 显示全部楼层
这个排版超级帅气啊
使用道具 举报

回复

发表于 2015-8-21 11:09:58 | 显示全部楼层
楼主是大神的节奏
使用道具 举报

回复

发表于 2015-8-21 21:54:13 | 显示全部楼层
代码大神!
使用道具 举报

回复

发表于 2015-8-27 15:23:38 | 显示全部楼层
然而并不熟悉前端
使用道具 举报

回复

您需要登录后才可以回帖 登录 | 立即注册

本版积分规则

关于我们
联系我们
  • 电话:010-86393388
  • 邮件:udn@yonyou.com
  • 地址:北京市海淀区北清路68号
移动客户端下载
关注我们
  • 微信公众号:yonyouudn
  • 扫描右侧二维码关注我们
  • 专注企业互联网的技术社区
版权所有:用友网络科技股份有限公司82041 京ICP备05007539号-11 京公网网备安1101080209224 Powered by Discuz!
快速回复 返回列表 返回顶部