AJAX - The Complete Reference

24 Part I: Core Ideas

collecting large amounts of user submitted data, such as comments. Fortunately, posted

form data does not have such a limitation. To employ form posts, utilize the hidden iframe

technique and create the various form fields to submit with the form. Once the form is

populated with the desired payload data, trigger the form’s submission via JavaScript. The

code for sendRequest thus looks like this:

function sendRequest(url, payload)

{

var ifr = makeIframe();

var ifrForm = makeIframeForm(ifr, url, payload);

ifrForm.submit();

}

Making the inline frame in the function makeIframe() is pretty straightforward and

uses the standard DOM document.createElement() method.

function makeIframe()

{

if (window.ActiveXObject)

var iframe = document.createElement("<iframe />");

else

var iframe = document.createElement("iframe");

iframe.style.visibility = "hidden";

document.body.appendChild(iframe);

return iframe;

}

The makeIframeForm() function shows a few troubling cross-browser concerns in how

each browser references a Document object within an iframe. You must also deal with the

fact that some browsers will create a partial DOM tree, complete with a document.body

value and some will not. Once these issues have been rectified, you can create form fields

that hold any payload values you want to send.

function makeIframeForm(ifr, url, payload)

{

var ifrDoc = null;

/* address cross browser window and document reference problems */

var ifrWindow = ifr.contentWindow || ifr.contentDocument;

if (ifrWindow.document)

ifrDoc = ifrWindow.document;

else

ifrDoc = ifrWindow;

/* make document skeleton if necessary */

if (!ifrDoc.body)

{

var html = ifrDoc.createElement("HTML");

ifrDoc.appendChild(html);

var head = ifrDoc.createElement("HEAD");

html.appendChild(head);

var body = ifrDoc.createElement("BODY");