原生AJAX 請求JSON數據方式

這里先給大家一個有實際json數據的連接： https://jsonplaceholder.typicode.com/posts

1.實例化XMLHttpRequest對象

var request;
if (window.XMLHttpRequest) {
　　request = new XMLHttpRequest()
} else {
　　request = new ActiveXObject('Microsoft.XMLHTTP'); // 兼容IE5 6
}

2.將請求發送給服務器

request.open("GET","url", true);//請求
request.setRequestHeader("Content-Type", "application/x-www-form-urlencoded")
//設置我們的請求頭信息

3.獲取響應的方法

responseText	獲得字符串形式的響應數據。
responseXML	獲得 XML 形式的響應數據。

4.監聽readystate屬性

onreadystatechange	存儲函數（或函數名），每當 readyState 屬性改變時，就會調用該函數。
readyState	
存有 XMLHttpRequest 的狀態。從 0 到 4 發生變化。

0: 請求未初始化
1: 服務器連接已建立
2: 請求已接收
3: 請求處理中
4: 請求已完成，且響應已就緒
status	200: "OK"
404: 未找到頁面

5.完整請求信息（包含完整請求及加載該連接數據方式）

var request;
if (window.XMLHttpRequest) {
　　request = new XMLHttpRequest()
} else {
　　request = new ActiveXObject('Microsoft.XMLHTTP');
}
request.open("GET","https://jsonplaceholder.typicode.com/posts", true);
request.setRequestHeader("Content-Type", "application/x-www-form-urlencoded")
request.onreadystatechange=function(){
if (request.readyState===4&&request.status===200) {
　　var data=request.responseText;
　　//json字符串轉換成為json對象
   data=JSON.parse(data);
　　var html = ''					
　　for (var i =0; i< data.length; i++) {
　　　　if (data[i].userId == 1) {
　　　　　　html += '<div><h2>' +data[i].userId +'_'+ data[i].id + '.' + data[i].title + '</h2>';
　　　　　　html +='<p>' + data[i].body + '</p></div>'
　　　　}
　　}
　　　　d.innerHTML = html;
　　　　console.log(1 + '加載成功')
	} else {
	　　console.log(2 + '加載失敗')
　　　　}
　　}                    
//發送數據
request.send();

（以上程序未封裝）

總結：（摘自 公眾號 web前端技術圈）

其實，實現ajax操作非常的簡單，我們現在是以異步加載的效果為例;所以同學們在學習的時候可以按照下面的幾個步聚去寫：

AJAX請求步驟

1、創建ajax對象

2、配置ajax，創建http連接

3、創建ajax對象變化的監聽

4、向服務器發送請求

5、接收服務器端的響應數據

（有錯誤麻煩給我指出來謝謝）