原生JS實作Ajax和JSONP跨域請求

鑳屾櫙锛?

瀵規帴韬喚璇佸綍鍏ュ拰闂ㄩ攣鍗″彿褰曞叆璁懼涓紝瀹夎椹卞姩瀹屾垚鍚庯紝鎻愪緵鐨勬帴鍙ｆ湇鍔℃槸http://localhost:8099/?cmd=readbcardid&charset=gbk锛岃繑鍥炵殑鏁版嵁鏍煎紡濡備笅锛?

瑕佹眰鍦╲ue椤圭洰涓婂疄鐜癑SONP璺ㄥ煙璇鋒眰锛屼笉鎯沖洜姝ゅ姞杞界涓夋柟璧勬簮锛屼簬鏄埄鐢ㄥ師鐢烰S鏋勫緩绠€鍗曠殑AJAX锛岃繕鏈夎法鍩熻姹侸SONP鐨勫疄鐜?

AJAX鐨勬牴鏈槸XMLHttprequest,鑰屼竴涓畬鏁寸殑AJAX璇鋒眰涓€鑸寘鎷互涓嬫楠わ細

瀹炰緥鍖朮MLHttpRequest瀵矽薄

杩炴帴鏈嶅姟鍣? 鍙戦€佽姹? 鎺ユ敹鍝嶅簲鏁版嵁

涓嬮潰鐩存帴涓婁唬鐮?

ajax.js

const Ajax = (object) => {
	object = object || {};
	object.data = object.data || {};
	//鍒ゆ柇璇鋒眰绫誨瀷涓篈JAX鎴栬€匤SONP
	let json = object.jsonp ? Jsonp(object) : ajax(object);

	//璁劇疆ajax鏂規硶
	function ajax(object) {
	   // 1.璁劇疆璇鋒眰鏂瑰紡锛氬鏋滄病鏈夊埗瀹氬垯榛樿涓篏ET
	   object.type = (object.type || 'GET').toUpperCase();
	   // 2.璁劇疆data鏁版嵁鐨勬牸寮忓寲
	   object.data = formateObject(object.data);
	   // 3.瀹炰緥鍖朮MLHttpRequest瀵矽薄
	   var xhr = window.XMLHttpRequest ? new XMLHttpRequest() : new ActiveXObject('Microsoft.XMLHTTP');
	   // 4.鐩戝惉浜嬩歡锛屽彧瑕乺eadyState鏀瑰彉锛屽氨浼氳皟鐢╮eadystatechange浜嬩歡
	   xhr.onreadystatechange = function(){
		   // readyState灞炴€ц〃绀鴻姹?鍝嶅簲杩囩▼鐨勫綋鍓嶆椿鍔ㄩ樁娈碉紝4涓哄畬鎴愶紝宸茬粡鎺ユ敹鍒闆叏閮ㄥ搷搴旀暟鎹?		   if(xhr.readyState == 4) {
			   let status = xhr.status;
			   // status : HTTP鍝嶅簲鐨勭姸鎬佺爜锛?寮€澶磋〃绀烘垚鍔?			   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: "璇誨崱澶辮觸锛岃閲嶈瘯"
        });
    }
}