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));
}

JS使用XMLHttpRequest对象POST收发JSON格式数据相关推荐

JSON数据格式----- JavaScript与JSON、JavaScript的JSON对象、构建JSON格式数据
JavaScript与JSON JSON是一种语法,用来序列化对象.数组等的.它只是基于JavaScript语法 [外链图片转存失败,源站可能有防盗链机制,建议将图片保存下来直接上传(img-zWMc ...
JavaScript解析json格式数据简单示例
JavaScript解析json格式数据简单示例本文通过for循环来获取json结点数据,需要的朋友可以参考以下这串json数据用来存储预加载的图片路径: 代码如下: var imgData = [ ...
[工具库]JOJSONBuilder工具类——一键把多个bean对象数据转换为JSON格式数据
本人大四即将毕业的准程序员(JavaSE.JavaEE.android等)一枚,小项目也做过一点,于是乎一时兴起就写了一些工具. 我会在本博客中陆续发布一些平时可能会用到的工具. 代码质量可能不是很好 ...
Node.js：项目中的 package.json 格式
1. node.js 项目包下的 package.json : 实例: {"name" : "chatroooms","version" : ...
ajax json 渲染 html,jQuery+Ajax+js实现请求json格式数据并渲染到html页面操作示例
本文实例讲述了jquery+ajax+js实现请求json格式数据并渲染到html页面操作.分享给大家供大家参考,具体如下: 1.先给json格式的数据: [ {"id":1,&q ...
php使用 js格式解析,JavaScript解析JSON格式数据的方法示例
本文实例讲述了JavaScript解析JSON格式数据的方法.分享给大家供大家参考,具体如下: 1.使用JavaScript提供的eval()函数function JsonText1() { var ...
对象序列化成JSON格式
json是一种轻量级的数据交换语言,将对象序列化为json格式,可以在网络上传输,且各个平台都有成熟的工具,可以很快的将json反序列化为对应语言所需要的格式. 将java对象序列化为json格式关键 ...
JS的Form表单转JSON格式
一.serialize()方法格式:var data = $("#formID").serialize(); 功能:将表单内容序列化成一个字符串. 注意:要使用params = ...
消息转换器之把返回来的对象转换成json格式
消息转换器之把返回来的对象转换成json格式这个是把数据库的数据通过对象返给前端,会出现下列没有转换的现象这个需要我们加入消息转换器进行转换,把Java对象转为json字符串,在配置类加入这段代码 ...

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

JS使用XMLHttpRequest对象POST收发JSON格式数据相关推荐

最新文章

热门文章