写一个按钮，点击后在指定的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. Alpha 冲刺（9/10）

    队名 火箭少男100 组长博客 林燊大哥 作业博客 Alpha 冲鸭鸭鸭鸭鸭鸭鸭鸭鸭! 成员冲刺阶段情况 林燊(组长) 过去两天完成了哪些任务 协调各成员之间的工作 多次测试软件运行 学习OPENMP ...

  2. sql数据库表容量

    标题:SQL Server 的最大容量规范 数据库的文件大小,文件数量都有限制. 表的大小也有限制,如果表过大,查询效率就会下降,考虑对数据进行分割,对历史数据进行独立存储.

  3. jdbc 6.0

    1.获取数据库自动生成的键值 package com.rong.jielong; import java.sql.Connection; import java.sql.DriverManager; ...

  4. 【BioCode】根据seq与位点信息截取窗口

    代码说明 sequence24371.txt 以上为所有氨基酸的编号,序列,与位点标记.根据标记为“1”的位点,截取窗口:如下(实验结果): 图示为一个窗口为12的蛋白质片段 2N+1=25: 实现代 ...

  5. 外部JS的阻塞下载

    转载于:http://www.cnblogs.com/mofish/archive/2011/09/29/2195256.html 所有浏览器在下载JS的时候,会阻止一切其他活动,比如其他资源的下载, ...

  6. phaser3 微信小游戏若干问题

    纯属个人兴趣, 如有兴趣可共同参与维护. git: https://gitee.com/redw1234567/phaser3_wx image的地方需要修改,代码贴上 var ImageFile = ...

  7. node web 应用热更新

    在每次更改完 node.js 项目后,我们都需要先将 node.js停止(快捷键: Ctrl+C),然后再通过命令再次运行,这样特别麻烦.这里我推荐使用 supervisor工具, npm 安装命令为 ...

  8. 第88天：HTML5中使用classList操作css类

    在HTML5 API里,页面DOM里的每个节点上都有一个classList对象,程序员可以使用里面的方法新增.删除.修改节点上的CSS类.使用classList,程序员还可以用它来判断某个节点是否被赋 ...

  9. （转）【Java FTP及FTP服务器搭建】

    转至 http://blog.csdn.net/studyvcmfc/article/details/8147052 目录(?)[+] -[Java FTP及FTP服务器搭建] 一:本文采用apach ...

  10. 网络流24题之星际转移问题（洛谷P2754）

    洛谷 P2754 题目背景 none! 题目描述 由于人类对自然资源的消耗,人们意识到大约在 2300 年之后,地球就不能再居住了.于是在月球上建立了新的绿地,以便在需要时移民.令人意想不到的是,21 ...