快捷導(dǎo)航

Ajax狀態(tài)碼的生成順序以及含義介紹

更新時(shí)間：2022年04月26日 10:24:05 作者：農(nóng)碼一生

這篇文章介紹了Ajax狀態(tài)碼的生成順序以及含義，文中通過(guò)示例代碼介紹的非常詳細(xì)。對(duì)大家的學(xué)習(xí)或工作具有一定的參考借鑒價(jià)值，需要的朋友可以參考下

Ajax狀態(tài)碼:

在創(chuàng)建Ajax對(duì)象，配置Ajax對(duì)象，發(fā)送請(qǐng)求，以及接收完服務(wù)器響應(yīng)數(shù)據(jù)，這個(gè)過(guò)程中的每一個(gè)步驟都會(huì)有一個(gè)數(shù)值，這個(gè)數(shù)值就是Ajax的狀態(tài)碼。

根據(jù)xhr.readystate獲取

0：請(qǐng)求已經(jīng)未進(jìn)行初始化(未調(diào)用open方法)
1：請(qǐng)求已經(jīng)建立，但是沒(méi)有發(fā)送(未調(diào)用send方法)
2：請(qǐng)求已經(jīng)發(fā)送(已經(jīng)調(diào)用send方法)
3：請(qǐng)求在正處理，通常響應(yīng)中已經(jīng)有部分?jǐn)?shù)據(jù)可以用了
4：響應(yīng)已經(jīng)完成，可以獲取并使用服務(wù)了

Onreadystatechange事件，xhr.readystate值發(fā)生變化后，自動(dòng)觸發(fā)

代碼案例：

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <meta http-equiv="X-UA-Compatible" content="ie=edge">
    <title></title>
</head>

<style>
</style>

<body>
    <script >
      
        //1.創(chuàng)建Ajax對(duì)象
        var xhr=new XMLHttpRequest(); 
        console.log(xhr.readyState);//---0: 已經(jīng)創(chuàng)建了Ajax的對(duì)象，但是還沒(méi)有進(jìn)行對(duì)ajax進(jìn)行配置
        
        //2.配置Ajax對(duì)象
        xhr.open('get','http://localhost:3000/readyState');
        console.log(xhr.readyState);//1：已經(jīng)對(duì)Ajax對(duì)象進(jìn)行配置，但是還沒(méi)有發(fā)送請(qǐng)求
       
        //3.設(shè)置請(qǐng)求參數(shù)格式的類型(post中必須要進(jìn)行設(shè)置的)
        xhr.setRequestHeader('Content-Type','application/json');//json固定格式
        
        //4.發(fā)送請(qǐng)求
        xhr.onreadystatechange=function(){
            console.log(xhr.readyState);
            // 2： 請(qǐng)求已經(jīng)發(fā)送
            // 3： 已經(jīng)收到服務(wù)端的部分?jǐn)?shù)據(jù)
            // 4： 服務(wù)器端的響應(yīng)數(shù)據(jù)已經(jīng)接收完畢

            //對(duì)Ajax的狀態(tài)碼進(jìn)行判斷，如果狀態(tài)碼為4，代表數(shù)據(jù)已經(jīng)接收完畢，可以進(jìn)行獲取使用
            if(xhr.readyState==4){
                 //5.獲取服務(wù)器端響應(yīng)的數(shù)據(jù)
                console.log(xhr.responseText);
            }
        }
        xhr.send();
        </script>
</body>

</html>
<!-- 
    Ajax狀態(tài)碼:
    在創(chuàng)建Ajax對(duì)象，配置Ajax對(duì)象，發(fā)送請(qǐng)求，以及接收完服務(wù)器響應(yīng)數(shù)據(jù)，這個(gè)過(guò)程中的每一個(gè)步驟都會(huì)有一個(gè)數(shù)值，這個(gè)數(shù)值就是Ajax的狀態(tài)碼。
   
    根據(jù)xhr.readystate獲取
        0： 請(qǐng)求已經(jīng)未進(jìn)行初始化(未調(diào)用open方法)
        1： 請(qǐng)求已經(jīng)建立，但是沒(méi)有發(fā)送(未調(diào)用send方法)
        2： 請(qǐng)求已經(jīng)發(fā)送(已經(jīng)調(diào)用send方法)
        3： 請(qǐng)求在正處理，通常響應(yīng)中已經(jīng)有部分?jǐn)?shù)據(jù)可以用了
        4： 響應(yīng)已經(jīng)完成，可以獲取并使用服務(wù)了

    Onreadystatechange事件，xhr.readystate值發(fā)生變化后，自動(dòng)觸發(fā) 
 -->

到此這篇關(guān)于Ajax狀態(tài)碼的生成順序以及含義的文章就介紹到這了。希望對(duì)大家的學(xué)習(xí)有所幫助，也希望大家多多支持腳本之家。

您可能感興趣的文章: