网站策划做营销推广,免费的黄冈网站有哪些,关键词seo优化公司,注册深圳公司代理记账报税博客主页#xff1a;音符犹如代码系列专栏#xff1a;JavaWeb关注博主#xff0c;后期持续更新系列文章如果有错误感谢请大家批评指出#xff0c;及时修改感谢大家点赞#x1f44d;收藏⭐评论✍ Ajax的初识 意义#xff1a;AJAX#xff08;Asynchronous JavaScript and…博客主页音符犹如代码系列专栏JavaWeb关注博主后期持续更新系列文章如果有错误感谢请大家批评指出及时修改感谢大家点赞收藏⭐评论✍ Ajax的初识 意义AJAXAsynchronous 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?ID12345).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?ID12345);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]])
