使用Ajax异步加载请求JSON数据

html


<html>
    <head lang="en">
        <meta charset="UTF-8">
        <title>title>
        <script src="addLoadEvent.js">script>
        <script src="getHttpObject.js">script>
        <script src="getNewContent.js">script>
    head>
    <body>
    body>
html>

demo.json

[
  {
    "name":"Lee",
    "age":28,
    "height":188
  },
  {
    "name":"Sun",
    "age":30,
    "height":190
  }
]

addLoadEvent.js

function addLoadEvent(fun){
    var oldLoad = window.onload;
    if(typeof  oldLoad != "function"){
        window.onload = fun;
    }else{
        window.onload = function(){
            oldLoad();
            fun();
        }
    }
}

getHttpObject.js

/*建立XMLHttpRequest对象的兼容方法*/
function getHttpObject(){
    if(window.XMLHttpRequest){
        return new XMLHttpRequest();
    }else if(window.ActiveXObject){
        return new ActiveXObject("Microsoft.XMLHTTP");
    }
}

getNewContent.js

function getNewContent(){
    /*建立一个新的getHttpObject对象*/
    var XHR = getHttpObject();
    if(XHR){
    XHR.onreadystatechange = function(){
    if(XHR.readyState == 4 && XHR.status == 200){
        var txt = JSON.parse(XHR.responseText);
        var result = [];
        /*动态添加DOM*/
        var body = document.getElementsByTagName("body")[0];
        var content = document.createElement("p");
        body.appendChild(content);
        /*遍历输出*/
        for(var i=0;i"name"] = txt[i].name;
            result["age"] = txt[i].age;
            result["height"] = txt[i].height;
            content.innerHTML += "姓名:"+result["name"]+"  年龄:" + result["age"] +"  身高:"+ result["height"]+"
"
; } } }; /*异步请求触发后,脚本会继续执行,不会等待它响应*/ XHR.open('Get','demo.json?id='+Math.random(),true); XHR.send(null); } } addLoadEvent(getNewContent);

运行结果

这里写图片描述

你可能感兴趣的:(ajax异步操作,javascript)