Javascript asynchronous form submission, image upload, compatible with asynchronous simulation ajax technology_javascript skills

Foreword:
At first glance, the title is quite long, and there are so many functions. In fact, it is simplified to just one function, asynchronous form submission. Only under the big function of asynchronous form submission, you can upload images and simulate ajax technology. (In fact, this method was used to achieve multi-browser compatibility with ajax a long time ago. This is just for nostalgia and as a technology to play with.) The following content requires a certain js foundation, otherwise it will be more difficult to understand.
Note:
This is a method in my bBank. Now I extract it into a general method to explain.
bBank framework introduction: http://www.cnblogs.com/bruceli/archive/2010/04/15/bBank.html
Why do we mention bBank, because in the following method, bBank will be used Array judgment, string html conversion standard dom (I introduced this in my last article, click to see details), remove your own method, css selector, so don’t be unfamiliar with it, you can write your own method to replace it These methods can also be used directly by bBank. You can download bBank to see the source code.
b$.type.isArray(args) determines whether it is an array
b$.parseDom(strs) The string is directly converted into a standard DOM object
b$('#bBankAsynFormSubmit_form_1b').removeSelf() Remove yourself
b$() css selector
Principle:
The core is to complete asynchronously through iframe. Put a hidden iframe on the page. The form has an attribute target. Set the target to the iframe you want to submit asynchronously. Then when you submit the form, you are actually using the iframe as the submission display carrier and other content on the page. There is no refresh.
In fact, the principle is very simple. Since iframe is used as a display carrier, let us extend it. If the submitted page has a return value, then the return value will become the content in the body of the iframe. After obtaining the body through the iframe Judging from the content, it is a bit similar to ajax. This was the earliest method used to implement asynchronous.
ajax is time-triggered. Since we want to simulate ajax, we also need to trigger the event. In fact, it is very simple. Just use the onload loading completion event of the iframe.
Implementation:
code:

Copy code The code is as follows:

var asyn = {
formSubmit: function (args, action, func) {
this.clearContext();
this.callBack = null;
var subArr = [];
var subArrT = [];
if (b$.type.isArray(args)) {
subArr = args;
} else {
var tag = args.tagName.toLowerCase() ;
if (tag == "form") { for (var i = 0, num = args.childNodes.length; i < num; i ) { subArr.push(args.childNodes[i]); } }
else { subArr = [args]; }
}
//create asyn form and ifroma
var objForm = document.createElement("form");
objForm.action = action ;
objForm.target = "bBankAsynFormSubmit_iframe_1b";
objForm.encoding = "multipart/form-data";
objForm.method = "post";
objForm.id = "bBankAsynFormSubmit_form_1b";
objForm.style.display = "none";
var objIframe = b$.parseDom('')[0];
//add submit value in form
for (var i = 0, num = subArr.length; i < num; i ) {
if (!subArr[i].name && subArr[i].nodeType == 1 && subArr[i].tagName.toLowerCase() == "input") subArr[i].name = "bBankAsynFormSubmit_input_1b_" i;
var input = subArr[i].cloneNode(true);
subArrT.push(input);
subArr[i ].parentNode.replaceChild(input, subArr[i]);
objForm.appendChild(subArr[i]);
}
//submit
document.body.appendChild(objIframe);
document.body.appendChild(objForm);
objForm.submit();
//dispose
for (var i = 0, num = subArrT.length; i < num; i ) { subArrT[i].parentNode.replaceChild(subArr[i], subArrT[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) this.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);
} );