5. 隐藏iframe的POST请求
要使用隐藏iframe来完成POST请求，其方法是在隐藏帧中载入一个包含表单的页面，用数据填充该表单，然后再提交该表单。当这个可见的表单（你实际输入数据的那个）提交时，必须取消这次提交而将信息转发给隐藏帧。为此，必须定义一个函数，用来处理iframe的创建以及隐藏表单的载入：
function checkIFrame() {
if (!oIFrame) {
createIFrame();
}
setTimeout(function () {
oIFrame.location = "ProxyForm.htm";
}, 10);
} |
这个名为checkIFrame()的函数首先检查隐藏的iframe是否已经创建。如果没有，则调用createIFrame()。然后，在将iframe的地址设置为ProxyForm.htm（这是一个隐藏表单页面）之前，为其设置一个超时值。由于该函数调用需要花一些时间，而重要的是该页面每次加载时都将提交该表单。
ProxyForm.htm文件很简单，只包括很少的JavaScript，用来提示主页面已经装载完成：
＜html＞
＜head＞
＜title＞Proxy Form＜/title＞
＜script type="text/javascript"＞
window.onload = function () {
parent.formReady();
}
＜/script＞
＜/head＞
＜body＞
＜form method="post"＞＜/form＞
＜/body＞
＜/html＞ |
正如你所见，该页面的主体只包含一个空的表单，而标题中只包含一个onload事件处理函数。当载入该页面时，页面将通过调用parent.formReady()来使主页面知道它已经做好接收请求的准备。而formReady()函数则是包含在主页面本身中的，类似于：
function formReady() {
var oHiddenForm = oIFrame.document.forms[0];
var oForm = document.forms[0];
for (var i=0 ; i ＜ oForm.elements.length; i++) {
var oHidden = oIFrame.document.createElement("input");
oHidden.type = "hidden";
oHidden.name = oForm.elements[i].name;
oHidden.value = oForm.elements[i].value;
oHiddenForm.appendChild(oHidden);
}
oHiddenForm.action = oForm.action;
oHiddenForm.submit();
}; |
在该函数中的第一步是获取对隐藏iframe中表单的引用，可以通过访问该帧的document.forms集合来获取。由于在该页面中只有一个表单，因此可以安全地从该集合中获得第一个表单（即索引值为0），并将其存储于oHiddenForm中。然后，将对主页面表单的引用存于oForm中。紧接着，一个for循环对主页面中该表单的各元素进行遍历（使用elements集合）。对于表单中的每一个元素，都将在隐藏帧（注意，必须使用oIFrame.document.createElement()而不只是document.createElement()）中创建一个隐藏的输入元素。这个隐藏的输入元素拥有与该表单元素相同的名字和值，然后使用appendChild()函数将其添加到隐藏的表单中。
当所有的表单元素都添加完后，隐藏的表单还将设置与主页面表单相同的action。通过从表单中读取action来取代硬编码，就可以在任何页面中使用formReady()。该函数的最后一步是提交这个隐藏的表单。
剩下的最后一件事就是确保主页面的表单不以通常的方式提交自己。要达到这一目标，只需在onsubmit事件处理函数中调用checkIFrame()并返回false：
＜form method="post" action="SaveCustomer.php"
onsubmit="checkIFrame();return false"＞
＜p＞Enter customer information to be saved:＜/p＞
＜p＞Customer Name: ＜input type="text" name="txtName" value="" /＞＜br /＞
Address: ＜input type="text" name="txtAddress" value="" /＞＜br /＞
City: ＜input type="text" name="txtCity" value="" /＞＜br /＞
State: ＜input type="text" name="txtState" value="" /＞＜br /＞
Zip Code: ＜input type="text" name="txtZipCode" value="" /＞＜br /＞
Phone: ＜input type="text" name="txtPhone" value="" /＞＜br /＞
E-mail: ＜input type="text" name="txtEmail" value="" /＞＜/p＞
＜p＞＜input type="submit" value="Save Customer Info" /＞＜/p＞
＜/form＞
＜div id="divStatus"＞＜/div＞ |
通过以这种方式返回flase，可以阻止表单的默认行为（将自己提交到服务器）。通过调用checkIFrame()方法来启动隐藏iframe中表单的提交进程。
当这一任务完成后，就可以像使用隐藏帧POST请求的例子一样使用本例；页面SavaCustomer.php负责处理数据，并当完成时调用主页面中的savaResult()函数。
注意，本节中的例子是为了使其聚焦于与Ajax技术相关的问题上，因而进行了简化。如果在实际的Web应用程序中使用，还需要提供更多的用户反馈，诸如在发出请求时屏蔽该表单的输入等。
6. 隐藏帧技术的优点和缺点
现在，你已经对使用隐藏帧所实现的强大功能有所了解了，我们将讨论它的实用性。正如前面所说的，该技术已经存在多年，并且仍然在许多Ajax应用中使用。
使用隐藏帧的一个最大理由之一是它可以维护浏览器的历史，使用户仍然能够使用浏览器上的后退和前进按钮。浏览器由于并不知道隐藏帧实际上被隐藏了，但对于其所发出的请求仍然是记录在案的。然而，Ajax应用程序的主页面却没有修改，在隐藏帧中的修改意味着后退和前进按钮将依据该隐藏帧的访问历史而非主页面而变化。这也是为什么Gmail和Google Maps仍然使用该技术的理由。
注意，iframe并非一直会存储浏览器的历史记录。尽管IE始终会存储iframe的历史记录，但Firefox只对使用HTML定义（也就是不包括使用JavaScript动态创建）的iframe保存历史记录。Safari从不为iframe保存历史记录，不管它们是如何包含在该页面中的。
隐藏帧技术不利的一面是，对其背后发生的事了解甚少。它完全依赖于返回的正确页面。本节的例子都存在相同的问题：如果隐藏帧的页面载入失败，并不会向用户提示出错消息；主页面将继续等待直到调用适当的JavaScript函数。必须通过设置一个较长周期（可能是5分钟）的超时时间，然后如果页面仍然没有成功载入则显示一条消息，以给用户一个安慰。但这一切都只是一个变通方法，最主要的问题是，对于后台发生的HTTP请求缺乏充足的信息。幸运的，我们还有其他选择。
|
