Ajax和其封装的Axios

Author：Dawn_T17🥥

目录

一.关于XML

二.Ajax

介绍

Ajax工作步骤

原生Ajax- XMLHttpRequest 对象 

1.创建 XMLHttpRequest 对象

2.定义回调函数

4.发送请求

5.标准格式

6.案例 

7.方法和属性

方法

 属性

 原生Ajax被舍弃

 三.Axios

Axios介绍

发送请求 

请求方式别名 

四.案例总结

一.关于XML

XML（可扩展标记语言，Extensible Markup Language）是一种标记语言，设计的目的主要是用于存储和传输数据。

以下是 XML 的一些关键特点和重要方面：

特点：

1. 自描述性：XML 文档中的标记能够清晰地描述数据的含义和结构，使其具有良好的可读性和可理解性。
2. 可扩展性：用户可以根据具体需求自定义标记，从而灵活地适应各种不同的数据类型和结构。
3. 平台无关性：XML 数据可以在不同的操作系统、编程语言和应用程序之间轻松地进行交换和处理，具有很强的跨平台能力。
4. 严格的语法：要求标记必须正确嵌套、属性值需用引号括起来等，以确保数据的准确性和完整性。

结构：

一个 XML 文档通常由以下部分组成：

1. 声明：<?xml version="1.0" encoding="UTF-8"?> ，指定 XML 的版本和编码方式。
2. 根元素：整个文档有且只有一个根元素，它包含了文档中的所有其他元素。
3. 子元素：位于根元素内部，可以多层嵌套。
4. 属性：元素可以具有属性，用于提供关于元素的额外信息。

<?xml version="1.0" encoding="UTF-8"?>
<students>
  <student id="1">
    <name>John</name>
    <age>20</age>
  </student>
  <student id="2">
    <name>Jane</name>
    <age>21</age>
  </student>
</students>

<?xml version="1.0" encoding="UTF-8"?>
<books>
  <book>
    <title>《Java 编程思想》</title>
    <author>Bruce Eckel</author>
  </book>
  <book>
    <title>《Python 从入门到实践》</title>
    <author>Eric Matthes</author>
  </book>
</books>

二.Ajax

介绍

AJAX 并不是编程语言。

AJAX 是一种从网页访问 Web 服务器的技术。

Ajax（Asynchronous JavaScript and XML），即异步 JavaScript 和 XML ，是一种在网页开发中用于实现异步数据交互和页面局部更新的技术组合。

Ajax 的核心概念是在不刷新整个网页的情况下，通过 JavaScript 发送异步请求到服务器，获取数据，并动态更新网页的部分内容。这使得网页能够提供更流畅、更快速和更具响应性的用户体验。

同步（Synchronous）：

当进行同步操作时，程序会按照顺序依次执行每个任务，并且在当前任务完成之前，不会继续执行后续任务。这意味着程序会等待当前操作完成，并获取其结果后，才会继续进行下一步。

例如，在同步的函数调用中，调用者会被阻塞，直到被调用的函数返回结果。这就像你去银行柜台办理业务，你必须等待当前业务办理完成后，才能进行下一个动作。

同步的优点是逻辑简单、易于理解和调试。但缺点是如果某个操作耗时较长，会导致整个程序的执行被阻塞，降低了程序的响应性和效率。

异步（Asynchronous）：

异步操作允许程序在发起一个操作后，不必等待该操作完成就可以继续执行后续的代码。当异步操作完成时，通常会通过回调函数、事件或其他通知机制来告知程序结果。

比如，在异步的网络请求中，程序发送请求后可以继续执行其他任务，当服务器响应返回时，通过事先设置的回调函数来处理响应数据。这类似于你在银行办理业务时，留下电话号码，然后去做其他事情，银行办理完后会打电话通知你。

异步的优点是能够提高程序的并发性和响应性，不会因为某个耗时操作而阻塞整个程序的执行。但异步编程相对复杂，需要处理回调函数、可能的并发问题等，增加了编程的难度和代码的复杂性。

Ajax工作步骤

1. 网页中发生一个事件（页面加载、按钮点击）
2. 由 JavaScript 创建 XMLHttpRequest 对象
3. XMLHttpRequest 对象向 web 服务器发送请求
4. 服务器处理该请求
5. 服务器将响应发送回网页
6. 由 JavaScript 读取响应
7. 由 JavaScript 执行正确的动作（比如更新页面）

原生Ajax- XMLHttpRequest 对象 

XMLHttpRequest 对象是 AJAX 的基石。

1. 创建 XMLHttpRequest 对象
2. 定义回调函数
3. 打开 XMLHttpRequest 对象
4. 向服务器发送请求

XMLHttpRequest 对象

所有现代浏览器都支持 XMLHttpRequest 对象。

XMLHttpRequest 对象可用于在后台与 Web 服务器交换数据。这意味着可以更新网页的部分内容，而无需重新加载整个页面

1.创建 XMLHttpRequest 对象

所有现代浏览器（Chrome、Firefox、IE、Ed