<!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"}
]
}