Ajax-Ajax入门

Ajax入门#

定义：异步 JavaScript 和 XML，或 Ajax 本身不是一种技术，而是一种将一些现有技术结合起来使用的方法，包括：HTML 或 XHTML、CSS、JavaScript、DOM、XML、XSLT、以及最重要的 XMLHttpRequest 对象。当使用结合了这些技术的 Ajax 模型以后，网页应用能够快速地将增量更新呈现在用户界面上，而不需要重载（刷新）整个页面。这使得程序能够更快地回应用户的操作。Ajax 最吸引人的特性是它的“异步”性质，这意味着它可以与 服务器通信、动态交换数据并更新页面 ，而无需刷新页面。

概念：Ajax是浏览器与服务器进行 数据通信 的技术

如何用Ajax#

先使用 axios 库，与服务器进行数据通信

• 基于 XMLHttpRequest 封装、代码简单、月下载量在14亿次
• Vue、React项目中都会用到axios

再学习XMLHttpRequest对象的使用，了解Ajax底层原理

axios使用#

语法：

1. 引入axios.js： https://cdn.jsdelivr.net/npm/axios/dist/axios.min.js
2. 使用axios函数
   • 传入 配置对象
   • 再用 .then 回调函数接收结果，并做后续处理

   axios({
       url:'目标资源地址'
   }).then((result)=>{
       // 对服务器返回的数据做后续处理
   })

例-显示省份数据#

需求：请求目标资源地址，拿到省份列表数据，显示到页面

目标资源地址： http://hmajax.itheima.net/api/province

axios({
    url: 'http://hmajax.itheima.net/api/province'
}).then(result => {
    console.log(result);
    // 拿到省份数据
    console.log(result.data.list.join('
'));
    // 数据插入到页面
    document.querySelector('.province').innerHTML = result.data.list.join('---')
})