通過ajax導航將頁面加載到div - 幾個問題

Question

我是新來的整個編程業務，我試圖爲自己製作一個簡單的網站。

目前該網站有一個標題，一些導航鏈接，一個臨時圖像下方的導航（這將稍後修改，並與問題無關），並在下面，我有3個內容div。主要的內容div，以及我正在打算成爲我的側邊欄小部件的右側可能是twitter feed，廣告等等。

我已經設置了導航鏈接，以便將外部頁面加載到我的左欄div（我的主要內容區域）內。阿賈克斯的工作很好，就像它在錫上所說的那樣。

問題是每個導航鏈接讀取javascript：ajaxpage（'pageaddress.php'，'left-col'）;

的東西夫婦我不喜歡有關：

1. 當您刷新頁面，因爲該網站地址保持整個瀏覽同一自然會加載index.php文件內容
2. 。它不會改變，比方說，/ About.php。
3. 此外，這不適合搜索引擎優化。假設我需要單獨的頁面地址，標題以及什麼不是 - 我都這樣做。

腳本沒有真正的問題，它確實足夠了，它只是不工作，我希望它工作。無論如何，這是Ajax腳本。

<script type="text/javascript"> 

/*********************************************** 
* Dynamic Ajax Content- © Dynamic Drive DHTML code library (www.dynamicdrive.com) 
* This notice MUST stay intact for legal use 
* Visit Dynamic Drive at http://www.dynamicdrive.com/ for full source code 
***********************************************/ 

var bustcachevar=1 //bust potential caching of external pages after initial request?  (1=yes, 0=no) 
var loadedobjects="" 
var rootdomain="http://"+window.location.hostname 
var bustcacheparameter="" 

function ajaxpage(url, containerid){ 
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.onreadystatechange=function(){ 
loadpage(page_request, containerid) 
} 
if (bustcachevar) //if bust caching of external page 
bustcacheparameter=(url.indexOf("?")!=-1)? "&"+new Date().getTime() : "?"+new    Date().getTime() 
page_request.open('GET', url+bustcacheparameter, true) 
page_request.send(null) 
} 

function loadpage(page_request, containerid){ 
if (page_request.readyState == 4 && (page_request.status==200 ||       window.location.href.indexOf("http")==-1)) 
document.getElementById(containerid).innerHTML=page_request.responseText 
} 

function loadobjs(){ 
if (!document.getElementById) 
return 
for (i=0; i<arguments.length; i++){ 
var file=arguments[i] 
var fileref="" 
if (loadedobjects.indexOf(file)==-1){ //Check to see if this object has not already  been added to page before proceeding 
if (file.indexOf(".js")!=-1){ //If object is a js file 
fileref=document.createElement('script') 
fileref.setAttribute("type","text/javascript"); 
fileref.setAttribute("src", file); 
} 
else if (file.indexOf(".css")!=-1){ //If object is a css file 
fileref=document.createElement("link") 
fileref.setAttribute("rel", "stylesheet"); 
fileref.setAttribute("type", "text/css"); 
fileref.setAttribute("href", file); 
} 
} 
if (fileref!=""){ 
document.getElementsByTagName("head").item(0).appendChild(fileref) 
loadedobjects+=file+" " //Remember this object as being already added to page 
} 
} 
} 

</script> 

，這裏是和榜樣的導航鏈接

<ul id="nav"> 
    <li><a href="javascript:ajaxpage('design.php', 'left-col');">Design</a></li> 

的有沒有一種方法，我可以改變的Ajax使每個頁面加載在div裏面，同時也改變了網址，讓我有每個頁面都有不同的標題，並且還阻止網站在刷新時加載index.php？

如果沒有，任何人都知道任何其他腳本加載頁面的方法 - 它並不一定必須是ajax - 只有在做我想做的事情時才轉換爲div（diff url，titles等） ，）

這是我第一次發佈所以希望我的問題很清楚 - 儘管很長 - 並且格式正確。

謝謝，克里斯。

Answer 1

爲了方便Ajax處理，您可以使用例如jQuery。

但這並沒有改變任何有關「改變網址」的問題。爲此，你應該使用散列（＃）。你的網址看起來像是index.php＃about或../#about。您可以在＃後查看該字符串並顯示單個頁面。

var hash = "default.html"; 
if(window.location.hash) 
    hash = window.location.hash.substring(1); 

switch(hash){ 
    case "default": 
    showPage(1); 
    break; 
    case "news": 
    showPage(2); 
    break; 
    // ... 
} 

Answer 2

在這個問題Redirect all website traffic to PHP handler, pitfalls?

在處理程序（的index.php），您可以設置標題，內容（包括）在$ _ SERVER [ 'REQUEST_URI']基地看看。