一、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);
});
}
})
})
