Skip to content

Instantly share code, notes, and snippets.

@mapserver2007
Created June 22, 2011 09:46
Show Gist options
  • Save mapserver2007/1039781 to your computer and use it in GitHub Desktop.
Save mapserver2007/1039781 to your computer and use it in GitHub Desktop.
エラー処理可能なJSONP
/**
* 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;
}
}
})();
}
}
});
<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