2010-06-29 220 views
-3

下面提供的代碼不顯示該頁面的所有內容。Ajax無法正常工作

<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd"> 
<html xmlns="http://www.w3.org/1999/xhtml"> 
<head> 
<meta http-equiv="Content-Type" content="text/html; charset=utf-8" /> 
<title>Document</title> 
<script type="text/javascript"> 

var rootdomain="http://"+window.location.hostname 
alert(rootdomain); 
function ajaxinclude(url) { 
var url=rootdomain+url; 
var page_request = false 
if (window.XMLHttpRequest) // if Mozilla, Safari etc 
page_request = new XMLHttpRequest() 
else if (window.ActiveXObject){ // if IE 
try { 
page_request = new ActiveXObject("Msxml2.XMLHTTP") 
} 
catch (e){ 
try{ 
page_request = new ActiveXObject("Microsoft.XMLHTTP") 
} 
catch (e){} 
} 
} 
else 
return false 
page_request.open('GET', url, false) //get page synchronously 
page_request.send(null) 
writecontent(page_request) 
} 

function writecontent(page_request){ 
if (window.location.href.indexOf("http")==-1 || 
page_request.status==200) 
document.getElementById("write").innerHTML=page_request.responseText; 
} 

</script> 
</head> 

<body> 
<div id="write"> 
</div> 
<input type="button" value="Submit !" onclick="ajaxinclude('/songcake/index.php');"/> 

</body> 
</html> 

請幫助

感謝。

+0

請高亮編輯視圖代碼,然後點擊「編碼」按鈕,將其格式化爲碼。 – Sphvn 2010-06-29 07:38:56

+0

我認爲你必須包括prototype.js,如果你不使用jquery – Salil 2010-06-29 07:46:36

+0

@Salil - 原型是另一種選擇,這也會使這更容易,但它並不是必需的,雖然 – robjmills 2010-06-29 12:21:45

回答

1

爲什麼你不應該使用jQuery?你可以這樣做簡單,如下..

$("#write").load("/songcake/index.php"); 

將帖子

下面你可以看到完整的代碼

<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" 
    "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd"> 
<html xmlns="http://www.w3.org/1999/xhtml"> 
<head> 
<meta http-equiv="Content-Type" content="text/html; charset=utf-8" /> 
<title>Document</title> 
<script type="text/javascript" src='scripts/jquery.js'></script> 
</head> 

<body> 
<div id="write"> 
</div> 
<input type="button" value="Submit !" 
    onclick="$('#write').load('/songcake/index.php');"/> 

</body> 
</html> 

你可以從這裏下載的jQuery:http://jquery.com/ 來源爲我的回答你可以在這裏找到:http://api.jquery.com/load/

+0

感謝您的回覆 但請您發送完整的代碼。 – rajesh 2010-06-29 07:49:33

+0

或者其他任何JavaScript庫 – robjmills 2010-06-29 12:20:05

+0

@rajesh ...., 首先你必須添加Jquery到你的代碼 我將編輯我的答案.. – BlueBird 2010-06-29 12:58:44

2

你需要添加一個閉包,在完成文檔加載時作出反應流程。

page_request.onreadystatechange = function() { 
    if(page_request.readystate == 4) { 
     // data handling here 
    } 
} 

正如指出的那樣,使用jQuery會使事情變得更容易。

編輯:爲了說明,您的AJAX調用確實檢查連接狀態(request.status),但不檢查加載狀態(request.readystate)。您的文檔可能沒有完全加載。 以下是W3.org XMLHTTPRequest API的參考:http://www.w3.org/TR/XMLHttpRequest/

編輯2:順便說一句,元素將解決您的問題,代碼少得多。

編輯3:代碼

function ajaxinclude(url) { 
    //... 
    page_request.open('GET', url, false) //get page synchronously 
    //<> add onreadystatechange handler 
    page_request.onreadystatechange = function() { 
     if(page_request.readystate === 4) { 
      if(page_request.state === 200) { 
       //call function on success 
        writecontent(page_request.responseXML) 
      } 
     } 
    } 
    page_request.send(null) 
} 

一些補充:

  1. ,如果你把你的Ajax調用到<HEAD>你需要或者創建要附加數據,因爲它們是DOM元素在運行時運行時不可用(這可能會導致dom錯誤);或者您需要添加一個on dom加載事件處理程序。
  2. 同步呼叫在某些瀏覽器中沒有正確執行,這也可能導致錯誤。
+0

其實我不想使用iframe,我知道iframe的使用非常多,但我實際上想使用div,所以請給出關於代碼的建議..... – rajesh 2010-06-29 11:27:18

+0

我建議,從Ajax插入到相同的幀比IFrame更好。 – BlueBird 2010-06-30 08:42:54

+0

@ Muneer:我說的代碼少,不是更好的解決方案。換句話說,我同意。 – FK82 2010-06-30 13:06:23

0

嘗試使用Firebug

螢火告訴你你的要求的狀態。 如果200,你會看到,在傳請求應答(螢火蟲)破碎的數據,那麼 你應該檢查你的index.php 腳本