掌握AJAX之AJAX通讯技术简介3
4. 隐藏iFrame
新一代的客户端—服务器通信模式幕后所采用的是iframe，它是在HTML 4.0中引入的。iframe与帧基本是相同的，唯一的区别是iframe可以放在一个未设置帧集的HTML页面中，可以使页面中的任意部分成为一个帧。iframe技术可以在未预先设置帧集的页面中使用，能够更好地适应于功能的逐渐添加。iframe甚至还可以使用JavaScript在运行时创建，为了简单起见，语义化HTML（semantic HTML）支持使浏览器将Ajax功能看作是一个有益的增强（这将在稍后讨论）。由于可以用与普通帧相同的方法使用和访问iframe，因此它们都是Ajax通信的理想选择。
发挥iframe的优势有两种方法。最简单的方法是在页面中简单地嵌入iframe，并像隐藏帧那样用来发出请求。为此，第一个例子中的显示页面将修改为：
＜p＞Enter customer ID number to retrieve information:＜/p＞
＜p＞Customer ID: ＜input type="text" id="txtCustomerId" value="" /＞＜/p＞
＜p＞＜input type="button" value="Get Customer Info"
onclick="requestCustomerInfo()" /＞＜/p＞
＜div id="divCustomerInfo"＞＜/div＞
＜iframe src="about:blank" name="hiddenFrame" width="0" height="0"
frameborder="0"＞＜/iframe＞ |
注意，这个iframe中的width、height和frameborder属性都设置成了0，这可将其从视线中隐去。由于iframe的名字仍是hiddenFrame，所以这个页面的JavaScript代码可以如前一样正常工作。不过，对于GetCustomerData.php页面还需要做一些小的修改。在该页面中的JavaScript函数先前是在名为displayFrame的帧中查找displayCustomerInfo()函数。如果你使用该技术，又不存在该名字的帧，则必须修改代码，用parent来代替它：
window.onload = function () {
var divInfoToReturn = document.getElementById("divInfoToReturn");
parent.displayCustomerInfo(divInfoToReturn.innerHTML);
}; |
现在这个例子能够和本文中的第一例子一样正常工作了。
第二种使用隐藏iframe的方法是通过JavaScript动态地创建它们。由于并非所有浏览器实现iframe的方法都是一样的，所以需要一些技巧，使得它有助于一步步地创建隐藏的iframe。
第一步很简单，使用document.createElement()方法创建iframe并赋予必要的属性：
function createIFrame() {
var oIFrameElement = document.createElement("iframe");
oIFrameElement.width=0;
oIFrameElement.height=0;
oIFrameElement.frameBorder=0;
oIFrameElement.name = "hiddenFrame";
oIFrameElement.id = "hiddenFrame";
document.body.appendChild(oIFrameElement);
//更多代码
} |
本段代码的最后一行很重要，因为它将iframe添加到document结构中；没有添加到document中的iframe是无法执行请求的。另外注意，该iframe的name和id属性都是设置为hiddenFrame。这是必要的，因为有些浏览器是通过name属性访问新的帧，而有些则是通过id属性新的帧。
紧接着定义一个全局变量，用来保存对该帧对象的引用。注意，针对iframe元素的这个帧对象并非是从createElement()函数返回的。要获得该对象，必须从帧集合中获取。以下就是即将保存在全局变量中的内容：
var oIFrame = null;
function createIFrame() {
var oIFrameElement = document.createElement("iframe");
oIFrameElement.width=0;
oIFrameElement.height=0;
oIFrameElement.frameBorder=0;
oIFrameElement.name = "hiddenFrame";
oIFrameElement.id = "hiddenFrame";
document.body.appendChild(oIFrameElement);
oIFrame = frames["hiddenFrame"];
} |
如果你将这些代码放到前面的iframe例子中，那么需要对requestCustomerInfo()函数进行如下修改：
function requestCustomerInfo() {
if (!oIFrame) {
createIFrame();
setTimeout(requestCustomerInfo, 10);
return;
}
var sId = document.getElementById("txtCustomerId").value;
oIFrame.location = "GetCustomerData.php?id=" + sId;
} |
基于这些修改，该函数将会检查oIFrame是否为空。如果为空，则调用createFrame()，并会为该函数的调用设置10ms的超时时间。这是很必要的，因为只有IE浏览器能够立即识别插入的iframe，大部分其他浏览器需要花几毫秒来识别它，以允许通过它发送请求。当再次执行该函数时，将执行代码的其余部分，其中最后一行已经修改为对OIFrame对象的引用。
尽管该技术能够很容易地应用于GET请求，但POST请求却完全不同。只有一部分浏览器允许你设置表单的target属性来动态创建iframe；但IE并不是其中的一种。因此，要使用隐藏iframe技术来发送POST请求还需要一些技巧。
相关文章