概要
Javascript では通常ドメインを乗り越えるアクセス，即ちクロスドメインなアクセスが認められていない．そこで GET リクエストで JSONP を使ったり，Flash を使ったりして，その制限を乗り越える方法が幾つか有る．実際に jQuery ではクロスドメイン GET に JSONP を用いる事が出来る．
しかし，クロスドメイン POST は jQuery の機能としては用意されていない．幾つかその解決策は存在するのだが，特定の URL に POST でアクセスするだけなので，フォームとインラインフレームを用いて POST リクエストを送る方法を利用することにした．この方法は，リクエストを投げっぱなしになるのでリクエスト結果を取得できないという問題が有るが，その代わり実装が単純明快である．
早速 jQuery のプラグインを書いてみた．少々冗長な気もするが，気にしないことにする．
コード
$.extend({
xpost : function(url, callback) {
var name = 'dummyxpostframe';
var flush = function() {
$('form[target=' + name + ']').remove();
$('iframe[name=' + name + ']').remove();
}
var iframe = $('<iframe />').attr('name', name).hide().appendTo('body');
if(typeof callback == 'function') iframe.load(callback);
iframe.load(flush);
$('<form method="POST" />').attr('action', url).attr('target', name)
.hide().appendTo('body').submit();
}
});
ダウンロード
- jQuery.xpost.min.js (YUI Compressor でコードを圧縮したもの)
- jQuery.xpost.js
使い方
jQuery と共に ｊQuery.xpost.min.js またはjQuery.xpost.js をロード．
$.xpost(url, callback)
- url : POST リクエストを送る URL
- callback : リクエスト結果を受信した時に実行される関数 （省略可能）
- 面倒だという理由で data を未実装．ToDo．
ライセンス
パブリックドメイン
実装
- ターゲットとなる隠しインラインフレームを作成
- コールバック関数が指定されていればインラインフレームのロードイベントハンドラに指定
- インラインフレームのロードイベントハンドラでインラインフレームとフォームを消すように設定
- インラインフレームをターゲットにした POST フレームを作成
- POST 送信