背景：
对接身份证录入和门锁卡号录入设备中，安装驱动完成后，提供的接口服务是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: "读卡失败，请重试"});}}
