JSON和Ajax（二）——用AJAX获取本地JSON数据

一、AJAX简单整理

1.Ajax 是什么？

Ajax这种技术是指无需刷新页面即可从服务器取得数据。
Ajax的核心是XMLHttpRequest对象，简称XHR

2.XMLHttpRequest对象

如果要使用XHR对象很简单，只需要如下:

var xhr = new XMLHttpRequest();

但如果需要兼容，那就需要构建一个函数：

function creatXHR() {
    if(typeof XMLHttpRequest != 'undefined') {
        return new XMLHttpRequest();
    } else {
        return new ActiveXObject('Microsoft.XMLHTTP');
    }
}

var xhr = creatXHR();

3.XHR的用法

在使用XHR对象时，需要调用两个方法，一个open()方法，一个send()方法。
其中，open()接收3个参数，如下：

xhr.open('GET', 'json/data.json', false);

说明:

• 第一个参数：启动一个针对data.json的GET请求；这个参数可以有GET/POST。
• 第二个参数：URL(可以是绝对路径也可以是相对路径)
• 第三个参数：false/true，是否异步

注意：
调用open()方法并不会真正的发送请求，它只是启动一个请求以备发送，完整的发送特定请求如下：

xhr.open('GET', 'json/data.json', false);
xhr.send();

4.XHR的属性

在收到响应后，响应的数据会自动填充XHR对象的属性，其属性如下：

• responseText:作为响应主体被返回的文本。
• responseXML：如果响应的内容类型是"text/xml"或"application/xml",这个属性中将保存包含着响应数据的XML DOM文档。
• status: 响应的HTTP状态 [200 是成功，304是资源没有修改过]
• statusText: HTTP状态的说明

二、用AJAX获取本地JSON数据

<script>
    function creatXHR() {
        if(typeof XMLHttpRequest != 'undefined') {
            return new XMLHttpRequest();
        } else {
            return new ActiveXObject('Microsoft.XMLHTTP');
        }
    }

    var xhr = creatXHR();
    xhr.open('GET', 'json/data.json', false);
    xhr.send();

    if(xhr.status >= 0 && xhr.status < 300 || xhr.status == 304) {
        var comentList = JSON.parse(xhr.responseText).user; 
        var html = ""
        for(var i = 0; i < comentList.length; i++) {
            var star = `<p>id="${comentList[i].id}",name="${comentList[i].name}"</p>`
            html += star;
        }
        document.getElementById('outer').innerHTML = html;
    }
</script>

如果用Jq就更简单了：

$(function(){
   $.ajax({
       type:'GET',
       url: "./json/data.json",
       dataType: "json",
       success: function(data){
           var comentList = data.user;
           $.each(comentList, function(i,item) {
                var str = `
                    <p>id=${item.id},name=${item.name}</p>
                `;
                $('#outer').append(str);
           });  
       }
   })
})