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

 2015年08月13日    8146     声明


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