ajax获取类json数据(仅作为自己练习记录)

HTML代码：

  1 <html>
  2 <head>
  3 <meta charset="utf-8" />
  4 <style>
  5 *{margin:0 auto;padding:0px;}
  6 #z-box{
  7     margin:10px auto;
  8     width:302px;
  9     height:auto;
 10     border:1px solid red;
 11 }
 12 #z-box h2{
 13     text-align:center;
 14     font-size:24px;
 15     color:red;
 16     border-bottom:1px solid red;
 17 }
 18 #z-box ul{}
 19 #z-box ul li{
 20     list-style:none;
 21     width:100%;
 22     height:90px;
 23 }
 24 #z-box ul li+li{
 25     margin-top:2px;
 26 }
 27 #z-box ul li:nth-child(2n){
 28     background:rgba(0,0,0,0.8);
 29 }
 30 #z-box ul li:nth-child(2n-1){
 31     background:rgba(67,67,67,0.8);
 32 }
 33 #z-box ul li a{
 34     display:block;
 35     height:90px;
 36     width:33%;
 37     text-align:center;
 38     line-height:90px;
 39     color:#fff;
 40     float:left;
 41 }
 42 </style>
 43 </head>
 44 <body>
 45 <div id="z-box">
 46     <h2>吉芳实验室</h2>
 47     <ul>
 48         <li>
 49             <a></a>
 50             <a></a>
 51             <a></a>
 52         </li>
 53         <li>
 54             <a></a>
 55             <a></a>
 56             <a></a>
 57         </li>
 58         <li>
 59             <a></a>
 60             <a></a>
 61             <a></a>
 62         </li>
 63         <li>
 64             <a></a>
 65             <a></a>
 66             <a></a>
 67         </li>
 68         <li>
 69             <a></a>
 70             <a></a>
 71             <a></a>
 72         </li>
 73         <li>
 74             <a></a>
 75             <a></a>
 76             <a></a>
 77         </li>
 78         <li>
 79             <a></a>
 80             <a></a>
 81             <a></a>
 82         </li>
 83     </ul>
 84 </div>
 85 </body>
 86 </html>
 87 <script>
 88 (function(){
 89     var timer=null;
 90     timer=setInterval(function(){
 91 
 92         function createRequest(){
 93             var chttpxml;
 94             if(window.XMLHttpRequest){
 95                 chttpxml=new XMLHttpRequest();
 96             }else{
 97                 chttpxml=new ActiveXObject("Mcrosoft.XMLHTTP");
 98             }
 99             return chttpxml;
100         }
101         
102         var request=createRequest();
103         
104         request.onreadystatechange=function(){  
105         
106             if(request.readyState==4 && request.status==200){
107                 var oDiv=document.getElementById("z-box");
108             
109                 var response_str=request.responseText;
110                 var sjson=JSON.parse(response_str);
111                 
112                 //提取数组一
113                 var array=getArray(sjson);
114                 
115                 //提取数组二
116                 for(var j=0,len=array.length;j<len;j++){
117                     var array2=getArray(array[j]);
118                     for(var i=0;i<3;i++){
119                         oDiv.getElementsByTagName("li")[j].getElementsByTagName("a")[i].innerHTML=array2[i];
120                     }
121                 }            
122                 
123             }
124             
125         };
126         var url="ajax-data.txt?t="+ Math.random();
127         request.open("post",url,true);
128         request.send(null);
129         
130     },1000);
131 
132     //提取数组
133     function getArray(obj){
134         var get_array=new Array();
135         for(var property in obj){
136             get_array.push(obj[property]);
137         }
138         return get_array;
139     }
140 })();
141 </script>
View Code

类json数据 ajax-data.txt:

[
{"name":"zhang","age":23,"job":"C++"},
{"name":"wang","age":22,"job":"php"},
{"name":"jack","age":26,"job":"java"},
{"name":"huang","age":23,"job":"javascript"},
{"name":"ma","age":21,"job":"lua"},
{"name":"liu","age":26,"job":"asp"},
{"name":"mao","age":26,"job":"net"}
]

 

posted on 2016-01-20 15:32  源人  阅读(136)  评论(0)    收藏  举报

导航