原生ajax获取txt文件中数据

最新推荐文章于 2024-07-30 19:20:40 发布

arhdrfx5987

最新推荐文章于 2024-07-30 19:20:40 发布

阅读量142

点赞数

文章标签： json

原文链接：http://www.cnblogs.com/flowerbone/p/6293366.html

版权

 1  <!doctype html>
 2  <html>
 3  <head>
 4      <meta charset="utf-8"/>
 5       <style>
 6         td{
 7             width: 50px;
 8             height: 10px;
 9         }
10       </style>
11       </head>
12       <body>
13       <table id="peopleInfo">
14       </table>
15       <script src="../JS/ajax.js"></script>
16       <script>
17           Ajax('test.txt?datetime=new Date.getTime',function(str){
18               console.log(str);
19               var people=JSON.parse(str);
20               console.log(people[0].name);
21               var html=""
22               html+='<tr><td>姓名</td> <td>年龄</td> <td>性别</td></tr>';
23               for(var i=0;i<3;i++){
24                   html+='<tr><td>'+people[i].name+'</td> <td>'+people[i].age+'</td> <td>'+people[i].sex+'</td> </tr>';
25               }
26               var x=document.getElementById("peopleInfo");
27               x.innerHTML =html;
28               //方法二
29               //              var body = document.body;
30               //              var div = document.createElement("table");
31               // div.id = "mDiv";
32               //              body.appendChild(div);
33           },function(){
34               alert('失败了');
35           })
36       </script>
37       </body>
38  </html>

View Code

function Ajax(url,fnSucc,fnFaild) {
     //1.创建ajax对象
     if (window.XMLHttpRequest) {// code for IE7+, Firefox, Chrome, Opera, Safari
         var oAjax = new XMLHttpRequest();
         //创建 XMLHttpRequest 对象
     }
     else {// code for IE6, IE5
         var oAjax = new ActiveXObject("Microsoft.XMLHTTP");
         //老版本的 Internet Explorer （IE5 和 IE6）使用 ActiveX 对象：
     }
     //2.链接服务器（打开服务器的连接）
     //open(方法，文件名，异步传输)
     //open() 方法的 url 参数是服务器上文件的地址：该文件可以是任何类型的文件
     oAjax.open('GET', url, true);
     //编码格式，防止乱码
     oAjax.setRequestHeader('Content-type','application/x-www-form-urlencoded');
     //3.发送
     oAjax.send();
     //4.接收返回
     //当使用 async=true 时，请规定在响应处于 onreadystatechange 事件中的就绪状态时执行的函数：
     oAjax.onreadystatechange = function () {
         if (oAjax.readyState == 4) {
             if (oAjax.status == 200) {
                 fnSucc(oAjax.responseText);//responseText 属性返回字符串形式的响应
             }
             else {
                 fnFaild(oAjax.status);
             }
         };
     };
 }

View Code

常用方法介绍

open(method,url,async)
规定请求的类型、URL 以及是否异步处理请求。
method：请求的类型；GET 或 POST
url：文件在服务器上的位置
async：true（异步）或 false（同步）
send(string)
将请求发送到于 POST 请求服务器。
string：仅用
responseText 属性返回字符串形式的响应，因此您可以这样使用：
document.getElementById("myDiv").innerHTML=xmlhttp.responseText;
callback 函数是一种以参数形式传递给另一个函数的函数。
如果您的网站上存在多个 AJAX 任务，那么您应该为创建 XMLHttpRequest 对象编写一个标准的函数，并为每个 AJAX 任务调用该函数。

属性	描述
onreadystatechange	存储函数（或函数名），每当 readyState 属性改变时，就会调用该函数。
readyState	存有 XMLHttpRequest 的状态。从 0 到 4 发生变化。 0: 请求未初始化 1: 服务器连接已建立 2: 请求已接收 3: 请求处理中 4: 请求已完成，且响应已就绪
status	200: "OK" 404: 未找到页面

转载于:https://www.cnblogs.com/flowerbone/p/6293366.html

arhdrfx5987

关注

0
点赞
踩
0

收藏

觉得还不错? 一键收藏
0
评论
原生ajax获取txt文件中数据

1 <!doctype html> 2 <html> 3 <head> 4 <meta charset="utf-8"/> 5 <style> 6 td{ 7 width: 50px; 8 heigh...
复制链接

扫一扫