当前位置：首页 > news >正文

快速入门了解Ajax

news 来源：原创 2024/9/20 22:41:10

博客主页：音符犹如代码
系列专栏：JavaWeb
关注博主，后期持续更新系列文章
如果有错误感谢请大家批评指出，及时修改
感谢大家点赞👍收藏⭐评论✍

Ajax的初识

意义：AJAX（Asynchronous JavaScript and XML）即异步 JavaScript 和 XML

作用：

数据交换：允许网页在不重新加载整个页面的情况下，从服务器获取最新的数据。
异步交互：当发送 AJAX 请求获取数据时，页面的其他操作和功能不会被阻塞，由于异步操作不需要等待数据返回就可以继续执行其他任务，能够更有效地利用系统资源，特别是在处理耗时的网络请求时。

原生Ajax:
官网文档：AJAX - XMLHttpRequest 对象

//1. 创建新的 XMLHttpRequest 对象
var xmlHttpRequest  = new XMLHttpRequest();

//2. 发送异步请求
xmlHttpRequest.open('GET','http://~');
xmlHttpRequest.send();//发送请求

//3. 获取服务响应数据
xmlHttpRequest.onreadystatechange = function(){//此处判断 4表示浏览器请求已完成就绪的响应数量，200表示请求的状态好是对的，没有错误if(xmlHttpRequest.readyState == 4 && xmlHttpRequest.status == 200){document.getElementById('div1').innerHTML = xmlHttpRequest.responseText;}
}

上面是一个原生的Ajax的一个写法，但是原生的Ajax太繁琐甚至还有浏览器不兼容的问题，所以现在都是基于原生的Ajax的Axios

Axios

介绍：Axios是简化的Ajax，对传统的Ajax操作的简化和改进，也是一个更强大和便捷的http请求处理的工具

官网：Axios中文文档 | Axios中文网

下边是两个来自官网的post的请求和get请求的代码

axios.post('/user', {firstName: 'Fred',lastName: 'Flintstone'}).then(function (response) {console.log(response);}).catch(function (error) {console.log(error);});

const axios = require('axios');// 向给定ID的用户发起请求
axios.get('/user?ID=12345').then(function (response) {// 处理成功情况console.log(response);}).catch(function (error) {// 处理错误情况console.log(error);}).finally(function () {// 总是会执行});// 上述请求也可以按以下方式完成（可选）
axios.get('/user', {params: {ID: 12345}}).then(function (response) {console.log(response);}).catch(function (error) {console.log(error);}).finally(function () {// 总是会执行});  // 支持async/await用法
async function getUser() {try {const response = await axios.get('/user?ID=12345');console.log(response);} catch (error) {console.error(error);}
}

//请求方式的别名(来自官网)
axios.request(config)
axios.get(url[, config])
axios.delete(url[, config])
axios.head(url[, config])
axios.options(url[, config])
axios.post(url[, data[, config]])
axios.put(url[, data[, config]])
axios.patch(url[, data[, config]])
axios.postForm(url[, data[, config]])
axios.putForm(url[, data[, config]])
axios.patchForm(url[, data[, config]])