JSON学习demo2（httprequest篇）

最新推荐文章于 2024-11-21 10:32:14 发布

Jan丶X

最新推荐文章于 2024-11-21 10:32:14 发布

阅读量2.3k

点赞数

CC 4.0 BY-SA版权

本文链接：https://blog.youkuaiyun.com/yongjian1092/article/details/8287359

<!DOCTYPE html>
 <html>
 <head>
     <meta charset="UTF-8">
     <title>ajax学习_http_request</title>
 
     <script>
         //1.HttpRequest初始化,判断浏览器类型
         var request = null;
         var checkUserName = function(){
               if(window.XMLHttpRequest()){    //火狐，苹果
                    request = new XMLHttpRequest();
               }else if(window.ActiveXObject()){  //IE
                    request = new ActiveXObject("Microsoft.XMLHTTP");
               }
             //2.通过对象打开请求
              if(request){
                  request.open("GET","user.json",true);    //true代表服务器返回时间内是否执行以下的代码
                  request.send(null);                    //3.发送请求
                  request.onreadystatechange = callBack;
              }
         }
 
         function callBack(){
             if(request.readyState == 4){
                      if(request.status == 0){
                          var response = request.responseText;
                          var user = eval("("+response+")").group;
                          for(var i=0; i<=user.length; i++){
                               console.log("name="+user[i].name+"  age="+user[i].age);
                           }
 
                      }
 
             }
         }
 
 
 
 
 
 
     </script>
 </head>
 
 
 <body>
 <table border="1">
     <tr>
         <td>用户名：</td>
         <td><input type="text" id="username" onblur="checkUserName()"></td>
 
     </tr>
 </table>
 <span id="showMessage"></span>
 </body>
 </html>

json文件内容：

{
    "group" : [
        {"name": "justin" , "age": "20"},
        {"name": "Jan" , "age": "22"},
        {"name": "Boss" , "age": "30"}
    ]
 }