一、AJAX簡單整理
1.Ajax 是什么臀叙？
Ajax這種技術是指無需刷新頁面即可從服務器取得數(shù)據(jù)坐梯。
Ajax的核心是XMLHttpRequest對象，簡稱XHR
2.XMLHttpRequest對象
如果要使用XHR對象很簡單森瘪，只需要如下:
var xhr = new XMLHttpRequest();
但如果需要兼容牡属，那就需要構建一個函數(shù)：
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個參數(shù)措伐，如下：
xhr.open('GET', 'json/data.json', false);
說明:
- 第一個參數(shù)：啟動一個針對data.json的GET請求；這個參數(shù)可以有GET/POST军俊。
- 第二個參數(shù)：URL(可以是絕對路徑也可以是相對路徑)
- 第三個參數(shù)：false/true侥加，是否異步
注意：
調用open()方法并不會真正的發(fā)送請求，它只是啟動一個請求以備發(fā)送粪躬，完整的發(fā)送特定請求如下：
xhr.open('GET', 'json/data.json', false);
xhr.send();
4.XHR的屬性
在收到響應后担败，響應的數(shù)據(jù)會自動填充XHR對象的屬性，其屬性如下：
-
responseText:作為響應主體被返回的文本镰官。 -
responseXML：如果響應的內(nèi)容類型是"text/xml"或"application/xml",這個屬性中將保存包含著響應數(shù)據(jù)的XML DOM文檔提前。 -
status: 響應的HTTP狀態(tài) [200 是成功，304是資源沒有修改過] -
statusText: HTTP狀態(tài)的說明
二泳唠、用AJAX獲取本地JSON數(shù)據(jù)
<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);
});
}
})
})
