Div里面載入另一個頁面的實現(取代框架)（AJax）（轉）

隨着框架越來越不火了，HTML5就不對框架支持了，iframe也只有url了,Div就擔當了此大任

DIV+CSS在頁面部局確實也很讓人滿意，使用也更方便

今天突然遇到一個問題，那就是需要導入另一個頁面顯示在當前頁的Div里面

我當然可以用iFrame啥的，不過那不是我想要的方法

在網上查了半天，方法也很多，不過有不滿意的地方,因為多數都會用JQuery

呆會在下部分會給出jQuery的實現

而且因為要導入的頁面還有一些特效，而不是單純的數據，例如，我導過來的頁面樣式都要保持!

我要實現的是教你用Ajax實現,大家都知道Ajax可以異步隨時不用刷新頁面而更新數據,功能也很是強大

而且在未來HTML5上也對Ajax有了更好的支持，

下面我就教你如何使用Ajax快速達到目的:

使用源生Ajax,只需二步:

1:下載Ajaxjs文件:Ajax包下載

2:頁面導入js文件

<script type="text/javascript" src="ajaxrequest.js"></script>

完成了，你已經成功邁入了Ajax大門了

接着來完成任務吧:

細節說明: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內部原理見此牛貼

導入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用法請參閱完整說明

方式二:這個方法是使用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 事件用法