原生JS实现Ajax和JSONP跨域请求

背景：

对接身份证录入和门锁卡号录入设备中，安装驱动完成后，提供的接口服务是http://localhost:8099/?cmd=readbcardid&charset=gbk，返回的数据格式如下：

要求在vue项目上实现JSONP跨域请求，不想因此加载第三方资源，于是利用原生JS构建简单的AJAX，还有跨域请求JSONP的实现

AJAX的根本是XMLHttprequest,而一个完整的AJAX请求一般包括以下步骤：

实例化XMLHttpRequest对象
连接服务器
发送请求
接收响应数据

下面直接上代码

ajax.js

const Ajax = (object) => {object = object || {};object.data = object.data || {};//判断请求类型为AJAX或者JSONPlet json = object.jsonp ? Jsonp(object) : ajax(object);//设置ajax方法function ajax(object) {// 1.设置请求方式：如果没有制定则默认为GETobject.type = (object.type || 'GET').toUpperCase();// 2.设置data数据的格式化object.data = formateObject(object.data);// 3.实例化XMLHttpRequest对象var xhr = window.XMLHttpRequest ? new XMLHttpRequest() : new ActiveXObject('Microsoft.XMLHTTP');// 4.监听事件，只要readyState改变，就会调用readystatechange事件xhr.onreadystatechange = function(){// readyState属性表示请求/响应过程的当前活动阶段，4为完成，已经接收到全部响应数据if(xhr.readyState == 4) {let status = xhr.status;// status : HTTP响应的状态码，2开头表示成功if(status >=200 && status < 300){let response = '';// 判断接受数据的内容类型let type = xhr.getResponseHeader('Content-type');if(type.indexOf('xml') !== -1 && xhr.responseXML) {response = xhr.responseXML; //Document对象响应} else if(type === 'application/json') {response = JSON.parse(xhr.responseText); //JSON响应} else {response = xhr.responseText; //字符串响应};// 成功回调函数object.success && object.success(response);}else {object.error && object.error(response);}}}// 5.连接和传输数据if(object.type == 'GET') {// 三个参数：请求方式、请求地址(get方式时，传输数据是加在地址后的)、是否异步请求(同步请求的情况极少)；xhr.open(object.type, object.url + '?' + object.data, true);xhr.send(null);} else {xhr.open(object.type, object.url, true);//必须，设置提交时的内容类型xhr.setRequestHeader('Content-Type', 'application/x-www-form-urlencoded; charset=UTF-8');// 传输数据xhr.send(object.data);}}//设置Jsonp方法function Jsonp(object) {// 创建script标签并加入到页面中let callbackName = object.jsonp,head = document.getElementsByTagName('head')[0];// 设置传递给后台的回调参数名object.data['callback'] = callbackName;let data = formateObject(object.data),script = document.createElement('script');head.appendChild(script);// 创建JSONP的回调函数//创建jsonp回调函数window[callbackName] = function(json) {head.removeChild(script);clearTimeout(script.timer);window[callbackName] = null;object.success && object.success(json);};// 发送请求script.src = object.url + '?' + data;//为了得知此次请求是否成功，设置超时处理if(object.time) {script.timer = setTimeout(function() {window[callbackName] = null;head.removeChild(script);object.error && object.error({message: '请求超时'});}, object.time);}}//data的格式化方法function formateObject(data){if(data){let arr = [];for(let name in data){//encodeURIComponent() ：用于对 URI 中的某一部分进行编码arr.push(encodeURIComponent(name) + '=' + encodeURIComponent(data[name]));}//为了防止缓存，在后面添加一个随机数arr.push('randomV=' + randomNumber());return arr.join('&');}else {console.error('无法格式化请求数据')}}//生成随机数的方法function randomNumber(){return Math.floor(Math.random()*10000+404);}}export default Ajax;

使用

import Ajax from "@/utils/ajax"
// 身份证录入
export async function readIDCard(callback = () => {}) {try {Ajax({url : 'http://localhost:8099/',type : 'GET',jsonp : 'fnCallback',data : {cmd: "readbcardid",charset: "gbk",},time: 5000,success: (data) => {if (!data) {return callback({code: 500,msg: "读卡失败，请重试"});}switch (data.resultFlag) {case 0: // 正常读卡return callback({code: 200,msg: "读卡成功",data: data.resultContent.cardid || ""});case -1: // 无卡return callback({code: 500,msg: "请将身份证置于读卡器上"});case -2: // 读卡失败return callback({code: 500,msg: "读卡失败，请检查卡是否置于读卡器上"});default:return callback({code: 500,msg: "读卡失败，请检查卡是否置于读卡器上"});}},error: function(ex){const {message} = ex;return callback({code: 500,msg: message});}})} catch (ex) {return callback({code: 500,msg: "读卡失败，请重试"});}
}

原生JS实现Ajax和JSONP跨域请求相关推荐

js通过jquery的jsonp跨域请求
js部分: function getMatch(page){$.ajax({url:"http://gms.sgamer.com/index.php?g=Dota2&m=Api&am ...
ajax之jsonp跨域请求
前端ajax请求代码后台php处理代码
JS的jsonp是什么？5分钟学会jsonp跨域请求
一.jsonp是什么? jsonp是解决跨域请求的一种技术.浏览器为了防止CSRF攻击会采用同源策略(协议/主机/端口均相同)限制,对非同源发起http请求(即跨域请求)会被浏览器阻止. 二.json ...
.net学习之母版页执行顺序、jsonp跨域请求原理、IsPostBack原理、服务器端控件按钮Button点击时的过程、缓存、IHttpModule 过滤器...
1.WebForm使用母版页后执行的顺序是先执行子页面中的Page_Load,再执行母版页中的Page_Load,请求是先生成母版页的控件树,然后将子页面生成的控件树填充到母版页中,最后输出 2.We ...
JSONP跨域请求数据报错 “Unexpected token :”的解决办法
原文 http://www.cnphp6.com/archives/65409 Jquery使用ajax方法实现jsonp跨域请求数据的时候报错 "Uncaught SyntaxError ...
轻松搞定JSONP跨域请求
轻松搞定JSONP跨域请求一.同源策略要理解跨域,先要了解一下"同源策略".所谓同源是指,域名,协议,端口相同.所谓"同源策略",简单的说就是基于安全考虑, ...
【漏洞利用】JSONP跨域请求漏洞挖掘、利用详解
参考文章轻松搞定JSONP跨域请求 jsonp跨域原理,使用以及同源策略跨域漏洞丨JSONP和CORS跨域资源共享 Tag: Ref: [[019.同源策略]] 本片文章仅供学习使用,切勿触犯法律 ...
Ajax的Post跨域请求
Ajax的Post跨域请求什么是跨域请求同协议,同ip,同端口视为一个域,两个域之间互相访问就是跨域访问请求. 根据浏览器的同源策略,一个域中的脚本只具有访问本域资源的权限,无法访问其他域的资源. ...
Jsonp 跨域请求实例
Jsonp 跨域请求实例关于jsonp的一个实例,其实自己也不是很了解,今天下午稍微研究了一下: 简单来说,jsonp就是为了两个不同网站之间数据传递而产生的,主要用于js脚本,因为浏览器本身是禁止 ...

原生JS实现Ajax和JSONP跨域请求

原生JS实现Ajax和JSONP跨域请求相关推荐

最新文章

热门文章