概述

XMLHttpRequest.readyState 屬性返回一個 XMLHttpRequest 代理當前所處的狀態。一個 XHR 代理總是處於下列狀態中的一個：

程式碼–代理物件的狀態

準備一個後臺檔案json字串，通過前後臺互動理解readyState

• 狀態為0

	var xhr = new XMLHttpRequest();
	console.log(xhr.readyState) //0
	//建立XHR，即請求初始化
 

• 狀態為1
  後臺的檔案這裡是data.php

	xhr.open('get','data.php')
	console.log(xhr.readyState) //1
	// 呼叫open()方法，建立與伺服器埠的特定連結

• 狀態為2

xhr.send()
	xhr.addEventListener('readystatechange', function(){
		switch(xhr.readyState){
			case 2:
			console.log(this.readyState)  //2
			//send()方法已經呼叫，可以拿到響應頭了
	   		console.
 
log(this.responseText)  //此時尚未拿到
	   		console.log(this.getAllResponseHeaders())
//date: Fri, 28 Dec 2018 02:28:34 GMT
//server: Apache/2.2.21 (Win32) PHP/5.3.10
//connection: Keep-Alive
//x-powered-by: PHP/5.3.10
//content-length: 380
//keep-alive: timeout=5, max=99
//content-type: text/html

	   		break;
		}
	})

• 狀態為3

			case 3:
			console.log(this.readyState)  //3
	   		console.log(this.responseText)  //拿到響應體，可能是不完整的
	   		break;

看一下拿到的json

後面很明顯是斷開了，是不完整；資料少，網速快等等，也有可能是完整，所以測試可以調一下慢網速看看

• 狀態為4

case 4:
			console.log(this.readyState)  //4
	   		console.log(this.responseText)  //響應體下載完成，responseText可以使用
	   		console.log(document.readyState)
	   		var obj = JSON.parse(this.responseText)
	   		break;

最後拿到的資料是完整的

使用我們JSON.parse轉換成物件使用

console.log(obj)