以下内容可以代表解决方案的起点。
在继续阅读之前，请记住以下关于我的回答的主要事项：
- 所有原版 javascript
- ajax 调用加载新内容
- 更改地址栏上的网址而不重新加载页面
- 在浏览器历史记录中注册 url 更改
- seo 友好
但请注意，所有内容均以草稿代码的形式呈现，旨在解释解决方案，如果您想在生产环境中实施，则需要改进代码。
让我们从索引页面开始。
index.php
<!DOCTYPE html>
<html>
<head>
<title>Sample page</title>
<meta charset="UTF-8">
<script type="text/javascript" src="ajax_loader.js"></script>
</head>
<body>
<h1>Some static content</h1>
<a href="?main_content=external_content.php">
Link to load dynamic content
</a>
<div id="main_content">
<!--
Here is where your dynamic content will be loaded.
You can have as many dynamic container as you like.
In my basic example you can attach one link to a
single container but you can implement a more
complete solution to handle multiple containers
at the same time
-->
<!-- Leave this empty for the moment... some php will follow -->
</div>
</body>
</html>
现在让我们看看 javascript 如何处理链接以使用 ajax 加载内容
ajax_loader.js
window.onload = function() {
var load = function(e) {
// prevent browser to load link
event.preventDefault();
// exit if target is undefined
if(typeof(e.target) == 'undefined' ) {return;}
// exit if clicked element is not a link
if (e.target.tagName !== 'A') {return;}
// get href from clicked element
var href = e.target.getAttribute("href");
// retrieve container and source
var href_parts = href.split('=');
var container = href_parts[0].substr(1);
var source = href_parts[1];
// instantiate a new request
var request = new XMLHttpRequest();
// bind a function to handle request status
request.onreadystatechange = function() {
if(request.readyState < 4) {
// handle preload
return;
}
if(request.status !== 200) {
// handle error
return;
}
if(request.readyState === 4) {
// handle successful request
successCallback();
}
};
// open the request to the specified source
request.open('GET', source, true);
// execute the request
request.send('');
successCallback = function() {
// on success place response content in the specified container
document.getElementById(container).innerHTML = request.responseText;
// change url in the address bar and save it in the history
history.pushState('','',"?"+container+"="+source);
}
};
// add an event listener to the entire document.
document.addEventListener('click', load, false);
// the reason why the event listener is attached
// to the whole document and not only to the <a>
// elements in the page is that otherwise the links
// included in the dynamic content would not
// liste to the click event
};
现在让我们回顾一下 html 的一些特定元素
如前所述，提议的脚本会将行为附加到任何链接，您只需对其进行格式化，以便 load() 函数正确读取。格式为“?container_name=filename.php”。其中container_name是要加载内容的div的id，而filename.php是ajax调用获取内容的文件名。
因此，如果您的“external_content.php”文件中有一些内容并希望将其加载到 id 为“main_content”的 div 中，这就是您要做的
<a href="?main_content=external_content.php">Your link</a>
<div id="main_content"></div>
在本例中，页面首次加载时 div 'main_content' 为空，点击链接时将填充 external_content.php 文件的内容。
同时您浏览器的地址栏将从
http://www.example.com/index.php
到
http://www.example.com/index.php?main_content=external_content.php
并且这个新的 url 将被注册到你的浏览器历史记录中
现在让我们更进一步，看看我们如何使这个 SEO 友好，以便
http://www.example.com/index.php?main_content=external_content.php
是一个真实的地址，当我们加载页面时，'main_content' div 不为空。
我们可以添加一些 php 代码来处理这个问题。
（请不要说您甚至可以为类似的工作编写一些 javascript，但是由于您提到了使用服务器端语言，我决定使用 php）
<a href="?main_content=external_content.php">Load</a>
<div id="main_content">
<?php dynamicLoad('main_content','default_main_content.php'); ?>
</div>
在展示它之前，我想解释一下 php 函数 dynamicLoad() 的作用。它有两个参数，第一个相当于容器id，第二个是默认内容所在的文件。
更清楚地说，如果请求的 url 是
http://www.example.com/
该函数会将 default_main_content.php 的内容放入 main_content div
但是如果浏览器请求的 url 是
http://www.example.com/index.php?main_content=external_content.php
然后函数会将 external_content.php 的内容放在 main_content div 中。
这种机制有助于页面对 SEO 和用户友好，所以当搜索引擎爬虫会跟随 href
“？main_content=external_content.php”
这带来了网址
"http://www.example.com/index.php?main_content=external_content.php" 将找到与 ajax 调用动态显示的相同内容。
对于将通过刷新或从历史记录重新加载页面的用户来说也是如此。
这里是简单的dynamicLoad() php函数
<?php
function dynamicLoad($contaner,$defaultSource){
$loadSource = $defaultSource;
if(isset($_GET[$contaner])) {
$loadSource = $_GET[$contaner];
}
include($loadSource);
}
?>
正如第一行所说，这不是准备好生产的代码，它只是对您提出的请求的可能解决方案的解释
更改显示的 url 并据此更改内容
页面并使页面的 url 和内容成为机器人
友好的