Created
June 22, 2011 09:46
-
-
Save mapserver2007/1039781 to your computer and use it in GitHub Desktop.
エラー処理可能なJSONP
This file contains bidirectional Unicode text that may be interpreted or compiled differently than what appears below. To review, open the file in an editor that reveals hidden Unicode characters.
Learn more about bidirectional Unicode characters
/** | |
* HTTP関連モジュール | |
*/ | |
var Http = Module.create({ | |
/** | |
* 非同期通信を実行する | |
* @param url 送信先URL | |
* @param params 送信パラメータ | |
* @param optArgs 通信パラメータ | |
* @param successCallback 成功時コールバック関数 | |
* @param optErrorCallback 失敗時コールバック関数 | |
* @param optStartFunc 処理開始前に実行する関数 | |
* @param optEndFunc 処理完了後に実行する関数 | |
*/ | |
xhr: function(url, | |
params, | |
optArgs, | |
successCallback, | |
optErrorCallback, | |
optStartFunc, | |
optEndFunc) { | |
var funcCaller = function(f, args) { | |
if (typeof f === "function") { | |
f.call(null, args); | |
} | |
}; | |
var callbackCaller = function(callback, response, optArgs) { | |
if (typeof callback === "function") { | |
callback.call(this, response, optArgs); | |
end(); | |
} | |
else { | |
end(); | |
throw response.toString(); | |
} | |
}; | |
var start = function() { funcCaller(optStartFunc, optArgs); }, | |
end = function() { funcCaller(optEndFunc, optArgs); }, | |
success = function(callback, response, args) { callbackCaller(callback, response, args); }, | |
error = function(callback, response, args) { callbackCaller(callback, response, args); }; | |
start(); | |
// jQueryが読み込まれていないときはホスティング先から読み込む | |
if (typeof jQuery === "undefined") { | |
if (typeof this.loadJQuery === "undefined") { | |
if (typeof Utils !== "undefined") { | |
Utils.loadJQuery(); | |
} | |
else { | |
throw "require jQuery."; | |
} | |
} | |
else { | |
this.loadJQuery(); | |
} | |
} | |
// JSONPの場合はmix.js独自処理を実行 | |
if (optArgs.dataType === "jsonp") { | |
var iframe = document.createElement("iframe"); | |
iframe.style.display = "none"; | |
document.body.appendChild(iframe); | |
var doc = iframe.contentWindow.document; | |
var jsonpCallback = optArgs.jsonp || "callback"; | |
params[jsonpCallback] = "jsonp" + (~~(new Date() / 1000)); | |
var qlist = []; | |
for (var key in params) { | |
qlist.push(key + "=" + params[key]); | |
} | |
url += "?" + qlist.join("&") | |
var onload = function() { | |
if (typeof doc["jsonObject"] !== "undefined") { | |
success(successCallback, doc["jsonObject"], optArgs.args); | |
} | |
else if (typeof optErrorCallback !== "undefined") { | |
error(optErrorCallback, null, optArgs.args); | |
} | |
}; | |
// for IE | |
if (iframe.readyState) { | |
iframe.onreadystatechange = function() { | |
if (this.readyState === "complete") { | |
onload(); | |
} | |
} | |
} | |
// for modern browsers | |
else { | |
iframe.onload = onload; | |
} | |
doc.open(); | |
doc.write('<script type="text/javascript">' | |
+ 'function ' + params[jsonpCallback] + '(response) { document["jsonObject"] = response; }' | |
+ '</script>' | |
+ '<script type="text/javascript" src="' + url + '"></script>'); | |
doc.close(); | |
} | |
else { | |
// 動的にjQueryを読み込んだときは遅延ロードする | |
(function() { | |
var f = arguments.callee; | |
try { | |
$.ajax({ | |
type: optArgs.type || "post", | |
dataType: optArgs.dataType || "json", | |
data: params || {}, | |
cache: optArgs.cache || true, | |
url: url, | |
success: function(data, dataType) { | |
success(successCallback, data, optArgs.args); | |
}, | |
error: function(XMLHttpRequest, textStatus, errorThrown) { | |
error(optErrorCallback, textStatus, optArgs.args); | |
} | |
}); | |
} | |
catch(e) { | |
if (e.message === "$ is not defined") { | |
setTimeout(function() { f(); }, 100); | |
} | |
else { | |
throw e; | |
} | |
} | |
})(); | |
} | |
} | |
}); |
This file contains bidirectional Unicode text that may be interpreted or compiled differently than what appears below. To review, open the file in an editor that reveals hidden Unicode characters.
Learn more about bidirectional Unicode characters
<html> | |
<head> | |
<script type="text/javascript" charset="UTF-8" src="mix.js"></script> | |
<script type="text/javascript" charset="UTF-8" src="mix.modules.js"></script> | |
<script> | |
function start() { | |
var obj = Module.create({}).mix(Http, Utils); | |
var url = "http://localhost:3000/test.json"; | |
var params = { | |
"key": "xxxxxxxxxxxxxxxx" | |
}; | |
obj.xhr( | |
url, | |
params, | |
{dataType: "jsonp", jsonp: "callback"}, // jsonpは省略可 | |
function(data) { | |
document.getElementById("result").innerHTML += "success!<br>"; | |
}, | |
function() { | |
document.getElementById("result").innerHTML += "error!<br>"; | |
}, | |
function() { | |
document.getElementById("result").innerHTML += "start!<br>"; | |
}, | |
function() { | |
document.getElementById("result").innerHTML += "end!<br>"; | |
} | |
); | |
} | |
</script> | |
</head> | |
<body onload="start();"> | |
test | |
<div id="result"></div> | |
</body> | |
</html> |
Sign up for free
to join this conversation on GitHub.
Already have an account?
Sign in to comment