php - 动态更改 div 内容，同时页面的部分内容保持静态，并且还允许直接访问任何内容(想想书签)？

Question

首先，这个网站在一些学校项目中为我提供了极大的帮助，我希望我的问题足够具体，可以得到一些答案。

我想做的是更改页面上 div 的内容(我们称之为“#content”)，同时还以某种方式允许直接访问通过更改创建的各种“页面” div 的内容。

例如，假设“foo.com/home”将作为主页。 “#content”div 需要填充主页的代码，而其周围的其他元素保持静态(例如页眉、页脚和导航 div)。同样，“foo.com/forum”将使用论坛代码填充“#content”，其他页面也会执行相同操作。

目前，我只是检查 URL 末尾的哈希值，然后使用 jQuery 的 load() 方法将各种代码加载到“#content”中。然而，除了在移动浏览器上使用哈希进行导航似乎很挑剔之外，我也感觉这是错误的。

我正在考虑使用 PHP，然后只使用 PHP include 来根据 URL 更改加载到“#content”中的代码。例如，“foo.com/page=forum”将获取与主页(页眉/页脚、导航等)相同(布局方面)的页面，但仅包含“#content”的不同文件.'但是，这将重新加载整个页面，而不仅仅是“#content”，对吗？

理想情况下，我想使用某种 AJAX 调用来重新加载“#content”div，但是，除了编辑 URL 哈希之外，我不知道如何在允许书签和这样的。我希望用户能够访问“foo.com/home”或“foo.com/forum”，并最终得到填充了正确内容的“模板页面”(页眉/页脚、导航)。

再次抱歉，如果这是一个措辞不当的问题。我做了一些研究，但似乎无法找到完成这项工作的最佳方法。提前致谢 - 如有任何提示，我们将不胜感激。

Answer 1

检查此示例代码:

         var xmlhttp;
         if (window.XMLHttpRequest)
            {
           xmlhttp=new XMLHttpRequest();
            }
         else
            {
           xmlhttp=new ActiveXObject("Microsoft.XMLHTTP");
            }
         xmlhttp.onreadystatechange=function()
            {
           if (xmlhttp.readyState==4 && xmlhttp.status==200)
              {
             document.getElementById("content").innerHTML=xmlhttp.responseText;

          }
          } 
           var usernm = document.getElementById("username").value;
           var pwd = document.getElementById("password").value; 
           var params = "username=" + usernm + "&password=" + pwd; 
           xmlhttp.open("POST","phpfile.php",true);
           xmlhttp.setRequestHeader("Content-type","application/x-www-form-urlencoded");
           xmlhttp.send(params); 
          //xmlhttp.send(); without parameters