1. <!DOCTYPE html>
    2. <html lang="en">
    3. <head>
    4.   <meta charset="UTF-8">
    5.   <meta http-equiv="X-UA-Compatible" content="IE=edge">
    6.   <meta name="viewport" content="width=device-width, initial-scale=1.0">
    7.   <title>Document</title>
    8. </head>
    9. <body>
    10.   <button id="btn">点击发送 AJAX</button>
    11.   <script>
    12.     const btn = document.getElementById('btn')
    14.     btn.addEventListener('click', function(){
    15.       // 1.创建对象
    16.       const xhr = new XMLHttpRequest();
    17.       // 2.初始化
    18.       xhr.open('GET', 'https://api.apiopen.top/getJoke');
    19.       // 3.发送
    20.       xhr.send();
    21.       // 4.处理响应结果
    22.       xhr.onreadystatechange = function(){
    23.         if(xhr.readyState === 4){
    24.           // 判断响应状态码 2xx
    25.           if(xhr.status >= 200 && xhr.status < 300) {
    26.             // 控制台输出响应体
    27.             console.log(xhr.response)
    28.           }else{
    29.             // 控制台输出响应状态码
    30.             console.log(xhr.status)
    31.           }
    32.         }
    33.       }
    34.     })
    35.   </script>
    36. </body>
    37. </html>