写一个按钮，点击后在指定的div里显示本地txt文件内容

在本地新建一个test.txt，里面随便写点内容就好。

 <!DOCTYPE html>

 <html>

     <head>

         <meta charset="utf-8" />

     </head>

     <body>

         <input type="button" id="btn_test" value="test" onclick="javascript:testAjax('test.txt');" />

         <br /><br />

         <div id="testDiv">Hello,World!</div>

         <script>

             function testAjax(request_url){

                 var xmlhttp = null;

                 try{

                     var xmlhttp = new XMLHttpRequest();

                 }catch(e){

                     try{

                         var xmlhttp = new ActiveXObject("Microsoft.XMLHTTP");

                     }catch(e){

                         alert("Your browser is not support AJAX");

                     }

                 }

                 if (xmlhttp){

                     xmlhttp.open("GET",request_url,true);

                     xmlhttp.onreadystatechange = function (){

                         if (xmlhttp.readyState == 4 && xmlhttp.status == 200){

                             document.getElementById("testDiv").innerHTML = xmlhttp.responseText;

                         }

                     };

                     xmlhttp.send(null);

                 }else{

                     alert("Error");

                 }

             }

         </script>

     </body>

 </html>

也可以把readystatechange的事件处理句柄单独写成一个方法，注意xmlhttp要写成全局变量。

 <!DOCTYPE html>

 <html>

     <head>

         <meta charset="utf-8" />

     </head>

     <body>

         <input type="button" id="btn_test" value="test" onclick="javascript:testAjax('test.txt');" />

         <br /><br />

         <div id="testDiv">Hello,World!</div>

         <script>

             var xmlhttp = null;

             function readyStateChangeHandler(){

                 if (xmlhttp.readyState == 4 && xmlhttp.status == 200){

                     document.getElementById("testDiv").innerHTML = xmlhttp.responseText;

                 }

             }

             function testAjax(request_url){

                 try{

                     xmlhttp = new XMLHttpRequest();

                 }catch(e){

                     try{

                         xmlhttp = new ActiveXObject("Microsoft.XMLHTTP");

                     }catch(e){

                         alert("Your browser is not support AJAX");

                     }

                 }

                 if (xmlhttp){

                     xmlhttp.open("GET",request_url,true);

                     xmlhttp.onreadystatechange = readyStateChangeHandler;

                     xmlhttp.send(null);

                 }else{

                     alert("Error");

                 }

             }

         </script>

     </body>

 </html>

获取XML文件的方法有点不太一样，思路是一致的，只不过具体读取response会用到一些特殊的方法

 <!DOCTYPE html>

 <html>

     <head>

         <meta charset="utf-8" />

     </head>

     <body>

         <input type="button" id="btn_test" value="test" onclick="javascript:testAjax();" />

         <br /><br />

         <div id="testDiv">Hello,World!</div>

         <script>

             var xmlhttp = null;

             var testDiv = document.getElementById("testDiv");

             function readyStateChangeHandler(){

                 if (xmlhttp.readyState == 4 && xmlhttp.status == 200){

                     var xmlDOM = xmlhttp.responseXML;

                     //拿到response后要解析出XML的根节点

                     var xmlRoot = xmlDOM.documentElement;

                     try{

                         //Tag Name视具体需求而定，要和后端人员商量好。

                         var xmlItem = xmlRoot.getElementsByTagName("item");

                         for(var i=0;i<xmlItem.length;i++){

                             //具体怎么拿item里面的内容还需要根据数据结构来定

                             testDiv.innerHTML += xmlItem[i].innerHTML;

                         }

                     }catch(e){

                         alert(e.message);

                     }

                 }

             }

             function testAjax(){

                 try{

                     xmlhttp = new XMLHttpRequest();

                 }catch(e){

                     try{

                         xmlhttp = new ActiveXObject("Microsoft.XMLHTTP");

                     }catch(e){

                         alert("Your browser is not support AJAX");

                     }

                 }

                 if (xmlhttp){

                     xmlhttp.open("GET","test.xml",true);

                     xmlhttp.onreadystatechange = readyStateChangeHandler;

                     xmlhttp.send(null);

                 }else{

                     alert("Error");

                 }

             }

         </script>

     </body>

 </html>

test.xml

<?xml version="1.0" encoding="utf-8" ?>

<root>

    <item>This is a XML test!</item>

    <item>Ajax is very useful!</item>

</root>

可以看到每一项item的结构远比xml文件复杂，具体怎么取值还要和后端人员讨论

