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