JS使用XMLHttpRequest对象POST收发JSON格式数据

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()将其序列化成字符串。