Ajax笔记 - 技术栈

一. 访问网页的四种方式

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、fetch API 或axios等工具发送请求；
响应处理 ：请求成功后，可通过 JS 动态处理响应数据，无需跳转页面：
- 不跳转页面：通过 DOM 编程（如document.getElementById()、innerHTML等）将数据直接更新到当前页面的 DOM 树中，实现页面局部刷新；
- 跳转页面：也可通过window.location.href等方法强制跳转至新页面。
  这种方式灵活度高，是实现 "无刷新页面更新"（如异步加载数据）的核心方式

二 .Ajax

Ajax: 全称Asynchronous JavaScript And XML，即异步的JavaScript和XML。其作用有如下2点：

1. 作用

与服务器进行数据交换：通过Ajax可以给服务器发送请求，并获取服务器响应的数据。

异步交互：可以在不重新加载整个页面的情况下，与服务器交换数据并更新部分网页的技术，如：搜索联想、用户名是否可用的校验等等。

XMLHttpRequest 只是实现 Ajax 的一种方式。

原生javascript方式进行ajax

1.实例化一个xmlHttpRequest

2.设置xmlHttpRequest对象的回调函数

3.设置发送请求的方式和路径

4. 发送请求

xmlhttp.onreadystatechange

javascript 复制代码

// 设置xmlHttpRequest对象的回调函数
            request.onreadystatechange = function () {
                // request.readyState  1 2 3 4
                // request.status     响应状态码 响应行状态码
                if (request.readyState == 4 && request.status == 200) {
                    // 接收响应结果，处理结果
                }
            }

javascript 复制代码

<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>