Ajax的全称是Asynchronous JavaScript and XML，即异步的JavaScript和XML（传输储存数据）。它是一种在不重新加载整个页面的情况下更新部分页面的技术。
Ajax的原理
1.用户通过页面上的操作（如点击按钮）触发JavaScript函数的执行；
2.JavaScript函数通过XMLHttpRequest对象向服务器发送请求；
3.服务器接收请求后处理数据，并将结果以XML、JSON等格式返回给浏览器；
4.浏览器接收到响应后，使用JavaScript解析数据并进行页面的更新；
5.页面的更新可以是添加、删除或修改DOM元素，也可以是更新部分页面的内容。
Ajax原理中的关键点是异步通信和DOM操作。异步通信指的是浏览器发送请求后可以继续执行其他的操作，并不需要等待服务器返回响应；而DOM操作指的是通过JavaScript动态修改页面的内容。
使用Ajax可以实现快速、动态的页面更新，提高用户的体验和交互性。
使用Ajax请求接收JSON数据
// 创建一个新的XMLHttpRequest对象
var xhr = new XMLHttpRequest();
// 设置请求的URL和方法
var url = 'https://api.example.com/data'; // 替换为你的API地址
xhr.open('GET', url, true); // 第三个参数表示是否异步处理请求
// 设置请求头（如果需要的话）
xhr.setRequestHeader('Content-Type', 'application/json'); // 通常用于POST请求
// 定义回调函数，处理服务器响应
xhr.onload = function () {
if (xhr.status === 200) { // 检查响应状态码是否为200（OK）
try {
// 尝试解析返回的JSON数据
var jsonData = JSON.parse(xhr.responseText);
// 在这里处理JSON数据
console.log(jsonData);
// 或者将其传递给其他函数进行进一步处理
processData(jsonData);
} catch (error) {
// 如果解析JSON失败，打印错误信息
console.error('Error parsing JSON:', error);
}
} else {
// 如果状态码不是200，打印错误信息
console.error('Request failed. Status:', xhr.status);
}
};
// 发送请求
xhr.send();
// 处理数据的函数（示例）
function processData(data) {
// 在这里处理数据
// 例如，更新DOM，发起其他请求等
}使用Ajax请求接收XML数据（不设置请求头是因为默认返回的数据是XML形式）
// 创建一个新的XMLHttpRequest对象
var xhr = new XMLHttpRequest();
// 设置请求的URL和方法
var url = 'https://api.example.com/data.xml'; // 替换为你的API地址，确保返回XML格式数据
xhr.open('GET', url, true); // 第三个参数表示是否异步处理请求
// 设置响应类型为XML
xhr.responseType = 'document';
// 定义回调函数，处理服务器响应
xhr.onload = function () {
if (xhr.status === 200) { // 检查响应状态码是否为200（OK）
// 响应成功，处理XML数据
var xmlDoc = xhr.responseXML; // 这是一个XML文档对象
if (xmlDoc) {
// 解析XML数据
var items = xmlDoc.getElementsByTagName('item'); // 假设<item>是你要获取的元素
for (var i = 0; i < items.length; i++) {
var item = items[i];
// 处理每个item元素，例如读取属性和文本内容
var id = item.getAttribute('id');
var name = item.getAttribute('name');
var value = item.textContent;
// 在这里可以使用这些数据，例如更新DOM或执行其他操作
console.log('ID: ' + id + ', Name: ' + name + ', Value: ' + value);
}
} else {
console.error('Failed to load XML document');
}
} else {
// 如果状态码不是200，打印错误信息
console.error('Request failed. Status:', xhr.status);
}
};
// 设置错误处理函数
xhr.onerror = function () {
console.error('XMLHttpRequest error occurred');
};
// 发送请求
xhr.send();扩展：Ajax的封装Axios
1.请求传参
import axios from 'axios';
async function postData() {
try {
const response = await axios.post('https://api.example.com/data', {
firstName: 'Fred',
lastName: 'Flintstone'
});
console.log(response.data);
} catch (error) {
console.error('Error posting data:', error);
}
}
postData();在上面示例中，我们传递了一个包含firstName和lastName属性的对象作为第二个参数给axios.post方法。axios会自动将这个对象转换为以下的JSON字符串：
{
"firstName": "Fred",
"lastName": "Flintstone"
}同时，axios会自动的设置请求的Content-Type为application/json，告诉服务器它正在发送一个JSON格式的数据体。
如果需要发送一个原始的字符串，例如XML数据，可以这样做：
import axios from 'axios';
async function postXMLData() {
try {
const xmlString = '<request><data>Some XML content</data></request>';
const response = await axios.post('https://api.example.com/data', xmlString, {
headers: {
'Content-Type': 'application/xml' // 手动设置
}
});
console.log(response.data);
} catch (error) {
console.error('Error posting XML data:', error);
}
}
postXMLData();2.接收返回值
在这个例子中，response.data通常是一个JavaScript对象，因为axios默认会将JSON字符串解析为对象。因此，你可以直接访问它的属性和方法，就像处理普通的JavaScript对象一样。
axios.get('https://api.example.com/data')
.then(response => {
// response.data 通常是服务器返回的JSON数据，已经自动被axios解析为JavaScript对象
console.log(response.data);
})
.catch(error => {
console.error(error);
}); 在这个例子中，通过设置responseType为'text'，我们告诉axios不要自动解析响应数据，这样我们就可以手动使用JSON.parse()来解析它。不过，在大多数情况下，让axios自动处理JSON解析会更加方便。
axios.get('https://api.example.com/data', { responseType: 'text' })
.then(response => {
// 手动解析JSON字符串为JavaScript对象
let data = JSON.parse(response.data);
console.log(data);
})
.catch(error => {
console.error(error);
});获取XML格式的数据并使用：
<template>
<div>
<div v-if="error">Error: {{ error }}</div>
<div v-else>
<ul>
<li v-for="item in xmlData" :key="item.id">
{{ item.nodeName }} - {{ item.textContent }}
</li>
</ul>
</div>
</div>
</template>
<script>
import axios from 'axios';
export default {
data() {
return {
xmlData: null,
error: null
};
},
async created() {
try {
const response = await axios.get('https://api.example.com/data', {
responseType: 'document' // 指定返回XML格式数据
});
// 解析XML数据
const parser = new DOMParser();
const xmlDoc = parser.parseFromString(response.data, 'text/xml');
// 从XML文档中读取数据
const items = xmlDoc.getElementsByTagName('item'); // 假设每个item是你想要的数据节点
this.xmlData = [];
for (let i = 0; i < items.length; i++) {
const item = items[i];
// 这里可以根据XML结构读取属性或文本内容
const data = {
id: item.getAttribute('id'),
name: item.getAttribute('name'),
value: item.textContent
};
this.xmlData.push(data);
}
} catch (error) {
this.error = 'An error occurred while fetching the XML data.';
console.error(error);
}
}
};
</script>
