Ajax入门程序

莱莱 · 2024-11-29 12:41:47

        前端和后台本来是没有联系的，前端想要从后台获取数据，就必须涉及到两个程序的交互，而Ajax就是用于完成两端交互的技术。
        Ajax：Asynchronous JavaScript And XML：异步的JavaScript和XML。
        异步交互：可以在不重新加载整个页面的情况下，和服务器举行互换数据并更新部分网页，比如：搜索遐想、用户名校验。
        Ajax的重要作用：
1.和服务器举行数据交互
前端资源虽然被浏览器分析了，但是缺少数据；可以通过Ajax技术，像后台服务器发起请求，后台服务器收到前端请求。
        从数据库中按要求获取数据响应给前端，前端得到数据，再渲染展示。
2.异步交互
可以在不重新加载整个页面的情况下，和服务器互换数据，并更新部分网页。
同步和异步：
同步请求：服务器接收，服务器处置惩罚请求，必要时间——此时客户端必须等待服务器响应的时间，等到服务端响应之后，客户端才能继续处置惩罚。
异步请求：其他和同步请求类似，但是只是在等待服务端响应的时候，客户端可以举行其他操纵，无需等待。

<!DOCTYPE html>
<html lang="zh-CN">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>Ajax入门</title>
</head>
<body>
</body>
<script>
// 前端和后台本来是没有联系的，前端想要从后台获取数据，就必须涉及到两个程序的交互，而Ajax就是用于完成两端交互的技术
// Ajax：Asynchronous JavaScript And XML：异步的JavaScript和XML
// 异步交互：可以在不重新加载整个页面的情况下，和服务器进行交换数据并更新部分网页，比如：搜索联想、用户名校验
// Ajax的主要作用：
// 1.和服务器进行数据交互
// 前端资源虽然被浏览器解析了，但是缺少数据；可以通过Ajax技术，像后台服务器发起请求，后台服务器收到前端请求
// 从数据库中按要求获取数据响应给前端，前端得到数据，再渲染展示
// 2.异步交互
// 可以在不重新加载整个页面的情况下，和服务器交换数据，并更新部分网页
// 同步和异步：
// 同步请求：服务器接收，服务器处理请求，需要时间——此时客户端必须等待服务器响应的时间，等到服务端响应之后，客户端才能继续处理
// 异步请求：其他和同步请求类似，但是只是在等待服务端响应的时候，客户端可以进行其他操作，无需等待
</script>
</html>

复制代码

<!DOCTYPE html>
<html lang="zh-CN">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>Axios</title>
</head>
<body>
<button id="getData" type="button">GET</button>
<button id="postData" type="button">POST</button>
</body>
<script src="js/axios.js"></script>
<script>
// 使用原生的Ajax请求还是比较繁琐，所以说一般使用Axios，Axios是对于Ajax的封装，主要是为了简化书写
// Axios使用比较简单，主要分为两步
// 1.在script标签的src中引入Axios文件
// 特别注意，这里是需要一对单独的script标签进行引入，而不是在引入的script标签中写代码
// 2.编写Axios代码，并绑定按钮
// Get请求：
//GET请求
// document.querySelector('#getData').onclick = function() {
// axios({
// url:'https://mock.apifox.cn/m1/3083103-0-default/emps/list',
// method:'get'
// }).then(function(res) {
// console.log(res.data);
// }).catch(function(err) {
// console.log(err);
// })
// }
// //POST请求
// document.querySelector('#postData').onclick = function() {
// axios({
// url:'https://mock.apifox.cn/m1/3083103-0-default/emps/update',
// method:'post'
// }).then(function(res) {
// console.log(res.data);
// }).catch(function(err) {
// console.log(err);
// })
// }
// Axios还针对了不同请求，提供了不同的api
// axios.请求方式(url, data, config) （data是post请求需要携带的数据，config是配置信息）
// 可以简化代码
document.querySelector("#getData").addEventListener('click', function () {
axios.get("https://mock.apifox.cn/m1/3083103-0-default/emps/list").then(result => {
console.log(result.data)
}).catch(error => {
console.log(error)
});
})
</script>
</html>

复制代码

免责声明：如果侵犯了您的权益，请联系站长，我们会及时删除侵权内容，谢谢合作！更多信息从访问主页：qidao123.com:ToB企服之家，中国第一个企服评测及商务社交产业平台。

		自动登录	找回密码
密码			立即注册

Ajax入门程序

0 个回复

快速回复

楼主热帖

标签云