AJAX中服务器响应请求的两种方式

我不是女神ヾ 2022-05-16 08:20 219阅读 0赞

### **先来说一下几种常见的状态码：** ###

**（１）readyState状态码：**

0：请求未初始化

1：服务器连接已建立

2：请求已接收

3：请求处理中

4：请求已完成，且响应已就绪

**（２）HTTP状态码：**

200：服务器成功返回网页

404：请求的网页不存在

503：服务器暂时不可用

### 两种方式： ###

（１）onreadystatechange方式：

<!DOCTYPE html>
    <html>
    <head>
        <meta charset="utf-8">
        <script>
            function loadXMLDoc() {
                // 创建XMLHttpRequest对象
                let xmlhttp = new XMLHttpRequest();
                // 请求未初始化,此时的readyState状态码是0
                console.log(xmlhttp.readyState);
                
                xmlhttp.onreadystatechange= function(){
                   // 进入到onreadystatechange里面,表示请求已完成,在控制台输出1,2,3,4
                    console.log(this.readyState);
                    // 进行判断,如果readystate状态码是4且HTTP状态码是200,表示成功
                    if (this.readyState===4 && this.status===200)
                    {
                        document.getElementById("myDiv").innerHTML=this.responseText;
                    }
                };
    　　　　　　　//在同级目录下新建一个ajax.txt
                xmlhttp.open("GET","ajax.txt",true);
                xmlhttp.send();
            }
        </script>
    </head>
    <body>
    
    <div id="myDiv"><h2>使用 AJAX 修改该文本内容</h2></div>
    <button type="button" onclick="loadXMLDoc()">修改内容</button>
    
    </body>
    </html>

（２）onload方式：监听不到1，2，3，这是它和onreadyState的区别

<!DOCTYPE html>
    <html>
    <head>
        <meta charset="utf-8">
        <script>
            function loadXMLDoc() {
                // 创建XMLHttpRequest对象
                let xmlhttp = new XMLHttpRequest();
                // 请求未初始化,此时的readyState状态码是0
                console.log(xmlhttp.readyState);
                  xmlhttp.onload = function(){
                      // 进入到onload里面,表示请求已完成,在控制台输出4,监听不到1,2,3
                      console.log(this.readyState);
                      document.getElementById("myDiv").innerHTML=this.responseText;
                  };
    　　　　　　　　//在同级目录下新建一个ajax.txt
                xmlhttp.open("GET","ajax.txt",true);
                xmlhttp.send();
            }
        </script>
    </head>
    <body>
    
    <div id="myDiv"><h2>使用 AJAX 修改该文本内容</h2></div>
    <button type="button" onclick="loadXMLDoc()">修改内容</button>
    
    </body>
    </html>