JavaScript中模擬實(shí)現(xiàn)jsonp
更新時(shí)間:2015年06月19日 09:55:57 投稿:junjie
這篇文章主要介紹了JavaScript中模擬實(shí)現(xiàn)jsonp,本文直接給出實(shí)現(xiàn)代碼,代碼中包含詳細(xì)注釋,需要的朋友可以參考下
function prescript(s) {
if (s.cache === undefined) {
s.cache = false;
}
if (s.crossDomain) {
s.type = "GET";
}
}
function prejsonp(s, originalSettings, jqXHR) {
// 給回調(diào)函數(shù)命名
var callbackName = s.jsonpCallback
s.url += (/(?:)/.test(s.url) ? "&" : "?") + s.jsonp + "=" + callbackName;
// 腳本執(zhí)行后使用數(shù)據(jù)轉(zhuǎn)換器來檢索json
// 提供給代碼獲取服務(wù)器的是據(jù)
s.getData = function() {
if (!responseContainer) {
jQuery.error(callbackName + " was not called");
}
return responseContainer[0];
};
//修改處理機(jī)制
s.dataTypes[0] = "json";
// 創(chuàng)建一個(gè)全局函數(shù)
overwritten = window[callbackName];
//用來收集服務(wù)器給的數(shù)據(jù)
window[callbackName] = function() {
responseContainer = arguments;
};
return "script";
}
/**
* jsonp的預(yù)先處理
*/
function inspectPrefiltersOrTransportsA(options, originalOptions, jqXHR) {
//預(yù)處理jsonp
var dataTypeOrTransport = prejsonp(options, originalOptions, jqXHR)
//擴(kuò)充dataTypes
options.dataTypes.unshift(dataTypeOrTransport);
//預(yù)處理script類型
prescript(options)
}
/**
* 分發(fā)器
* @return {[type]} [description]
*/
function inspectPrefiltersOrTransportsB(s, originalOptions, jqXHR) {
return {
send: function(_, complete) {
var script = jQuery("<script>").prop({
async: true,
charset: s.scriptCharset,
src: s.url
}).on(
"load error",
callback = function(evt) {
script.remove();
callback = null;
if (evt) {
complete()
}
}
);
//<script async="" src="http://192.168.1.113:8080/github/jQuery/jsonp.php
document.head.appendChild(script[0]);
}
}
}
/**
* 模擬ajax的 jsonp請求
* @param {[type]} options [description]
* @return {[type]} [description]
*/
function createAjax(options) {
if (typeof url === "object") {
options = url;
url = undefined;
}
options = options || {};
/**
* 參數(shù)
* jQuery.ajaxSetup 是默認(rèn)參數(shù)
* @type {[type]}
*/
var s = jQuery.ajaxSetup({}, options);
// Deferreds
// 異步機(jī)制
var deferred = jQuery.Deferred();
var completeDeferred = jQuery.Callbacks("once memory");
/**
* 實(shí)際返回的ajax對象
* @type {Object}
*/
var jqXHR = {}
// 把jqXHR對象轉(zhuǎn)化promise對象,幷加入complete、success、error方法
deferred.promise(jqXHR).complete = completeDeferred.add;
//別名
jqXHR.success = jqXHR.done;
jqXHR.error = jqXHR.fail;
s.dataTypes = jQuery.trim(s.dataType || "*").toLowerCase().match(/(?:)/) || [""];
//預(yù)處理
inspectPrefiltersOrTransportsA(s, options, jqXHR);
for (i in {
success: 1,
error: 1,
complete: 1
}) {
jqXHR[i](s[i]);
}
/**
* 分發(fā)器
*/
transport = inspectPrefiltersOrTransportsB(s, options, jqXHR);
function done(status, nativeStatusText, responses, headers) {
console.log(s,s.getData())
}
//發(fā)送請求
transport.send(s, done);
return jqXHR;
}
function show(data){
$('body').append('<li>'+ data +'</li>');
}
/**
* 數(shù)據(jù)回調(diào)接收
* @return {[type]} [description]
*/
function flightHandler(){
}
$("#test").click(function(){
//執(zhí)行一個(gè)異步的HTTP(Ajax)的請求。
var ajax = createAjax({
url: 'http://192.168.1.113:8080/github/jQuery/jsonp.php',
data: {
'action': 'aaron'
}, // 預(yù)傳參的數(shù)組
dataType: 'jsonp', // 數(shù)據(jù)類型
jsonp: 'callback', // 指定回調(diào)函數(shù)名,與服務(wù)器端接收的一致,并回傳回來
jsonpCallback:flightHandler,
success: function() {
show('局部事件success')
}
})
})
相關(guān)文章
微信小程序?qū)崿F(xiàn)人臉識(shí)別登陸的示例代碼
這篇文章主要介紹了微信小程序?qū)崿F(xiàn)人臉識(shí)別登陸的示例代碼,文中通過示例代碼介紹的非常詳細(xì),對大家的學(xué)習(xí)或者工作具有一定的參考學(xué)習(xí)價(jià)值,需要的朋友們下面隨著小編來一起學(xué)習(xí)學(xué)習(xí)吧2019-04-04
Javscript調(diào)用iframe框架頁面中函數(shù)的方法
這篇文章主要介紹了Javscript調(diào)用iframe框架頁面中函數(shù)的方法,可實(shí)現(xiàn)iframe之間傳值或修改值,是非常實(shí)用的技巧,需要的朋友可以參考下2014-11-11
javascript動(dòng)畫效果打開/關(guān)閉層
用javascript實(shí)現(xiàn)打開層和關(guān)閉層的效果,原理不錯(cuò),學(xué)習(xí),記錄好2008-06-06
js采用concat和sort將N個(gè)數(shù)組拼接起來的方法
這篇文章主要介紹了js采用concat和sort將N個(gè)數(shù)組拼接起來的方法,涉及JavaScript針對數(shù)組的合并與排序操作相關(guān)技巧,需要的朋友可以參考下
2016-01-01
JavaScript forEach中return失效問題解決方案
這篇文章主要介紹了JavaScript forEach中return失效問題解決方案,文中通過示例代碼介紹的非常詳細(xì),對大家的學(xué)習(xí)或者工作具有一定的參考學(xué)習(xí)價(jià)值,需要的朋友可以參考下
2020-06-06 
