背景：

對接身份證錄入和門鎖卡號錄入設備中，安裝驅動完成后，提供的接口服務是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跨域请求的全部內容，希望文章能夠幫你解決所遇到的問題。

如果覺得生活随笔網站內容還不錯，歡迎將生活随笔推薦給好友。