写一个按钮，点击后在指定的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. 运维学习笔记（七）之T02-01计算机网络 、 数制 、 网络通信参考模型

    计算机网络 计算机网络概述 什么是计算机网络 硬件方面:通过线缆将网络设备和计算机连接起来 软件方面:操作系统.应用软件.应用程序通过通信线路互连 实现资源共享.信息传递 功能 数据通信/资源共享/增 ...

  2. 判断一个变量是不是json，以及如何将变量转换成json

    https://blog.csdn.net/A123638/article/details/52486975这里看到一个很好的方法 // 判断变量是不是jsonisJson(variable: any ...

  3. Apache Hadoop YARN – NodeManager--转载

    原文地址:http://zh.hortonworks.com/blog/apache-hadoop-yarn-nodemanager/ The NodeManager (NM) is YARN’s p ...

  4. bzoj5123 [Lydsy12月赛]线段树的匹配

    题意: 线段树是这样一种数据结构:根节点表示区间 [1, n]:对于任意一个表示区间 [l, r] 的节点,若 l < r, 则取 mid = ⌊l+r/2⌋,该节点的左儿子为 [l, mid] ...

  5. BZOJ3620 似乎在梦中见过的样子（kmp）

    不是很懂为什么数据范围要开的这么诡异,想到正解都不敢写.用类似NOI2014动物园的方法,对每个后缀求出类似next的数组即可. #include<iostream> #include&l ...

  6. P2573 [SCOI2012]滑雪

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

  7. 51nod 1089最长回文子串V2 (manacher)

    经典题 manacher是一种很神奇的算法, 算是动态规划的一种,不过利用的信息非常有效 #include <iostream> #include <cstdio> #incl ...

  8. 在虚拟机上安装linux系统

    1.安装linux服务器,内存4G,默认典型,next安装程序光盘影像文件,next选版本 2.6.x内核64位,next选择虚拟机位置(至少10G),next最大磁盘20G,选择单文件,next自定 ...

  9. [NOI2017]蚯蚓排队 hash

    题面:洛谷 题解: 我们暴力维护当前所有队伍内的所有子串(长度k = 1 ~ 50)的出现次数. 把每个子串都用一个hash值来表示,每次改变队伍形态都用双向链表维护,并暴力更新出现次数. 现在考虑复 ...

  10. [CQOI2011]动态逆序对 CDQ分治

    洛谷上有2道相同的题目(基本是完全相同的,输入输出格式略有不同) ---题面--- ---题面--- CDQ分治 首先由于删除是很不好处理的,所以我们把删除改为插入,然后输出的时候倒着输出即可 首先这 ...