一. 访问网页的四种方式
1. 浏览器地址栏输入
用户在浏览器地址栏手动输入 URL，主动触发请求，结果在当前窗口 / 标签页加载。
2. HTML 标签自动请求
在 HTML 文档的<head>或<body>中，部分标签会自动发起请求，无需用户手动操作：
<script src="...">：加载外部 JavaScript 文件时自动请求；<link rel="stylesheet" href="...">：加载外部 CSS 样式表时自动请求；<img src="...">：加载图片资源时自动请求。
这些请求由浏览器解析 HTML 时自动触发，用于获取页面所需的依赖资源（脚本、样式、图片等），以完成页面的渲染。
3. 标签手动触发请求
用户操作特定标签触发，通常伴随页面跳转：
<a href="...">：用户点击链接时，请求href指向的 URL，默认在当前或新窗口打开目标页面；<form action="..." method="...">：用户提交表单（如点击提交按钮）时，按method（GET/POST 等）向action指定的 URL 发送数据，请求结果通常在新页面或当前页面加载显示。
这类请求依赖用户主动操作，且默认行为多为页面跳转。
4. JavaScript 动态请求
通过 JavaScript 代码（通常绑定到用户事件，如点击、输入等）主动发送请求，请求和响应处理均由代码控制：
- 触发方式：通过事件（如
onclick、onload）触发 JS 代码，调用XMLHttpRequest、fetchAPI 或axios等工具发送请求； - 响应处理：请求成功后，可通过 JS 动态处理响应数据，无需跳转页面：
- 不跳转页面：通过 DOM 编程（如
document.getElementById()、innerHTML等）将数据直接更新到当前页面的 DOM 树中，实现页面局部刷新； - 跳转页面：也可通过
window.location.href等方法强制跳转至新页面。
这种方式灵活度高，是实现 “无刷新页面更新”（如异步加载数据）的核心方式
- 不跳转页面：通过 DOM 编程（如
二 .Ajax
Ajax: 全称Asynchronous JavaScript And XML，即 异步的JavaScript和XML。其作用有如下2点：
1. 作用
与服务器进行数据交换：通过Ajax可以给服务器发送请求，并获取服务器响应的数据。
异步交互：可以在不重新加载整个页面的情况下，与服务器交换数据并更新部分网页的技术，如：搜索联想、 用户名是否可用的校验等等。
XMLHttpRequest 只是实现 Ajax 的一种方式。
原生javascript方式进行ajax
1.实例化一个xmlHttpRequest
2.设置xmlHttpRequest对象的回调函数
3.设置 发送请求的方式 和 路径
4. 发送请求
xmlhttp.onreadystatechange
// 设置xmlHttpRequest对象的回调函数
request.onreadystatechange = function () {
// request.readyState 1 2 3 4
// request.status 响应状态码 响应行状态码
if (request.readyState == 4 && request.status == 200) {
// 接收响应结果，处理结果
}
}<script>
function loadXMLDoc(){
var xmlhttp=new XMLHttpRequest();
// 设置回调函数处理响应结果
xmlhttp.onreadystatechange=function(){
if (xmlhttp.readyState==4 && xmlhttp.status==200)
{
document.getElementById("myDiv").innerHTML=xmlhttp.responseText;
}
}
// 设置请求方式和请求的资源路径
xmlhttp.open("GET","/try/ajax/ajax_info.txt",true);
// 发送请求
xmlhttp.send();
}
</script>