您好,登錄后才能下訂單哦!
最近在學ajax和跨域,于是就自己封裝了一個,雖然有點粗糙但還是可以用的。其實jsonp的本質就是:動態創建script標簽,然后通過src屬性發送跨域請求,然后服務器端響應的數據格式為【函數調用(foo(實參))】,所以在發送請求之前必須先聲明一個函數,并且函數的名字與參數中傳遞的名字要一致。這里聲明的函數是由服務器響應的內容(實際就是一段js代碼-函數調用)來調用。
其他的就不多說了,直接上代碼。
'use strict'; function ajax(obj){ var defaults = { type:'get', url:'#', dataType:'text', jsonp:'callback', data:{}, async:true, success:function(data){console.log(data);} }; for(var k in obj){ defaults[k] = obj[k]; } if(defaults.dataType == 'jsonp') { //調用jsonp ajaxForJsonp(defaults); } else { //調用ajax json ajaxForJson(defaults); } } //json數據格式 function ajaxForJson(defaults){ //1、創建XMLHttpRequset對象 var xhr = null; if(window.XMLHttpRequest){ xhr = new XMLHttpRequest(); } else { xhr = new ActiveXObject("Microsoft.XMLHTTP"); } var param = ''; for(var key in defaults.data) { param += key + '='+ defaults.data[key] + '&'; } if(param){ param = param.slice(0, param.length-1); } // 處理get請求參數并且處理中文亂碼問題 if(defaults.type == 'get') { defaults.url += '?' + encodeURI(param); } //2、準備發送(設置發送的參數) xhr.open(defaults.type,defaults.url,defaults.async); // 處理post請求參數并且設置請求頭信息(必須設置) var data = null; if(defaults.type == 'post') { data = param; //設置請求頭 xhr.setRequestHeader("Content-Type","application/x-www-form-urlencoded"); } // 3、執行發送動作 xhr.send(data); //處理同步請求,不會調用回調函數 if(!defaults.async) { if(defaults.dataType == 'json'){ return JSON.parse(xhr.responseText); } else { return xhr.responseText; } } //// 4、指定回調函數(處理服務器響應數據) xhr.onreadystatechange = function() { if(xhr.readyState == 4){ if(xhr.status == 200){ var data = xhr.responseText; if(defaults.dataType == 'json'){ data = JSON.parse(data); } defaults.success(data); } } } } //跨域jsonp function ajaxForJsonp(defaults){ //cbName默認的是回調函數名稱 var cbName = 'jQuery' + ('1.12.2' + Math.random()).replace(/\D/g,'') + '_' + (new Date().getTime()); if(defaults.jsonpCallback) { cbName = defaults.jsonpCallback; } //這里就是回調函數,調用方式:服務器響應內容來調用 //向window對象中添加一個方法,方法名是變量cname的值 window[cbName] = function(data) { defaults.success(data);//這里success的data是實參 } var param = ''; for(var key in defaults.data){ param += key + '=' + defaults.data[key] + '&'; } if(param){ param = param.slice(0, param.length-1); param = '&' + param; } var script = document.createElement('script'); script.src = defaults.url + '?' + defaults.jsonp + '=' + cbName + param; var head = document.getElementsByTagName('head')[0]; head.appendChild(script); }
以上這篇基于ajax和jsonp的原生封裝(實例)就是小編分享給大家的全部內容了,希望能給大家一個參考,也希望大家多多支持億速云。
免責聲明:本站發布的內容(圖片、視頻和文字)以原創、轉載和分享為主,文章觀點不代表本網站立場,如果涉及侵權請聯系站長郵箱:is@yisu.com進行舉報,并提供相關證據,一經查實,將立刻刪除涉嫌侵權內容。