JavaScirpt中的XMLHttpRequest對象提供了對 HTTP 協議的完全訪問，使用該對象可以在不刷新頁面的情況與服務器交互數據。XMLHttpRequest是實現AJAX技術的關鍵對象，本站曾整理過一篇介紹該對象的文章： JS使用XMLHttpRequest對象與服務器進行數據交互 ，今天將介紹使用XMLHttpRequest對象收發JSON格式數據。

應用場景

在工作中有一個應用需要使用驗證碼，在用戶輸入驗證碼后，使用AJAX技術將用戶輸入內容提交到服務器端進行驗證。服務器端數據的收發都是基于JSON格式的，因此，在發送數據時需要設置數據的請求格式，收到服務器響應內容后也要對數據進行處理。

關鍵代碼

var captcha = document.getElementsByName('captcha')[0];  //用戶輸入驗證碼的input
captcha.onchange = function(){var xhr = new XMLHttpRequest();//使用HTTP POST請求與服務器交互數據xhr.open("POST", "/captcha", true);//設置發送數據的請求格式xhr.setRequestHeader('content-type', 'application/json');xhr.onreadystatechange = function() {if (xhr.readyState == 4) {//根據服務器的響應內容格式處理響應結果if(xhr.getResponseHeader('content-type')==='application/json'){var result = JSON.parse(xhr.responseText);	//根據返回結果判斷驗證碼是否正確if(result.code===-1){alert('驗證碼錯誤');}} else {console.log(xhr.responseText);}}}var sendData = {captcha:this.value};//將用戶輸入值序列化成字符串xhr.send(JSON.stringify(sendData));
}

相關代碼解釋

xhr.open(“POST”, “/captcha”, true)：這一句傳入了三個參數，第一個參數POST是HTTP請求類型為。/captcha是請求路由，即：請求網址。true表示這是一個異步請求。

xhr.setRequestHeader(‘content-type’, ‘application/json’)：這一句實際上是在HTPP請求的header中添加content-type。

xhr.getResponseHeader(‘content-type’)===‘application/json’：這一句是判斷服務器的響應內容格式，如果是’application/json’格式就說明可以轉換為JSON對象，之后客戶端就可以按JSON對象格式進行數據處理。

xhr.send(JSON.stringify(sendData))：xhr.send()方法要求傳入數據格式是字符串或Document對象，但傳入數據是一個Object，所以需要使用JSON.stringify()將其序列化成字符串。