Author：
Dawn_T17🥥
目录
一.关于XML
XML（可扩展标记语言，Extensible Markup Language）是一种标记语言，设计的目的主要是用于存储和传输数据。
以下是 XML 的一些关键特点和重要方面：
特点：
- 自描述性：XML 文档中的标记能够清晰地描述数据的含义和结构，使其具有良好的可读性和可理解性。
- 可扩展性：用户可以根据具体需求自定义标记，从而灵活地适应各种不同的数据类型和结构。
- 平台无关性：XML 数据可以在不同的操作系统、编程语言和应用程序之间轻松地进行交换和处理，具有很强的跨平台能力。
- 严格的语法：要求标记必须正确嵌套、属性值需用引号括起来等，以确保数据的准确性和完整性。
结构：
一个 XML 文档通常由以下部分组成：
- 声明：
<?xml version="1.0" encoding="UTF-8"?>，指定 XML 的版本和编码方式。 - 根元素：整个文档有且只有一个根元素，它包含了文档中的所有其他元素。
- 子元素：位于根元素内部，可以多层嵌套。
- 属性：元素可以具有属性，用于提供关于元素的额外信息。
<?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工作步骤
- 网页中发生一个事件（页面加载、按钮点击）
- 由 JavaScript 创建 XMLHttpRequest 对象
- XMLHttpRequest 对象向 web 服务器发送请求
- 服务器处理该请求
- 服务器将响应发送回网页
- 由 JavaScript 读取响应
- 由 JavaScript 执行正确的动作（比如更新页面）
原生Ajax- XMLHttpRequest 对象
XMLHttpRequest 对象是 AJAX 的基石。
- 创建 XMLHttpRequest 对象
- 定义回调函数
- 打开 XMLHttpRequest 对象
- 向服务器发送请求
XMLHttpRequest 对象
所有现代浏览器都支持 XMLHttpRequest 对象。
XMLHttpRequest 对象可用于在后台与 Web 服务器交换数据。这意味着可以更新网页的部分内容，而无需重新加载整个页面
1.创建 XMLHttpRequest 对象
所有现代浏览器（Chrome、Firefox、IE、Edge、Safari、Opera）都有内置的 XMLHttpRequest 对象。
创建 XMLHttpRequest 对象的语法：
variable = new XMLHttpRequest();2.定义回调函数
回调函数是作为参数传递给另一个函数的函数。
在这种情况下，回调函数应包含响应准备就绪时要执行的代码。
xhttp.onload = function() {
// 当响应准备就绪时要做什么
}4.发送请求
如需向服务器发送请求，您可以使用 XMLHttpRequest 对象的 open() 和 send() 方法：
xhttp.open("GET", "ajax_info.txt");
xhttp.send();5.标准格式
// 创建 XMLHttpRequest 对象
const xhttp = new XMLHttpRequest();
// 定义回调函数
xhttp.onload = function() {
// 您可以在这里使用数据
}
// 发送请求
xhttp.open("GET", "ajax_info.txt");
xhttp.send();6.案例
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta http-equiv="X-UA-Compatible" content="IE=edge">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>原生Ajax</title>
</head>
<body>
<input type="button" value="获取数据" onclick="getData()">
<div id="div1"></div>
</body>
<script>
function getData(){
//1. 创建XMLHttpRequest
var xmlHttpRequest = new XMLHttpRequest();
//2. 发送异步请求
xmlHttpRequest.open('GET','http://yapi.smart-xwork.cn/mock/169327/emp/list');
xmlHttpRequest.send();//发送请求
//3. 获取服务响应数据
xmlHttpRequest.onreadystatechange = function(){
if(xmlHttpRequest.readyState == 4 && xmlHttpRequest.status == 200){
document.getElementById('div1').innerHTML = xmlHttpRequest.responseText;
}
}
}
</script>
</html>先存一份数据，用JSON格式保存
然后点击设置的按钮，在后台异步获取数据并放在div1标签下（就会展示出来）
如下
7.方法和属性
方法
| new XMLHttpRequest() | 创建新的 XMLHttpRequest 对象。 |
| abort() | 取消当前请求。 |
| getAllResponseHeaders() | 返回头部信息。 |
| getResponseHeader() | 返回特定的头部信息。 |
| open(method, url, async, user, psw) | 规定请求。
|
| send() | 向服务器发送请求，用于 GET 请求。 |
| send(string) | 向服务器发送请求，用于 POST 请求。 |
| setRequestHeader() | 将标签/值对添加到要发送的标头。 |
属性
| onload | 定义接收到（加载）请求时要调用的函数。 |
| onreadystatechange | 定义当 readyState 属性发生变化时调用的函数。 |
| readyState | 保存 XMLHttpRequest 的状态。
|
| responseText | 以字符串形式返回响应数据。 |
| responseXML | 以 XML 数据返回响应数据。 |
| status | 返回请求的状态号
如需完整列表请访问 Http 消息参考手册 |
| statusText | 返回状态文本（比如 "OK" 或 "Not Found"） |
原生Ajax被舍弃
原生 Ajax 虽然在早期的 Web 开发中被广泛使用，但现在在一些情况下使用得相对较少
原因：
- 代码复杂性：原生 Ajax 的实现涉及较多的底层细节和状态管理，代码相对复杂，编写和维护起来可能较为繁琐。
- 跨浏览器兼容性：不同浏览器对
XMLHttpRequest对象的实现可能存在细微差异，需要处理兼容性问题。 - 异步编程模型的复杂性：处理异步请求的回调函数可能导致代码可读性降低，出现回调地狱（Callback Hell）的问题，使得代码结构难以理解和维护。
- 新的技术和框架的出现：随着前端开发的发展，出现了许多更高级和方便的技术和框架，如
fetch API、Axios等，它们提供了更简洁、更强大和更易于使用的接口来进行 HTTP 请求。 - 开发效率和代码组织：现代的前端开发更注重开发效率和代码的组织性，新的技术和框架通常能够更好地与组件化开发、状态管理等模式结合，提高开发效率和代码质量。
然而，在某些特定的简单场景或对性能要求极高的情况下，原生 Ajax 仍然可能被使用。但总体而言，对于大多数常见的 Web 开发需求，开发者更倾向于使用更新的、更便捷的技术来进行数据请求和交互。
三.Axios
Axios介绍
发送请求
一.
-
method: "get"：指定请求方法为GET。url: "http://yapi.smart-xwork.cn/mock/169327/emp/list"：指定了要请求的 URL 地址。
.then(result => {...})：这是一个Promise的then方法。当 Axios 发送的请求成功并接收到响应后，then方法会被调用。result：是包含响应数据和相关信息的对象。result.data：获取服务器返回的实际数据，并使用console.log打印到控制台。
二.
axios({...})：创建了一个axios请求的配置对象。method: "post"：指定请求方法为POST。url: "http://yapi.smart - xwork.cn/mock/169327/emp/deleteById"：请求的目标 URL 。data: "id=1"：请求发送的数据，这里是一个键值对id=1。
.then(result => {...})：是axios请求成功后的回调函数。当请求成功并收到响应后，该回调函数会被执行。result：包含了响应的相关信息。console.log(result.data)：打印出响应数据中的data部分。
TIP
当使用 axios 发送请求并处理响应时，result 对象通常包含以下一些常见的属性和方法：
data：这是服务器返回的实际数据。status：HTTP 响应的状态码，例如 200、404 等。statusText：与状态码对应的文本描述，如 "OK" 、"Not Found" 等。headers：响应的头部信息，包含了关于响应的各种元数据，如内容类型、缓存控制等。
请求方式别名
Axios 提供了一些请求方式的别名方法，以便更方便地发送不同类型的请求，常见的包括：
axios.get(url[, config])：用于发送GET请求。axios.post(url, data[, config])：用于发送POST请求。axios.put(url, data[, config])：用于发送PUT请求。axios.delete(url[, config])：用于发送DELETE请求。axios.patch(url, data[, config])：用于发送PATCH请求。
这些别名方法使得在使用 Axios 发送不同类型的 HTTP 请求时，代码更加简洁和直观。
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta http-equiv="X-UA-Compatible" content="IE=edge">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>Ajax-Axios</title>
<script src="js/axios-0.18.0.js"></script>
</head>
<body>
<input type="button" value="获取数据GET" onclick="get()">
<input type="button" value="删除数据POST" onclick="post()">
</body>
<script>
function get(){
//通过axios发送异步请求-get
// axios({
// method: "get",
// url: "http://yapi.smart-xwork.cn/mock/169327/emp/list"
// }).then(result => {
// console.log(result.data);
// })
axios.get("http://yapi.smart-xwork.cn/mock/169327/emp/list").then(result => {
console.log(result.data);
})
}
function post(){
//通过axios发送异步请求-post
// axios({
// method: "post",
// url: "http://yapi.smart-xwork.cn/mock/169327/emp/deleteById",
// data: "id=1"
// }).then(result => {
// console.log(result.data);
// })
axios.post("http://yapi.smart-xwork.cn/mock/169327/emp/deleteById","id=1").then(result => {
console.log(result.data);
})
}
</script>
</html>四.案例总结
要求：在页面加载完成后，后台异步获取数据，并渲染在屏幕上
目标结果：
后台数据（JSON格式）
代码
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta http-equiv="X-UA-Compatible" content="IE=edge">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>Ajax-Axios-案例</title>
<script src="js/axios-0.18.0.js"></script>
<script src="js/vue.js"></script>
</head>
<body>
<div id="app">
<table border="1" cellspacing="0" width="60%">
<tr>
<th>编号</th>
<th>姓名</th>
<th>图像</th>
<th>性别</th>
<th>职位</th>
<th>入职日期</th>
<th>最后操作时间</th>
</tr>
<tr align="center" v-for="(emp,index) in emps">
<td>{{index + 1}}</td>
<td>{{emp.name}}</td>
<td>
<img :src="emp.image" width="70px" height="50px">//‘：’是绑定的缩写形式
</td>
<td>
<span v-if="emp.gender == 1">男</span>
<span v-if="emp.gender == 2">女</span>
</td>
<td>{{emp.job}}</td>
<td>{{emp.entrydate}}</td>
<td>{{emp.updatetime}}</td>
</tr>
</table>
</div>
</body>
<script>
new Vue({
el: "#app",
data: {
emps:[]
},
mounted () {
//发送异步请求,加载数据
axios.get("http://yapi.smart-xwork.cn/mock/169327/emp/list").then(result => {
this.emps = result.data.data;
})
}
});
</script>
</html>TIP：
因为要求在加载完页面后异步请求数据，所以在Vue生命周期中的mounted（挂载）钩子函数里写获得后台数据的Axious代码。
this.emps = result.data.data;这句代码
1.result.data用来获得服务器返回的数据
2.result.data.data表示获得服务器返回的数据中的data数据（JSON文件中有名为data的数据）
3.this.emps Vue中有数据->空的emps数组，用this.调用这个空数组（this指这个Vue）
4.可以直接用等号，将获得数据赋给变量
71
被折叠的 条评论
为什么被折叠?
到【灌水乐园】发言
