js 中的 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() 将其序列化成字符串或者 JSON.parse(xhr.responseText)) 转换为相应的对象