【Ajax基础】-01 (axios、url、http协议、接口文档、form-serialize)-优快云博客

本文链接：https://blog.youkuaiyun.com/2401_88733006/article/details/146981896

思维导图：AJAX阶段

Day01_Ajax入门

知识点自测

如下对象取值的方式哪个正确?
```
let obj = {
     
    name: '黑马'
}
```
A: obj.a

B: obj()a
答案
- A选项正确
哪个赋值会让浏览器解析成标签显示?
```
let ul = document.querySelector('#ul')
let str = `<span>我是span标签</span>`
```
A: ul.innerText = str

B: ul.innerHTML = str
答案
- 选择B, innerText会把字符串当做普通文本现在在ul标签之间, innerHTML会试着把字符串解析成标签, 如果是普通文本则显示普通文本字符串
哪个是获取输入框值的方式?
```
let theInput = document.querySelector('#input')
```
A: theInput.innerHTML

B: theInput.value
答案
- 答案是B, 表单标签设置或获取值用value属性, 其他标签用innerHTML/innerText, 进行设置/获取
哪个是用于获取标签内容?
```
let theP = document.querySelector('#p')
```
A: theP.innerHTML = ‘内容’

B: theP.innerHTML
答案
- 答案是B, 单独出现是获取值在原地, 如果看到=这个符号, 是把右侧的值赋予给左侧的属性, 影响标签展示效果
哪个是数组的映射方法？

A: arr.forEach

B: arr.map
答案
- 答案是B
数组转字符串并指定拼接符的是哪个?

A: arr.join()

B: arr.split()
答案
- 答案是A
函数传参的方式哪个是正确的？
```
function showAlert(msg, className) {
     }
```
A：showAlert(‘消息’, ‘类名’)

B：showAlert()
答案
- 答案是A

以下哪套代码可以实现对象属性的简写？

A：

const username = '老李'
let obj = {
     
  username: username
}

B：

const user = '老李'
let obj = {
     
  username: user
}

答案

答案是A

以下代码的值是多少？
```
const age = 10
const result = age > 18 ? '成年了' : '未成年'
```
A：‘成年了’

B：‘未成年’
答案
- 答案是B
以下哪个方法可以添加一个额外类名？

A：标签对象.classList.add()

B：标签对象.classList.contains()
答案
- 答案是A

学习目标

掌握 axios 相关参数，从服务器获取并解析展示数据
掌握接口文档的查看和使用
掌握在浏览器的 network 面板中查看请求和响应的内容
了解请求和响应报文的组成部分

01.AJAX 概念和 axios 使用

目标

了解 AJAX 概念并掌握 axios 库基本使用

讲解

什么是 AJAX ? mdn
- 使用浏览器的 XMLHttpRequest 对象与服务器通信
- 浏览器网页中，使用 AJAX技术（XHR对象）发起获取省份列表数据的请求，服务器代码响应准备好的省份列表数据给前端，前端拿到数据数组以后，展示到网页
什么是服务器？
- 可以暂时理解为提供数据的一台电脑
为何学 AJAX ?
- 以前我们的数据都是写在代码里固定的, 无法随时变化
- 现在我们的数据可以从服务器上进行获取，让数据变活
怎么学 AJAX ?
- 这里使用一个第三方库叫 axios, 后续在学习 XMLHttpRequest 对象了解 AJAX 底层原理
- 因为 axios 库语法简单，让我们有更多精力关注在与服务器通信上，而且后续 Vue，React 学习中，也使用 axios 库与服务器通信
需求：从服务器获取省份列表数据，展示到页面上（体验 axios 语法的使用）

获取省份列表数据 - 目标资源地址：http://hmajax.itheima.net/api/province
- 完成效果：
接下来讲解 axios 语法，步骤：
引入 axios.js 文件到自己的网页中

axios.js文件链接: https://cdn.jsdelivr.net/npm/axios/dist/axios.min.js
明确axios函数的使用语法
```
axios({
     
  url: '目标资源地址'
}).then((result) => {
     
  // 对服务器返回的数据做后续处理
})
```
注意：请求的 url 地址, 就是标记资源的网址

注意：then 方法这里先体验使用，由来后续会讲到
对应代码

<!DOCTYPE html>
<html lang="en">

<head>
  <meta charset="UTF-8">
  <meta http-equiv="X-UA-Compatible" content="IE=edge">
  <meta name="viewport" content="width=device-width, initial-scale=1.0">
  <title>AJAX概念和axios使用</title>
</head>

<body>
  <!--
    axios库地址：https://cdn.jsdelivr.net/npm/axios/dist/axios.min.js
    省份数据地址：http://hmajax.itheima.net/api/province

    目标: 使用axios库, 获取省份列表数据, 展示到页面上
    1. 引入axios库
  -->
  <p class="my-p"></p>
  <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)
      console.log(result.data.list.join('<br>'))
      // 把准备好省份列表，插入到页面
      document.querySelector('.my-p').innerHTML = result.data.list.join('<br>') 
    })
  </script>
</body>

</html>