AJAX获取服务器文件的更多相关文章

  1. Ajax基础（二）--获取服务器文件

    获取服务器文件相关步骤: 1.创建文件: 2.创建XMLHttpRequest对象: 3.获取文件(注意事项:1)在服务器中运行测试:2)注意编码问题,编码要统一). 3.1 获取xml文件: HTM ...

  2. 使用所见即所得文本编辑器编辑文本存入数据库后通过ajax获取服务器json_encode的数据到前台,文本内容上边的html标签不解析

    使用所见即所得文本编辑器编辑文本存入数据库后通过ajax获取服务器json_encode的数据到前台,文本内容上边的html标签不解析 因为我在前台使用了jquery的text()方法,而不是html ...

  3. 通过Jquery中Ajax获取json文件数据

    1. JSON(JavaScript Object Notation): javaScript对象表示法: 是存储和交换文本信息的语法,比xml更小,更快,更易解析. 2. JSON基本书写格式 : ...

  4. Ajax获取 Json文件提取数据

    摘自 Ajax获取 Json文件提取数据 1. json文件内容(item.json) [ { "name":"张国立", "sex":&q ...

  5. Ajax获取服务器信息

    xhr.onreadystatechange = function(){ if (xhr.readyState == 4){ if ((xhr.status >= 200 && ...

  6. 通过原生js的ajax或jquery的ajax获取服务器的时间

    在实际的业务逻辑中,经常是与时间相关的,而前端能获得的时间有两个:客户端的时间,服务器的时间. 客户端时间通过 javascript中的Date对象可以获取,如 var dt = new Date() ...

  7. Ajax获取服务器响应头部信息

    $.ajax({ type: 'HEAD', // 获取头信息,type=HEAD即可 url : window.location.href, complete: function( xhr,data ...

  8. .NET HttpGet 获取服务器文件下的图片信息 同步和异步方式处理

    /// <summary> /// 项目文件夹下路径 返回流类型数据,如:图片类型 /// </summary> /// <returns></returns ...

  9. ajax获取服务器响应信息

    window.onload = function(){ document.getElementById('btn').onclick = function(){ var req = new XMLHt ...

随机推荐

  1. Hexo博客搭建全解

    [原创,转载请附网址:http://dongshuyan.top] 欢迎来到莫与的博客,第一篇记录了一下怎么写一篇博客,以方便之后写博客~ #从配置说起下载安装Git与Node.js略过 1.安装he ...

  2. 阿里云服务器内部dns可能出错

    今天部署一个阿里云服务器,所有配置项都改好了,就是连接不上本机. 反复查找,防火墙端口和网卡接口都配置对了,selinux也关闭了,但就是连接不上阿里云内网的ip. 由于连接是本机,把ip填写为127 ...

  3. 3dContactPointAnnotationTool开发日志（三十）

      在vs2017里生成opencv时遇到了无法打开python27_d.lib的问题,具体解决请看这个,不过我用的是方法2,python37_d.lib找不到同理.   Windows下可以用的op ...

  4. 把握曝光三要素（上）：快门、光圈、ISO

    概要: 如果你还没有掌握快门.光圈和ISO,那这篇文章或许对你有所帮助! 把照片比作水池.把进光量比作水.把快门比作关闭水龙头的速度.把光圈比作水龙头的大小.把感光度ISO比作水龙头的滤网,这就变得好 ...

  5. Navicat Premium_11.2.7简体中文版 破解版本 windows版本

    亲测可用 自己一直在用的 https://pan.baidu.com/s/1VVKKQoIKVB0BgNXBK4YTrQ

  6. [转帖]Linux 的UTC 和 GMT

    1.问题 对于装有Windows和Linux系统的机器,进入Windows显示的时间和Linux不一致,Linux中的时间比Windows提前8个小时. 2.解决方法 修改/etc/default/r ...

  7. Viewpoint Meta标签

    移动web Viewpoint常用得设置方式: [布局viewpoint] = [设备宽度] = [度量viewpoint] <meta name="viewport" co ...

  8. js & right click menu & 鼠标滑词

    js & right click menu & 鼠标滑词 // 鼠标滑词 mouseSlipGetWords() { const getSelectionText = () => ...

  9. 【vim】vim常用命令

    移动: h 或 向左箭头键(←)  #光标向左移劢一个字符 j 或 下箭头键(↓)    #光标向下移劢一个字符 k 或 向上箭头键(↑)    #光标向上移劢一个字符 l 或 向右箭头键(→)    ...

  10. Linux服务器开启tomcat的gc日志

    压力测试,为了能监控长期对gc的变化的情况,那么就需要在tomcat中进行配置相关的gc输入日志,以便后续来对gc中进行分析 工具 :linux+tomcat 1.进入到了tomcat的bin的目录下 ...