24_ajax.html 1.2 KB

1234567891011121314151617181920212223242526272829303132333435
  1. <!DOCTYPE html>
  2. <html lang="en">
  3. <head>
  4. <meta charset="UTF-8">
  5. <meta name="viewport" content="width=device-width, initial-scale=1.0">
  6. <title>Document</title>
  7. </head>
  8. <body>
  9. <script>
  10. // ajax 异步请求
  11. // 第一步 实例化一个XMLHttpRequest对象
  12. let xhr = new XMLHttpRequest();
  13. // 第二步 调用open方法 配置请求参数
  14. // open方法参数说明
  15. // 第一个参数:请求方法 GET/POST
  16. // 第二个参数:请求地址
  17. // 第三个参数:是否异步 true/false
  18. xhr.open('GET',"https://api.thecatapi.com/v1/images/search",true);
  19. // 第三步 调用send方法 发送请求
  20. xhr.send();
  21. // 第四步 监听状态变化
  22. xhr.onreadystatechange = function(){
  23. // 状态码 0 1 2 3 4
  24. // 0: 请求未初始化 1: 服务器连接已建立 2: 请求已接收 3: 请求处理中 4: 请求已完成,且响应已就绪
  25. if(xhr.readyState == 4){
  26. // 状态码 200 表示请求成功
  27. if(xhr.status == 200){
  28. // 响应体
  29. console.log(xhr.responseText);
  30. }
  31. }
  32. }
  33. </script>
  34. </body>
  35. </html>