AJAX(1)——axios库的使用

什么是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>