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请求还需要一些技巧。