Javascript非同期フォーム送信、画像アップロード、非同期シミュレーションとの互換性Ajaxテクノロジー_JavaScriptスキル

前書き:
一見、タイトルは非常に長いですが、実際には非同期フォーム送信という 1 つの機能に簡略化されており、アップロードできるのは非同期フォーム送信という大きな機能だけです。画像を作成し、ajax テクノロジーをシミュレートします (実際、この方法は、昔、ajax とのマルチブラウザー互換性を実現するために使用されていました。これは単なる懐かしさと遊びのためのテクノロジーです。) 次のコンテンツには、特定の js 基盤が必要です。そうしないと、理解がさらに難しくなります。
注:
これは私の bBank のメソッドです。ここで一般的なメソッドに抽出して説明します。
bBank フレームワークの紹介: http://www.cnblogs.com/bruceli/archive/2010/04/15/bBank.html
なぜ bBank について言及するかというと、次のメソッドでは bBank が Array を使用するためです。判定、文字列 HTML 変換標準 dom (前回の記事で紹介しました。クリックすると詳細が表示されます)、独自のメソッドを削除、CSS セレクターなので、慣れていない必要はありません。独自のメソッドを書いて置き換えることもできます。これらのメソッドbBank で直接使用することもできます。bBank をダウンロードしてソース コードを確認できます。
b$.type.isArray(args) は、配列であるかどうかを決定します。
b$.parseDom(strs) 文字列は、標準 DOM オブジェクト
b$('#bBankAsynFormSubmit_form_1b') に直接変換されます。 RemoveSelf() 自分自身を削除します
b$() CSS セレクター
原則:
コアは iframe を通じて非同期で完了することです。ページに非表示の iframe を配置します。このターゲットを非同期で送信する iframe に設定すると、実際にはその iframe が送信表示キャリアおよびその他のコンテンツとして使用されます。ページの更新はありません。
実際、原理は非常に単純です。iframe が表示キャリアとして使用されるため、送信されたページに戻り値がある場合、その戻り値が iframe の本体のコンテンツになります。 iframe 経由で本体を取得した後 内容から判断すると、これは非同期を実装するために使用された最も初期のメソッドです。
ajax は時間によってトリガーされます。ajax をシミュレートしたいので、イベントをトリガーする必要もあります。実際には、iframe の onload 読み込み完了イベントを使用するだけです。
実装:
コード:

コードをコピー コードは次のとおりです:

var asyn = {
formSubmit: function (args, action, func) {
this.clearContext();
var subArr = [ ];
var subArrT = [];
if (b$.type.isArray(args)) {
subArr = args>} else {
var タグ = args.tagName toLowerCase() ;
if (tag == "form") { for (var i = 0, num = args.childNodes.length; i else { subArr = [args]; }
}
//非同期フォームと ifroma
var objForm = document.createElement("form");アクション = アクション ;
objForm.target = "bBankAsynFormSubmit_iframe_1b";
objForm.method = "post"; ";
objForm.style.display = "none";
var objIframe = b$.parseDom('')[0];
//
のフォームに送信値を追加します(var i = 0, num = subArr.length; i if (!subArr[i].name && subArr[i].nodeType == 1 && subArr[i].tagName. toLowerCase() == "入力") subArr[i].name = "bBankAsynFormSubmit_input_1b_" i;
var input = subArr[i].cloneNode(true);
subArr[i ].parentNode.replaceChild(input, subArr[i]);
objForm.appendChild(subArr[i]);
}
//submit
document.body.appendChild(objIframe) );
document.body.appendChild(objForm);
//dispose
for (var i = 0, num = subArrT.length; i if (func) this.callBack = func;
complete: function () {
var responseText = "";
try {
var objIframe = document.getElementById("bBankAsynFormSubmit_iframe_1b");
if (objIframe.contentWindow) { responseText = objIframe.contentWindow.document.body. innerHTML; }
else {responseText = objIframe.contentDocument.document.body.innerHTML; }
} catch (err) { }
this.clearContext()
if (this.callBack) .callBack(responseText);
},
clearContext: function () {
if (b$('#bBankAsynFormSubmit_form_1b')) b$('#bBankAsynFormSubmit_form_1b').removeSelf(); if (b $('#bBankAsynFormSubmit_iframe_1b')) b$('#bBankAsynFormSubmit_iframe_1b').removeSelf();
},
callBack: null

;
Simple explanation:
In fact, the more troublesome part is dealing with the multi-browser compatibility issue of iframe. In fact, we don’t have to dig into the compatibility issue of iframe. Let’s hand over the compatibility issue. Let the browser parse and solve it by itself. Here we use string conversion to DOM.
First, I created a form and iframe, both of which were hidden. I transferred the content of the form to the hidden form I created, and then submitted the created hidden form. After all is completed, remove the created form and iframe.
Usage:
asyn.formSubmit(args, action [, func]) arg: can be a form form, an input form element, or an array of input form elements. action: submitted url. func: callback function
Example: asyn.formSubmit(inputArr, 'xxx.aspx', function(d){
　　　alert(d);
});
END
That’s it It’s over. Here I recommend a js framework I wrote myself. The above method is integrated into the framework
Use:

Copy code The code is as follows:

b$.asyn.formSubmit(inputArr, 'xxx.aspx', function(d){
　 alert(d);
} );