|
@@ -0,0 +1,50 @@
|
|
|
|
|
+<!DOCTYPE html>
|
|
|
|
|
+<html lang="en">
|
|
|
|
|
+
|
|
|
|
|
+<head>
|
|
|
|
|
+ <meta charset="UTF-8">
|
|
|
|
|
+ <meta name="viewport" content="width=device-width, initial-scale=1.0">
|
|
|
|
|
+ <title>Document</title>
|
|
|
|
|
+</head>
|
|
|
|
|
+
|
|
|
|
|
+<body>
|
|
|
|
|
+ <script>
|
|
|
|
|
+ // ajax 基本原理
|
|
|
|
|
+ // 第一步:创建一个对象实例
|
|
|
|
|
+ let xhr = new XMLHttpRequest();
|
|
|
|
|
+ // 第二步:打开连接
|
|
|
|
|
+ // 第一个参数:请求方法(GET、POST)
|
|
|
|
|
+ // 第二个参数:请求路径(/api/getData)
|
|
|
|
|
+ // 第三个参数:是否异步(true) true 表示异步请求,false 表示同步请求
|
|
|
|
|
+ xhr.open("GET", "https://api.thecatapi.com/v1/images/search");
|
|
|
|
|
+ // 第三步:发送请求
|
|
|
|
|
+ xhr.send();
|
|
|
|
|
+ // 第四步:接收响应
|
|
|
|
|
+ xhr.onreadystatechange = function () {
|
|
|
|
|
+ // onreadystatechange 事件:请求状态改变时触发
|
|
|
|
|
+ // readyState 属性:请求状态码,0-4 之间的整数
|
|
|
|
|
+ // 状态码:0-4
|
|
|
|
|
+ // 0:请求未初始化
|
|
|
|
|
+ // 1:服务器连接已建立
|
|
|
|
|
+ // 2:请求已接收
|
|
|
|
|
+ // 3:请求处理中
|
|
|
|
|
+ // 4:请求已完成
|
|
|
|
|
+ if (xhr.readyState === 4) {
|
|
|
|
|
+ // 请求已完成
|
|
|
|
|
+ // 判断请求是否成功 status
|
|
|
|
|
+ if (xhr.status === 200) {
|
|
|
|
|
+ // 请求成功
|
|
|
|
|
+ // 响应体:服务器返回的数据 responseText
|
|
|
|
|
+ console.log(xhr.responseText);
|
|
|
|
|
+ // 解析响应体
|
|
|
|
|
+ let data = JSON.parse(xhr.responseText);
|
|
|
|
|
+ console.log(data);
|
|
|
|
|
+ }
|
|
|
|
|
+ }
|
|
|
|
|
+ }
|
|
|
|
|
+
|
|
|
|
|
+
|
|
|
|
|
+ </script>
|
|
|
|
|
+</body>
|
|
|
|
|
+
|
|
|
|
|
+</html>
|