| 12345678910111213141516171819202122232425262728293031323334353637383940414243444546474849505152535455565758596061626364656667686970 |
- <!DOCTYPE html>
- <html lang="en">
- <head>
- <meta charset="UTF-8">
- <meta name="viewport" content="width=device-width, initial-scale=1.0">
- <title>Document</title>
- <style>
- #cat img{
- width: 300px;
- height: 300px;
- }
- </style>
- </head>
- <body>
- <div id="cat">
- </div>
- <script src="./js/ajax.js"></script>
- <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[0].url);
- // // 渲染到页面
- // var cat = document.querySelector("#cat");
- // cat.innerHTML = `<img src="${data[0].url}" alt="">`
- // }
- // }
- // }
- // ajax("GET","https://api.thecatapi.com/v1/images/search",function(res){
- // console.log("成功了",res);
- // });
- ajax("GET","./data/a.json",function(res){
- console.log("成功了",res);
- })
-
- </script>
- </body>
- </html>
|
