這裡先給大家一個有實際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、接收伺服器端的響應資料

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