什么是AJAX?
AJAX是异步的JavaScript和XML。简单来说,就是使用XMLHttpRequest对象与服务器通信。它可以使用JSON,XML,HTML和text文本等格式发送和接收数据。AJAX最吸引人的就是它异步的特性,也就是说它可以在不重新刷新页面的情况下与服务器通信,交换数据或更新页面
概念:AJAX是浏览器与服务器进行数据通信的技术
怎样使用AJAX?
先使用axios库,与服务器进行数据通信
axios使用
语法:
- 引入axios.js : https://cdn.unpkg.net/ npm/ axios/ dist/ axios.min.js(jsdelivr cdn)不能用
- 使用axios函数
传入配置对象,再用.then回调函数接收结果,并做后续处理
axios({
url:'目标资源地址'
}).then((result)=>{
})
使用axios库将省份列表插入到页面
<body>
<script src="https://cdn.unpkg.net/npm/axios/dist/axios.min.js">
</script>
<script>
axios({
url: 'http://hmajax.itheima.net/api/province'
}).then(result => {
console.log(result)
})
</script>
</body>
要从result对象获取数据
console.log(result.data.list)
全部代码:
<body>
<p class="ok"></p>
<script src="https://cdn.unpkg.net/npm/axios/dist/axios.min.js">
</script>
<script>
axios({
url: 'http://hmajax.itheima.net/api/province'
}).then(result => {
console.log(result)
console.log(result.data.list)
console.log(result.data.list.join('<br>'));//拼接字符串
//插入页面
document.querySelector('.ok').innerHTML = result.data.list.join('<br>')
})
</script>
</body>