前端AJAX入门到实战，学习前端框架前必会的（ajax+node.js+webpack+git）（一）

写在开始

学习完了前端三件套（HTML、CSS、JavaScrpt），

在进行框架学习之前，

我们还需要学习一些前置知识，

在当下，我们将初步进行"前后端交互 "、感知"前端工程化"；

在未来，它将并随，并推进，整个的前端框架学习过程；

......

我们继续跟随黑马网课，打下框架学习基础。本次学习的是：

我是Capybara，您的前端学习伙伴，高级网课品鉴官，前端学习测评家

不达目的不放弃，追逐理想的过程本身就难能可贵。

AJAX入门------让数据"活"起来

AJAX 概念和 axios 使用

浏览器大家不陌生，服务器可以暂时理解为一台"提供数据"的电脑（一台二十四小时不关机的电脑）。

我们可以在浏览器的网页中使用AJAX相关对应的代码，

运行时，将会发出一次"请求"（让服务器满足我的要求------例如我要一份省份列表数据），

数据不再直接嵌在代码里，而是从服务器返回，

因此称数据"活"起来了。

如何使用AJAX ------ 可以使用封装好的axios库

axios语法（使用到promise，后续讲解）

需要使用到网络地址

直接点击网址可在浏览器访问到，返回一个对象结构的json字符串

message是提示信息，list才是省份列表数据

打印返回结果result，result为一个对象，其中data属性为服务器返回真正数据。

我们可以通过result.data.list拿到省份列表数据

获取到数据后，数组转字符串（join方法）并插入换行符（<br>），

便可展示到元素上

实践代码：

html 复制代码

<!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>

认识 URL

为什么要认识URL呢？

URL的组成：协议 + 域名 + 资源路径

协议------规定了浏览器和服务器之间传输数据的格式

域名------指出访问的是哪一台服务器电脑

资源路径------标识访问文件在服务器电脑当中的具体位置

尝试获取新闻列表数据

实践代码：

html 复制代码

<!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>查询参数</title>
</head>
<body>
  <!-- 
    城市列表: http://hmajax.itheima.net/api/city
    参数名: pname
    值: 省份名字
  -->
  <p></p>
  <script src="https://cdn.jsdelivr.net/npm/axios/dist/axios.min.js"></script>
  <script>
    axios({
      url: 'http://hmajax.itheima.net/api/city',
      // 查询参数
      params: {
        pname: '辽宁省'
      }
    }).then(result => {
      console.log(result.data.list)
      document.querySelector('p').innerHTML = result.data.list.join('<br>')
    })
  </script>
</body>
</html>

我是Capybara，期待你的点赞支持。