Ajax(小黄人)工作原理与JSON转JS不同的编程语句数据类型是不一样的。为了解决这个问题，人们发明了一种所有编程之言

1.1-Ajax前后端交互流程

1.服务器 就是提供某种服务的 电脑(机器)

2.如何让电脑提供某种服务呢？安装软件
- 想让你的电脑提供 听歌 服务，需要装什么软件呢？
- - 网易云、qq音乐
- 想让你的电脑提供 视频 服务，需要装什么软件呢？
- - 爱奇艺，优酷
- 想让你的电脑提供 聊天 服务，需要装什么软件呢？
- - qq，微信
3.综上所述，服务器就是某些安装了特殊软件，可以提供某些服务的电脑。常见的服务器有以下几种
- 数据库服务
- 文件服务
- 多媒体服务(音视频)
- 邮件服务
- Web服务
4.要想让你的电脑成为一台Web服务器，我们只需要安装对应的软件即可。
- 由于这些软件涉及的专业知识属于后台开发领域，我们的重点是了解什么是服务器，并且我们是前端开发，所以我们主要学习如何使用前端中的软件来和服务器进行交互。那么我们前端主要使用什么软件来和服务器进行交互呢？（Chrome）

1.2-ajax的工作流程(代码02)

1.创建XMLHttpRequest对象（俗称小黄人）
- let xhr = new XMLHttpRequest();
2.设置请求
- xhr.open('get', 'https://autumnfish.cn/api/joke');
3.发送请求
- xhr.send();
4.注册回调函数
- - 这个函数不是立即执行的，而是等服务器把数据响应返回才会执行（PS：什么时候执行取决于你的网速快慢）
  - xhr.onload = function () {console.log(xhr.responseText);}

 /* 1.ajax： 在页面不刷新的情况下向服务器请求数据
           2.XMLHttpRequest ： http请求对象，负责实现ajax技术（小黄人）
                （1）创建XMLHttpRequest对象
                        * 小黄人，相当于黄袍加身的跑腿外卖小哥哥
                （2）设置请求
                        * 告诉小黄人服务器地址
                （3）发送请求
                        * 小黄人出发去指定地址取外卖（数据）
                            * 2G网速：走路去的
                            * 3G网速：骑膜拜去的
                            * WIFI : 骑电动车去的
                            * 4G   ： 骑小牛牌电动车去的
                （4）注册回调函数
                        * 小黄人把取回的外卖送到你家门口
        
         */

        //1.创建小黄人对象XMLHTTPRequest
        let xhr = new XMLHttpRequest();
        //2.设置请求
        xhr.open('get', 'https://autumnfish.cn/api/joke');
        //3.发送请求
        xhr.send();
        //4.注册回调函数
        /* 这个函数不是立即执行的，而是等服务器把数据响应返回才会执行（PS：什么时候执行取决于你的网速快慢） */
        xhr.onload = function () {
            console.log(xhr.responseText);
            document.body.innerText = xhr.responseText;
        };

1.3Ajax发送get请求与post请求

1.1-get请求

 <script>
      /*
        1.get传参格式： url?key=value
        2.示例： https://autumnfish.cn/api/joke/list?num=10
      */

      // 1.实例化ajax对象
      let xhr = new XMLHttpRequest()
      // 2.设置请求方法和地址
      // get请求的数据直接添加在url的后面 格式是 url?key=value
      xhr.open("get", "https://autumnfish.cn/api/joke/list?num=10")
      // 3.发送请求
      xhr.send()
      // 4.注册回调函数
      xhr.onload = function() {
        console.log(xhr.responseText)
      }
    </script>

1.2-post请求

请求方法get和post区别：传参方式不同

get请求：直接在url后面拼接参数

参数在url中，安全性不高

post请求：

1.需要设置请求头（固定语法）：xhr.setRequestHeader('Content-type','application/x-www-form-urlencoded')

注意：这是固定格式，错一个字母都不行，强烈建议复制粘贴

