研究ExtJS的Panel.load({})怎么加载一个其他页面
日期：2014-05-16 浏览次数：20509 次
研究ExtJS的Panel.load({})如何加载一个其他页面
在使用ExtJS的时候，Panel是一个最常用的组件，Panel包含一个load()函数，用法是：使用XHR（指Ajax请求）调用的返回内容来立即加载此panel。
但是Ext的Panel本质上不过是一个div而已，所以其实这时候本质问题是：如何在一个div里面加载一个其他页面？
最容易想到的是：在div里面放一个iframe，让这个iframe链接到另外一个页面。这样也是最简单的方法，不过使用iframe有个问题就是父窗口和子窗口的window、window.location等等客户端JavaScript对象已经不是相同的对象了，这样对JavaScript编程或URL地址等方面不容易统一处理。
可以这样考虑，浏览器无非是显示一些html标签组成的数据，如果我们能获得其他网页的html数据，然后把这些数据加入到div的innerHTML里面去，实际上就获得了在一个div里面加载一个其他页面的效果。（注意：只是效果看起来一样，并不是真的链接到了其他页面）。那么如何获得html数据呢？答案是：采用Ajax的返回值。
例子如下（随便写的测试，没处理一些细节）：
<html>
<script type="text/javascript">
window.onload = function() {
var ajax = new XMLHttpRequest();
ajax.open("GET","http://www.163.com",true);
ajax.send();
ajax.onreadystatechange = function() {
if(ajax.readyState == 4) {
if(ajax.status == 200) {
alert(ajax.responseText);
var htmlData = ajax.responseText;
var bodyData = htmlData.substring(htmlData.indexOf("<body>")+6,htmlData.lastIndexOf("</body>"));
alert(bodyData);
document.getElementById("a").innerHTML = bodyData;
}
}
};
}
</script>
<body>
<div id="a"></div>
</body>
</html>
这样，就直接在这个div中添加了网易的html数据（并非链接到网易：浏览器地址栏仍然在自己的页面上），当然这时候css和网页效果消失了，这是正常的。
所以ExtJS的Panel的load函数，也是通过Ajax返回了其他页面的html数据，放入了div中，而绝非直接链接到了其他页面。
在使用ExtJS的时候，Panel是一个最常用的组件，Panel包含一个load()函数，用法是：使用XHR（指Ajax请求）调用的返回内容来立即加载此panel。
但是Ext的Panel本质上不过是一个div而已，所以其实这时候本质问题是：如何在一个div里面加载一个其他页面？
最容易想到的是：在div里面放一个iframe，让这个iframe链接到另外一个页面。这样也是最简单的方法，不过使用iframe有个问题就是父窗口和子窗口的window、window.location等等客户端JavaScript对象已经不是相同的对象了，这样对JavaScript编程或URL地址等方面不容易统一处理。
可以这样考虑，浏览器无非是显示一些html标签组成的数据，如果我们能获得其他网页的html数据，然后把这些数据加入到div的innerHTML里面去，实际上就获得了在一个div里面加载一个其他页面的效果。（注意：只是效果看起来一样，并不是真的链接到了其他页面）。那么如何获得html数据呢？答案是：采用Ajax的返回值。
例子如下（随便写的测试，没处理一些细节）：
<html>
<script type="text/javascript">
window.onload = function() {
var ajax = new XMLHttpRequest();
ajax.open("GET","http://www.163.com",true);
ajax.send();
ajax.onreadystatechange = function() {
if(ajax.readyState == 4) {
if(ajax.status == 200) {
alert(ajax.responseText);
var htmlData = ajax.responseText;
var bodyData = htmlData.substring(htmlData.indexOf("<body>")+6,htmlData.lastIndexOf("</body>"));
alert(bodyData);
document.getElementById("a").innerHTML = bodyData;
}
}
};
}
</script>
<body>
<div id="a"></div>
</body>
</html>
这样，就直接在这个div中添加了网易的html数据（并非链接到网易：浏览器地址栏仍然在自己的页面上），当然这时候css和网页效果消失了，这是正常的。
所以ExtJS的Panel的load函数，也是通过Ajax返回了其他页面的html数据，放入了div中，而绝非直接链接到了其他页面。
1 楼
明天的昨天
2010-11-16
这文章明显是转帖的啊
2 楼
明天的昨天
2010-11-16
不好意思。搞错了。sorry
免责声明： 本文仅代表作者个人观点，与爱易网无关。其原创性以及文中陈述文字和内容未经本站证实，对本文以及其中全部或者部分内容、文字的真实性、完整性、及时性本站不作任何保证或承诺，请读者仅作参考，并请自行核实相关内容。
