使用ajax的get或post方法，将请求发送到服务器，服务器返回html内容，然后通过回调函数处理返回的数据。
Ajax如何获取HTML内容
什么是Ajax？
Ajax（Asynchronous JavaScript and XML）是一种在无需重新加载整个网页的情况下，能够更新部分网页的技术，通过使用Ajax，可以在后台与服务器进行数据交换，然后更新网页的特定部分，而无需刷新整个页面。
如何使用Ajax获取HTML内容？
要使用Ajax获取HTML内容，可以按照以下步骤进行操作：
1、创建XMLHttpRequest对象：
```javascript
var xhttp = new XMLHttpRequest();
```
2、设置请求方法和URL：
```javascript
xhttp.open("GET", "your_url", true); // 第一个参数是请求方法，第二个参数是请求的URL地址，第三个参数表示是否异步执行（true为异步）
```
3、发送请求：
```javascript
xhttp.send();
```
4、处理响应：
当服务器返回响应时，会触发回调函数来处理响应数据，可以使用onreadystatechange属性来指定回调函数，或者使用addEventListener方法添加事件监听器，以下是两种常见的处理响应的方式：
a. 使用onreadystatechange属性：
```javascript
xhttp.onreadystatechange = function() {
if (xhttp.readyState == 4 && xhttp.status == 200) {
// 请求成功并且服务器返回了状态码200（表示请求成功）
var response = xhttp.responseText; // 获取服务器返回的HTML内容
// 在这里对获取到的HTML内容进行处理或显示
}
};
```
b. 使用addEventListener方法：
```javascript
xhttp.addEventListener("readystatechange", function() {
if (xhttp.readyState == 4 && xhttp.status == 200) {
// 请求成功并且服务器返回了状态码200（表示请求成功）
var response = xhttp.responseText; // 获取服务器返回的HTML内容
// 在这里对获取到的HTML内容进行处理或显示
}
});
```
5、完整的示例代码：
```html
<!DOCTYPE html>
<html>
<head>
<script>
function loadHTML() {
var xhttp = new XMLHttpRequest();
xhttp.onreadystatechange = function() {
if (xhttp.readyState == 4 && xhttp.status == 200) {
var response = xhttp.responseText; // 获取服务器返回的HTML内容
// 在这里对获取到的HTML内容进行处理或显示，例如将其插入到指定的元素中：
var targetElement = document.getElementById("target");
targetElement.innerHTML = response;
}
};
xhttp.open("GET", "your_url", true); // 替换为你要请求的URL地址
xhttp.send();
}
</script>
</head>
<body>
<button onclick="loadHTML()">加载HTML内容</button>
<div id="target"></div> // 用于显示获取到的HTML内容的容器元素，可以根据需要修改ID和样式等属性
</body>
</html>
```