<!– 什么是AJAX
简单点说，就是XMLHttpRequest对象与服务器通信，它可以使用JSON，XML，HTML，和text文本格式发送和接收数据，
AJAX最吸引人的就是它的异步特性，也就是说它可以在不重新刷新页面的情况下与服务器通信，交换数据，或更新页面。 –>
<!– 概念：AJAX是浏览器与服务器进行数据通信的技术,能把把数据变活 –>
<!– 怎么用AjAX
2.再学习XMLHttp Request对象的使用，了解AJAX底层原理 –>
语法：
要传入配置对象，再用.then回调函数接收结果，并做后续处理
axios({
})
–>
<!– URL
http协议：超文本传输协议，规定浏览器和服务器之间传输数据的格式
–>
<!– URL查询参数
定义：浏览器提供给服务器的额外信息，让服务器返回浏览器想要的数据
语法：http：//xxxx.com/xxx/xxx?参数名=值&参数名2=值2–>
注意：axios在运行时把参数名和值，会拼接到url？参数名=值
–>
<!– method：请求的方法，GET可以省略不区分大小写
POST:提交数据
PUT:修改数据（全部）
PATCH:删除数据
DELETE:修改数据（部分）
–>
语法：在then方法的后面，通过点语法调用catch方法，传入回调函数并定义形参
//请求选项
//处理数据
})
–>
1.请求行：请求方法，URL，协议
2.请求头：以键值对的格式携带的附加信息，比如：Content-type（类型）
4.请求体：发送的资源
–>
响应报文：服务器按照HTTP协议要求的格式，返回给浏览器的内容
2.响应头：以键值对的格式携带的附加信息，比如：Content-Type
4.响应体：返回的资源
比如404：服务器找不到资源
1xx：信息
2xx：成功
–>
接口：使用AJAX和服务器通讯时，使用的URL，请求方法，以及参数
–>
<!–
城市列表: http://hmajax.itheima.net/api/city
–>
<script src=”https://cdn.jsdelivr.net/npm/axios/dist/axios.min.js“></script>
<script>
url: ‘http://hmajax.itheima.net/api/city‘,
// 查询参数
params: {
}
}).then(result => {
document.querySelector(‘p‘).innerHTML = result.data.list.join(‘<br>’)
})
</script>
<button class=”btn”>注册用户</button>
<script src=”https://cdn.jsdelivr.net/npm/axios/dist/axios.min.js“></script>
<script>
/*
注册用户：http://hmajax.itheima.net/api/register
请求方法：POST
参数名：
*/
document.querySelector(‘.btn’).addEventListener(‘click‘, () => {
url: ‘http://hmajax.itheima.net/api/register’,
data: {
username: ‘itheima007’,
password: ‘7654321’
}
}).then(result => {
// 成功
// 失败
console.log(error.response.data.message)
alert(error.response.data.message)
})
})
</body>
</html>
原文地址:https://blog.csdn.net/m0_59745705/article/details/134356690
本文来自互联网用户投稿，该文观点仅代表作者本人，不代表本站立场。本站仅提供信息存储空间服务，不拥有所有权，不承担相关法律责任。
如若转载，请注明出处：http://www.7code.cn/show_17625.html
如若内容造成侵权/违法违规/事实不符，请联系代码007邮箱：suwngjj01@126.com进行投诉反馈，一经查实，立即删除！
