隨着框架越來越不火了，HTML5就不對框架支持了，iframe也只有url了,Div就擔當了此大任
DIV+CSS在頁面部局確實也很讓人滿意，使用也更方便
今天突然遇到一個問題，那就是需要導入另一個頁面顯示在當前頁的Div里面
我當然可以用iFrame啥的，不過那不是我想要的方法
在網上查了半天，方法也很多，不過有不滿意的地方,因為多數都會用JQuery
呆會在下部分會給出jQuery的實現
而且因為要導入的頁面還有一些特效，而不是單純的數據，例如，我導過來的頁面樣式都要保持!
我要實現的是教你用Ajax實現,大家都知道Ajax可以異步隨時不用刷新頁面而更新數據,功能也很是強大
而且在未來HTML5上也對Ajax有了更好的支持，
下面我就教你如何使用Ajax快速達到目的:
使用源生Ajax,只需二步:
1:下載Ajaxjs文件:http://yunpan.cn/c3RfAVNImx7A6 訪問密碼 9ca7
2:頁面導入js文件<script type="text/javascript" src="ajaxrequest.js"></script>
完成了，你已經成功邁入了阿假科思大門了
接着來完成任務吧:
細節說明:Apach / Ajax / js
頁面中添加一個目標地址:例如 <div id="des"></div>
好啦，另一個頁面的全部代碼呆會就導在這個叫des的DIV中間;我們要導入的就是頁面abc.html //用來設計模板頁很不錯哦
添加JS代碼了:
<script type="text/javascript">
var ajaxobj=new AJAXRequest; // 創建AJAX對象,類在剛剛那個文件里了
ajaxobj.method="GET"; // 設置請求方式為GET
ajaxobj.url="templat/main.html" // 響應的URL,以后可以改為一些動態處理頁,會用Ajax的都知道，這在頁里可以有目的返回不同的數據
// 設置回調函數，輸出響應內容,因為是靜態頁（這是我的需求嘛）所以所有內容都過來了
ajaxobj.callback=function(xmlobj) {
document.getElementById('des).innerHTML = xmlobj.responseText; //可要看好這句話哦
}
ajaxobj.send(); // 發送請求
</script>
到此為止，目的達成,頁面是不是完全加載進來了，右健查看源代碼，還很好的隱藏了abc的url,甚至連字都隱藏了，太神奇了,hoho
用這開發模板，不就是一個網址了嗎，連個？號都不讓看啊，就是一個字：真爽!
而且樣式也都是設好的樣式,也可以把js用function aa{}擴起來在onload(javascript:aa())自由發揮
最后說明一下:ajax還需要一些瀏覽器檢查，這里是教最快上手，我在FF火狐測試過了一切都好,而在IE可能在樣式上會出點小問題，不過門都入了，
慢慢就都會了，不是嗎
JQuery方式載入：
方式一：首先引入jquery的JS文件:<script type="text/javascript" src="https://ajax.googleapis.com/ajax/libs/jquery/1.7.2/jquery.min.js"></script>
更多jQuery內部原理見此牛貼：http://www.cnblogs.com/skylaugh/archive/2006/12/18/595563.html
導入js 添加代碼了,直接寫個js函數(因為無論jquery還是Ajax都是js開發的)
<script language="javascript" type="text/javascript">
<!--
function jump(){
$("#mainBody").load("./templat/main.html",function(){ $("#mainBody").fadeIn(100);}
);
-->
</script>
直接在要觸發的地方加上onclick="jump();" 就行了,發現這個瀏覽器支持能好點
更多load用法請參閱完整說明:http://www.cnblogs.com/mslove/archive/2009/05/07/1452098.html
方式二:這個方法是使用jquery的ajax
var parames={
"type1":"paramer1","type2":"paramer2"};
$.ajax({
url:'myTest.php',
type:'post',
dataType:'html',
data:parames,
error: function(){alert('error');},
success:function(data){
$("#myDiv").html(data);
}
});
這種方式也可以，愛用哪個用哪個吧，哈哈
附：
jquery load 事件用法
如果綁定給window對象，則會在所有內容加載后觸發，包括窗口，框架，對象和圖像。如果綁定在元素上，則當元素的內容加載完畢后觸發。
注意:只有當在這個元素完全加載完之前綁定load的處理函數,才會在他加載完后觸發。如果之后再綁定就永遠不會觸發了。所以不要在$(document).ready()里綁定load事件，因為jQuery會在所有DOM加載完成后再綁定load事件。
調用load方法的完整格式是：load( url, [data], [callback] ),
其中:
url：是指要導入文件的地址。
data：可選參數；因為Load不僅僅可以導入靜態的html文件，還可以導入動態腳本，例如PHP文件，所以要導入的是動態文件時，我們可以把要傳遞的參數放在這里。callback：可選參數；是指調用load方法並得到服務器響應后，再執行的另外一個函數。一：如何使用data
1.加載一個php文件，該php文件不含傳遞參數
$("#myID").load("test.php");//在id為#myID的元素里導入test.php運行后的結果
2. 加載一個php文件，該php文件含有一個傳遞參數
$("#myID").load("test.php",{"name" : "Adam"});//導入的php文件含有一個傳遞參數，類似於：test.php?name=Adam
3. 加載一個php文件，該php文件含有多個傳遞參數。注：參數間用逗號分隔
$("#myID").load("test.php",{"name" : "Adam" ，"site":"61dh.com"});//導入的php文件含有一個傳遞參數，類似於：test.php?name=Adam&site=61dh.com
4. 加載一個php文件，該php文件以數組作為傳遞參數
$("#myID").load("test.php",{'myinfo[]', ["Adam", "61dh.com"]});//導入的php文件含有一個數組傳遞參數。
注意：使用
load，這些參數是以POST的方式傳遞的，因此在test.php里，不能用GET來獲取參數。二：如何使用callback
比如我們要在
load方法得到服務器響應后，慢慢地顯示加載的內容，就可以使用callback函數。代碼如下：$("#go").click(function(){$("#myID").load("welcome.php", {"lname" : "Cai", "fname" : "Adam", function(){$("#myID").fadeIn('slow');});
});
備注：
在load的url里加上空格后面就可以跟選擇器了。
例如：
$("body").load("test.html #a");