网站推广公司 wordpress,四川建设人才官方网站,网业升级坊问,凡科做网站类型应该做哪个JavaScirpt中的XMLHttpRequest对象提供了对 HTTP 协议的完全访问#xff0c;使用该对象可以在不刷新页面的情况与服务器交互数据。XMLHttpRequest是实现AJAX技术的关键对象#xff0c;本站曾整理过一篇介绍该对象的文章#xff1a; JS使用XMLHttpRequest对象与服务器进行数据…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()将其序列化成字符串。
