AJAX入门

热爱前端的小wen

于 2024-03-22 17:08:59 发布

阅读量661

点赞数 20

文章标签： ajax 前端 javascript html css axios

本文链接：https://blog.csdn.net/m0_57184906/article/details/136940849

版权

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

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

3. axios 库的使用：

3.1. 引入 axios.js（在线引用）：

3.2. 使用 axios 函数

3.3. 练习——使用axios库, 获取省份列表数据, 展示到页面上

4. AJAX原理 - XMLHttpRequest

4.1. 定义

4.2. Axios和XMLHttpRequest的关系

4.3. 使用 XMLHttpRequest

1. 什么是AJAX

1.1. 定义

AJAX 是异步的 JavaScript 和 XML ( Asynchronous JavaScript And XML )。简单点，就是使用 XMLHttpRequest 对象与服务器通信。它可以使用 JSON、XML、HTML 和 text 文本等格式发送和接收数据。 AJAX 最吸引人的就是它的"异步"特性，也就是说它可以在不重新刷新页面的情况下与服务器通信，交换数据，或更新页面。

1.2. 概念

AJAX 是浏览器与服务器进行数据通信的技术

2. 怎么使用AJAX

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

基于 XMLHttpRequest 封装、代码简单
Vue、React 项目中都会用到 axios

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

3. axios 库的使用：

3.1. 引入 axios.js（在线引用）：

<script src="https://cdn.jsdelivr.net/npm/axios/dist/axios.min.js"></script>

3.2. 使用 axios 函数

传入配置对象（url，method，parama，data)
再用 .then 回调函数接收结果，并做后续处理

3.3. 练习——使用axios库, 获取省份列表数据, 展示到页面上

axios库地址：https://cdn.jsdelivr.net/npm/axios/dist/axios.min.js

目标资源地址（省份数据地址）：http://hmajax.itheima.net/api/province

<body>
  <p class="my-p"></p>
  // 1. 引入axios库
  <script src="https://cdn.jsdelivr.net/npm/axios/dist/axios.min.js"></script>
  <script>
    // 2. 使用axios函数
    axios({
      url: 'http://hmajax.itheima.net/api/province'
    }).then(result => {
      console.log(result)
      console.log(result.data.list)
      //数组方法join：把数组中所有元素转换成一个字符串
      console.log(result.data.list.join('<br>'))
      // 把准备好省份列表，插入到页面
      document.querySelector('.my-p').innerHTML = result.data.list.join('<br>') 
    })
  </script>
</body>