Javascript学习：综合案例5--封装ajax.js读取json数据（服务器环境下）-CSDN博客

本文链接：https://blog.csdn.net/qq_32584661/article/details/80732046

ajax.js：

function ajax(url,funSucc,funFaild){
    /*
    兼容IE5，IE6
    if(window.XMLHttpRequest){
       var xhr = new XMLHttpRequest();
    }else{
        var xhr = new ActiveXObject("Microsoft.XMLHTTP");
    }
    */
    var xhr = new XMLHttpRequest();  1.创建ajax对象

    url = url +"?"+ Math.round();    //加上一个随机数，解决缓存问题
    //或者: url = url +"?"+ new Date().getTime();
    
    xhr.open("GET",url,true);  //2.连接服务器
    xhr.send(null); //3.发送请求

    //4.接受返回的数据
    xhr.onreadystatechange=function(){
        if(xhr.readyState==4){
            if(xhr.status==200){
                //alert("请求成功！");
                //responseText：属性返回字符串形式的响应
                funSucc(xhr.responseText);
            }else{
                //alert("请求失败！");
                if(funFaild){
                    funFaild(xhr.statusText);
                }

            };
        }

    };
}

html：

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>Title</title>
    <script src="ajax.js"></script>
    <style>
        #box{width:300px;background:#f5f5f5;padding:30px;}
    </style>
</head>
<body>

<input type="button" value="按钮" id="btn"/>
<div id="box"></div>

<script>

    var btn = document.getElementById("btn");
    var box = document.getElementById("box");

    btn.οnclick=function () {

        ajax("data.json",function (str) {

            jsonArray= JSON.parse(str);

            for(var i in jsonArray){
                for(var j in jsonArray[i]){
                    box.innerHTML+="<div>"+j+" : "+jsonArray[i][j]+"</div>"
                };
            };


        },function (s) {
            alert(s);     //请求失败执行
        })


    };



</script>

</body>
</html>

data.json:

[
  {"name":"小A","age":10,"sex":"男","class":"一年级"},
  {"name":"小B","age":11,"sex":"女","class":"二年级"},
  {"name":"小C","age":12,"sex":"男","class":"三年级"},
  {"name":"小D","age":13,"sex":"女","class":"四年级"},
  {"name":"小E","age":14,"sex":"男","class":"五年级"}
]

效果：