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