2.使用xhr的send方法发送参数： xhr.send('参数名=参数值');

注意：不要加前面的 ?

     
      //(1).实例化ajax对象
      let xhr = new XMLHttpRequest()
      //(2).设置请求方法和地址
      xhr.open("post", "https://autumnfish.cn/api/user/register")
      //(3).设置请求头（post请求才需要设置）
      xhr.setRequestHeader("Content-type", "application/x-www-form-urlencoded")
      //(4).发送请求 ： 参数格式  'key=value'
      xhr.send("username=admin")
      //(5).注册回调函数
      xhr.onload = function() {
        console.log(xhr.responseText)
      }

1.2-JSON转JS

1.localStorage如何存储对象类型数据： 使用JSON格式字符串

        2.JSON对象是什么 ： 本质是一种字符串格式
            '{"name":"admin","password","123456"}'
        3.JSON对象作用： 解决跨平台兼容性
            * 实际开发中，我们的数据来源于服务器。 而服务器并不一定是用js语言开发的，例如python、java、c++等，
            不同的编程语句数据类型是不一样的。为了解决这个问题，人们发明了一种所有编程之言都支持的格式，就是JSON格式对象。 json格式本质是一个字符串，里面所有的数据都要用双引号包起来
        4.JSON与js互转
            4.1 json转js : JSON.parse(json对象)
            4.2 js转json :  JSON.stringify(js对象)

水果案例

  <body>
    <div class="app-container" id="app">
      <!-- 顶部banner -->
      <div class="banner-box"><img src="./img/fruit.jpg" alt="" /></div>
      <!-- 面包屑 -->
      <div class="breadcrumb">
        <span>🏠</span>
        /
        <span>水果列表</span>
      </div>
      <!-- table -->
      <div class="main">
        <div class="table">
          <!-- 头部 -->
          <div class="thead">
            <div class="tr">
              <div class="th">名字</div>
              <div class="th">图片</div>
              <div class="th">简介</div>
              <div class="th">操作</div>
            </div>
          </div>
          <div class="tbody">
            <div class="tr">
              <div class="td">火龙果</div>
              <div class="td">
                <img alt="" src="./img/火龙果.png" />
              </div>
              <div class="td">
                <span class="my-input__inner count">一种好吃的水果</span>
              </div>
              <div class="td">
                <button class="info">查看详情</button>
              </div>
            </div>
          </div>
        </div>
      </div>
    </div>

    <script>
      /* 思路分析
      1.页面一加载,发送ajax请求
      2.服务器响应数据,渲染到页面
      */

      //(1).实例化ajax对象
      let xhr = new XMLHttpRequest()
      //(2).设置请求方法和地址
      //get请求的数据直接添加在url的后面 格式是 url?key=value
      xhr.open("get", "https://autumnfish.cn/fruitApi/fruits")
      //(3).发送请求
      xhr.send()
      //(4).注册回调函数
      xhr.onload = function() {
        // 4.1 将JSON ——> JS对象
        let res = JSON.parse(xhr.responseText)
        console.log(res)
        // 4.2 渲染页面
        renderData(res.data)
      }

      /* 将数据渲染到页面有两种方式
      第一种：DOM驱动。(选择性忘记)  
        方式: 遍历数组,创建元素添加到页面
        弊端: DOM操作比较繁琐
      第二种: 数据驱动。(vew工作常用) 
        方式: 遍历数组,拼接html字符串直接替换innerHTML
        好处: 无需操作DOM,只需要操作数据即可
      */
      const renderData = arr => {
        document.querySelector(".tbody").innerHTML = arr.map(item => {
          return `<div class="tr">
              <div class="td">${item.name}</div>
              <div class="td">
                <img alt="" src="${item.icon}" />
              </div>
              <div class="td">
                <span class="my-input__inner count">${item.info}</span>
              </div>
              <div class="td">
                <button class="info">查看详情</button>
              </div>
            </div>`
          }).join("")
      }
    </script>