2021-09-23

简易的ajax获取免费的api

今天教大家一个简单的使用ajax获取api的操作，下面是ajax的操作。
首先先创建一个核心对象实例

  const xhr = new XMLHttpRequest()

准备链接

const url = 'http://route.showapi.com/1287-1?showapi_appid=754955&showapi_sign=5b540b79b065451a8c9705d50d95d941'
xhr.open('GET',url,true)

这一步的具体用法为：

语法：变量名.open(method,url,async)
method:http请求方法(get、POST)
url:请求资源路径
async:是否异步处理，取true、false

第三步是发送ajax请求

 xhr.send()

最后一步：处理响应

xhr.onreadystatechange = () => {
           if (xhr.readyState === 4) {
        if (xhr.status === 200) {
          let data = xhr.responseText
          // 将 data 数据解析为 JS 对象
          data = JSON.parse(data)
          const title = data.showapi_res_body.data.copyright
          document.querySelector(".title").innerHTML = title
          const img1 = data.showapi_res_body.data.img_1366
          const img2 = data.showapi_res_body.data.img_1920
          const html = `<li><img src="${img1}"></li><li><img src="${img2}"></li>`
          document.querySelector(".result").innerHTML = html
          const dates = data.showapi_res_body.data.date
          document.querySelector(".day").innerHTML = dates
        }
      }
        }

这一步中readyState表示处理进程，它有四个值：
readyState有四个值，0，1，2，3，4
* 0:请求未初始化
* 1：服务器已建立连接
* 2：请求已接收
* 3：正在处理请求
* 4：请求已完成且响应已就绪
status表示HTTP状态码，这里列举一些常见的：
*200：表示ok
* 403：出错
* 404：未找到

下面是html代码

<h1>每日壁纸</h1>
  日期：<span class="day"></span>

  <h4 class="title"></h4>

  <ul class="result">
  </ul>

下面是css代码

 * {
      margin: 0;
      padding: 0;
    }

    span {
      font-size: 16px;
      font-style: italic;
      color: gray;
    }

看起来是不是很简单呢？这里只涉及到接口数据的调用，以及使用接口数据渲染文档，操作不是很难，我这里使用的是万维易源的api，网站链接https://www.showapi.com/
它上面有写接口是免费的，我展示的这个简单的案例就是使用它上面的接口，大家有兴趣可以去看看！
好了今天就分享到这里了，大家有什么不懂的可以留言哦！