AJAX获取服务器文件

最新推荐文章于 2020-01-20 15:11:47 发布

aizhanqian5077

最新推荐文章于 2020-01-20 15:11:47 发布

阅读量179

点赞数

文章标签：后端 javascript 数据结构与算法 ViewUI

原文链接：http://www.cnblogs.com/zcynine/p/4990191.html

版权

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

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

 1 <!DOCTYPE html>
 2 <html>
 3     <head>
 4         <meta charset="utf-8" />
 5     </head>
 6     <body>
 7         <input type="button" id="btn_test" value="test" onclick="javascript:testAjax('test.txt');" />
 8         <br /><br />
 9         <div id="testDiv">Hello,World!</div>
10         
11         <script>
12             function testAjax(request_url){
13                 var xmlhttp = null;
14                 try{
15                     var xmlhttp = new XMLHttpRequest();
16                 }catch(e){
17                     try{
18                         var xmlhttp = new ActiveXObject("Microsoft.XMLHTTP");
19                     }catch(e){
20                         alert("Your browser is not support AJAX");
21                     }
22                 }
23                 
24                 if (xmlhttp){
25                     xmlhttp.open("GET",request_url,true);
26                     xmlhttp.onreadystatechange = function (){
27                         if (xmlhttp.readyState == 4 && xmlhttp.status == 200){
28                             document.getElementById("testDiv").innerHTML = xmlhttp.responseText;
29                         }
30                     };
31                     xmlhttp.send(null);
32                 }else{
33                     alert("Error");
34                 }
35             }
36         </script>
37     </body>
38 </html>

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

 1 <!DOCTYPE html>
 2 <html>
 3     <head>
 4         <meta charset="utf-8" />
 5     </head>
 6     <body>
 7         
 8         <input type="button" id="btn_test" value="test" onclick="javascript:testAjax('test.txt');" />
 9         <br /><br />
10         <div id="testDiv">Hello,World!</div>
11         
12         <script>
13             var xmlhttp = null;
14             
15             function readyStateChangeHandler(){
16                 if (xmlhttp.readyState == 4 && xmlhttp.status == 200){
17                     document.getElementById("testDiv").innerHTML = xmlhttp.responseText;
18                 }
19             }
20             
21             function testAjax(request_url){
22                 try{
23                     xmlhttp = new XMLHttpRequest();
24                 }catch(e){
25                     try{
26                         xmlhttp = new ActiveXObject("Microsoft.XMLHTTP");
27                     }catch(e){
28                         alert("Your browser is not support AJAX");
29                     }
30                 }
31                 
32                 if (xmlhttp){
33                     xmlhttp.open("GET",request_url,true);
34                     xmlhttp.onreadystatechange = readyStateChangeHandler;
35                     xmlhttp.send(null);
36                 }else{
37                     alert("Error");
38                 }
39             }
40         </script>
41     </body>
42 </html>

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

 1 <!DOCTYPE html>
 2 <html>
 3     <head>
 4         <meta charset="utf-8" />
 5     </head>
 6     <body>
 7         
 8         <input type="button" id="btn_test" value="test" onclick="javascript:testAjax();" />
 9         <br /><br />
10         <div id="testDiv">Hello,World!</div>
11         
12         <script>
13             var xmlhttp = null;
14             var testDiv = document.getElementById("testDiv");
15             
16             function readyStateChangeHandler(){
17                 if (xmlhttp.readyState == 4 && xmlhttp.status == 200){
18                     var xmlDOM = xmlhttp.responseXML;
19                     //拿到response后要解析出XML的根节点
20                     var xmlRoot = xmlDOM.documentElement;
21                     try{
22                         //Tag Name视具体需求而定，要和后端人员商量好。
23                         var xmlItem = xmlRoot.getElementsByTagName("item");
24                         for(var i=0;i<xmlItem.length;i++){
25                             //具体怎么拿item里面的内容还需要根据数据结构来定
26                             testDiv.innerHTML += xmlItem[i].innerHTML;
27                         }
28                     }catch(e){
29                         alert(e.message);
30                     }
31                 }
32             }
33             
34             function testAjax(){
35                 try{
36                     xmlhttp = new XMLHttpRequest();
37                 }catch(e){
38                     try{
39                         xmlhttp = new ActiveXObject("Microsoft.XMLHTTP");
40                     }catch(e){
41                         alert("Your browser is not support AJAX");
42                     }
43                 }
44                 
45                 if (xmlhttp){
46                     xmlhttp.open("GET","test.xml",true);
47                     xmlhttp.onreadystatechange = readyStateChangeHandler;
48                     xmlhttp.send(null);
49                 }else{
50                     alert("Error");
51                 }
52             }
53         </script>
54     </body>
55 </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文件复杂，具体怎么取值还要和后端人员讨论

转载于:https://www.cnblogs.com/zcynine/p/4990191.html

aizhanqian5077

关注

0
点赞
踩
0

收藏

觉得还不错? 一键收藏
0
评论
AJAX获取服务器文件

写一个按钮，点击后在指定的div里显示本地txt文件内容在本地新建一个test.txt，里面随便写点内容就好。 1 <!DOCTYPE html> 2 <html> 3 <head> 4 <meta charset="utf-8" /> 5 </head>...
复制链接

扫一扫