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

本文来自互联网用户投稿,该文观点仅代表作者本人,不代表本站立场。本站仅提供信息存储空间服务,不拥有所有权,不承担相关法律责任。如若转载,请注明出处:http://www.mzph.cn/news/249347.shtml

如若内容造成侵权/违法违规/事实不符,请联系多彩编程网进行投诉反馈email:809451989@qq.com,一经查实,立即删除!

相关文章

ShopXO本地化部署安装之centeros 安装Apache2.4.6 + PHP7.0.33 + Mysql5.7.25环境

对于centerOS安装PHP环境,目前网上的帖子都已经比较成熟,具体步骤大家可以自行搜索查看,但是在安装过程中遇到的一些小细节,这些内容往往需要结合多个帖子才能找到答案,在这里简单记录一下。 细节一 如果使用的阿里云…

Spring Boot 扩展点应用之工厂加载机制

Spring 工厂加载机制,即 Spring Factories Loader,核心逻辑是使用 SpringFactoriesLoader 加载由用户实现的类,并配置在约定好的META-INF/spring.factories 路径下,该机制可以为框架上下文动态的增加扩展。 该机制类似于 Java SPI…

Vue.js使用-http请求

Vue.js使用-ajax使用 1.为什么要使用ajax 前面的例子,使用的是本地模拟数据,通过ajax请求服务器数据。 2.使用jquery的ajax库示例 new Vue({el: #app,data: {searchQuery: ,columns: [{name: name, iskey: true}, {name: age},{name: sex, dataSource:…

跨域(Cross-Domain) AJAX for IE8 and IE9

1、有过这样一段代码,是ajax $.ajax({url: "http://127.0.0.1:9001",type: "POST",data: JSON.stringify({"reqMsg":"12345"}),dataType: json,timeout: 1000 * 30,success: function (response) {if(response.n6){dosomet…

移动WEB的页面布局

随着移动互联网的日益普遍,现在移动版本的web应用也应用而生,那么在做移动web页面布局的过程中,应该注意哪些要点呢?现把个人的一些学习经验总结如下: 要点一、piexl 1px 2dp dp dpr dpi ppi 要点二、viewport io…

AnswerOpenCV(1001-1007)一周佳作欣赏

外国不过十一,所以利用十一假期,看看他们都在干什么。一、小白问题http://answers.opencv.org/question/199987/contour-single-blob-with-multiple-object/ Contour Single blob with multiple objectHi to everyone. Im developing an object shape id…

Mysql 开启远程连接

在日常的数据库的使用过程,往往会因为连接权限的问题搞得我们焦头烂额,今天我把我们在数据库连接上的几个误区简单做个记录。内容如下: 误区一:MYSQL密码和数据库密码的区别 mysql密码是我们在安装mysql服务是设置的密码&#xf…

基于jsp+servlet完成的用户注册

思考 : 需要创建实体类吗? 需要创建表吗 |----User 存在、不需要创建了!表同理、也不需要了 1.设计dao接口 package cn.javabs.usermanager.dao;import cn.javabs.usermanager.entity.User;/*** 用户的dao接口的设计* author Mryang**/ public interfa…

vue resource then

https://www.cnblogs.com/chenhuichao/p/8308993.html

云开发创建云函数

安装wx-server-sdk时候,终端报错如下: 解决方法: 运行:npm cache clean --force即可 转载于:https://www.cnblogs.com/moguzi12345/p/9758842.html

Java8新特性——函数式接口

目录 一、介绍 二、示例 (一)Consumer 源码解析 测试示例 (二)Comparator (三)Predicate 三、应用 四、总结 一、介绍 FunctionalInterface是一种信息注解类型,用于指明接口类型声明…

CSS3笔记之基础篇(一)边框

效果一、圆角效果 border-radius 实心上半圆: 方法:把高度(height)设为宽度(width)的一半,并且只设置左上角和右上角的半径与元素的高度一致(大于也是可以的)。 div {height:50px;/*是width…

JavaSE之Java基础(1)

1、为什么重写equals还要重写hashcode 首先equals与hashcode间的关系是这样的: 1、如果两个对象相同(即用equals比较返回true),那么它们的hashCode值一定要相同; 2、如果两个对象的hashCode相同,它们并不一…

bootstarp table

https://www.cnblogs.com/laowangc/p/8875526.html

高级组件——弹出式菜单JPopupMenu

弹出式菜单JPopupMenu,需要用到鼠标事件。MouseListener必须要实现所有接口,MouseAdapter是类,只写你关心的方法,即MouseAdapter实现了MouseListener中的方法 import javax.swing.*; import java.awt.*; import java.awt.event.Mo…

CSS3笔记之基础篇(二)颜色和渐变色彩

效果一、颜色之RGBA RGB是一种色彩标准,是由红(R)、绿(G)、蓝(B)的变化以及相互叠加来得到各式各样的颜色。RGBA是在RGB的基础上增加了控制alpha透明度的参数。 语法: color:rgba(R,G,B,A) 以上R、G、B三个参数,正整数值的取值…

19_03_26校内训练[魔法卡片]

题意 有n张有序的卡片,每张卡片上恰有[1,m]中的每一个数,数字写在正面或反面。每次询问区间[l,r],你可以将卡片上下颠倒,问区间中数字在卡片上方的并的平方和最大是多少。q,n*m≤1,000,000。 思考 一个很重要的性质,若…

vue 静态图片引入

https://blog.csdn.net/weixin_33862188/article/details/93325502

c:if test=/c:if 使用

1、页面引用<%taglib uri"http://java.sun.com/jsp/jstl/core" prefix"c"%> 2、整形判断&#xff1a; <c:if test"${TEST 1}"> </c:if> 3、判断非空&#xff1a; <c:if test"${empty TEST}"> TEST为空 <…

CSS3笔记之基础篇(三)文字与字体

要点一、text-overflow与word-wrap text-overflow&#xff1a;设置是否使用一个省略标记&#xff08;...&#xff09;标示对象内文本的溢出。 word-wrap&#xff1a;设置文本行为&#xff0c;当前行超过指定容器的边界时是否断开转行。 语法如下&#xff1a; 注意&#xff1…