写一个按钮，点击后在指定的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. spring框架（3）— spring集合类的注入

    1.Car.java package com.eniac.beans; public class Car { private String type; private String factory; ...

  2. mosquitto启动时Address already in use 和 一般的 Address already in use

    对于mosquitto启动时的地址占用错误,可能是mosquitto启动之后没关掉,进程一直占用了端口.查看mosquitto相关的进程,然后关掉就可启动了. 关掉mosquitto进程即可 参考: ...

  3. 复利计算1.0,2.0,3.0（java）

    程序源代码: import java.util.Scanner; public class ch { public static void main(String[] args) { Scanner ...

  4. 【Linux】- 对find，xargs，grep和管道的一些理解

    问题 相信大家都知道在目录中搜索含有固定字符串文件的命令: find . -name '*.py' |xargs grep test 刚开始的时候,我不熟悉xargs命令,所以直接使用的命令是: fi ...

  5. python接口自动化测试框架实现之字符串插入变量（字符串参数化）

    问题: 在做接口自动化测试的时候,请求报文是json串,但是根据项目规则必须转换成字符串,然后在开头拼接“data=” 接口中很多入参值需要进行参数化. 解决方案: 1.Python并没有对在字符串中 ...

  6. Android ContentProvider基本用法

    转自:https://www.jianshu.com/p/601086916c8f 一.基本概念 ContentProvider是Android系统中提供的专门用户不同应用间进行数据共享的组件,提供了 ...

  7. Windows搭建Log4Net+FileBeat+ELK日志分析系统过程

    参考博客:http://udn.yyuap.com/thread-54591-1-1.html ; https://www.cnblogs.com/yanbinliu/p/6208626.html ; ...

  8. jquery实现可编辑的下拉框( input + select )

    HTML: <input id="inputModel" /> <select name="EngineModel" size="1 ...

  9. SQL Server中使用自定义指定顺序排序

    比如需要对SQL表中的字段NAME进行如下的排序:张三(Z)李四(L)王五(W)赵六(Z) 如果想按 “ 张三.李四.王五.赵六”的顺序排序,则可以使用以下语句: order by charindex ...

  10. P2573 [SCOI2012]滑雪

    题目描述 a180285非常喜欢滑雪.他来到一座雪山,这里分布着 M 条供滑行的轨道和 N 个轨道之间的交点(同时也是景点),而且每个景点都有一编号 i ( 1≤i≤N )和一高度 Hi.a18028 ...