Ajax非同步請求的五個步驟及實戰案例

2022-08-01 18:05:33

前言

AJAX（Asynchronous JavaScript and XML）：是指一種建立互動式網頁應用的網頁開發技術，通過在後臺與伺服器進行少量資料交換，AJAX 可以使網頁實現非同步更新。這就意味著可以在不重新載入整個網頁的情況下，對網頁的區域性進行更新。

1.建立xmlHttpRequest非同步物件

 const xhr=new XMLHttpRequest();

2.建立HTTP請求（設定請求方法和URL）

//get方式
xhr.open('GET',URL);
 
//post方式傳送資料，需要設定請求頭
xhr.open('POST',URL);
xhr.setRequestHeader('Content-Type','application/x-www-form-urlencoded');

除了method和URL兩個必選引數外還有三個可選引數：flag,name,password

flag:引數值為布林型別，用於指定是否用非同步方式。true表非同步，false表同步，預設為true。

name:

3.傳送資料

//get不需要傳遞引數
xhr.send(null);
 
//post必須有引數
xhr.send('a=100&b=200&c=300');

4.設定回撥函數

xhr.onreadystatechange = callback；

5.在回撥函數中對不同的響應狀態進行處理

function callback() {
     //判斷響應狀態碼
     if(xhr.readyState===4){
        // 判斷互動是否成功
        if(xhr.status>=200&&xhr.status<300){
             // console.log(xhr.status);//狀態碼
             // console.log(xhr.statusText);//狀態字串
             // console.log(xhr.getAllResponseHeaders());//所有響應頭
             // console.log(xhr.response);//響應體
 
             // 獲取伺服器響應的資料
             result.innerHTML=xhr.response;
        }else{
 
        }
    }
}

ajax中的readyState屬性

0：未初始化。尚未呼叫 open()方法。
1：啟動。已經呼叫 open()方法，但尚未呼叫 send()方法。
2：傳送。已經呼叫 send()方法，但尚未接收到響應。
3：接收。已經接收到部分響應資料。
4：完成。已經接收到全部響應資料，而且已經可以在使用者端使用了。

只有在XMLHttpRequest物件完成了以上5個步驟之後，才可以獲取從伺服器端返回的資料。

ajax中的狀態碼（200-300則表示響應成功）

400：請求引數錯誤
401：無許可權存取
404：存取的資源不存在

案例實現

案例：獲取天氣資訊

格式要求：使用HTML建立一個輸入框，一個按鈕，在輸入框中輸入文字後點選按鈕，即可在下面列印未來15天的天氣

輸出要求：每個天氣要求：城市名，溫度，天氣，風向，風力

API網站：(https://www.apishop.net/#/)

APIKEY：***************

使用 $.get( ) 獲取：

var text = $('#text')
var btn = $('#button')
var div = $('#div1')
btn.click(function(){
    var city = text.val()
    var url = "https://api.apishop.net/common/weather/get15DaysWeatherByArea?apiKey=******="+ city

    $.get(url, function(response){
        console.log(response)
        var list = response.result.dayList;
        console.log(list)
        for(var i = 0; i < list.length; i++){
            div.append("<ul>")
            div.append("<li>" + list[i].area + "</li>")
            div.append("<li>" + list[i].day_air_temperature + "</li>")
            div.append("<li>" + list[i].day_weather + "</li>")
            div.append("<li>" + list[i].day_wind_direction + "</li>")
            div.append("<li>" + list[i].day_wind_power + "</li>")
            div.append("</ul>")
        }

    }, "JSON")
})

使用 $.post( ) 獲取：

var text = $('#text')
var btn = $('#button')
var div = $('#div1')
btn.click(function(){
                var url = "https://api.apishop.net/common/weather/get15DaysWeatherByArea?apiKey=******&area="

                $.post(url,{
                    // 傳入必須的引數
                    area:text.val()
                }, function(response){
                    console.log(response)
                    var list = response.result.dayList;
                    console.log(list)
                    for(var i = 0; i < list.length; i++){
                        div.append("<ul>")
                        div.append("<li>" + list[i].area + "</li>")
                        div.append("<li>" + list[i].day_air_temperature + "</li>")
                        div.append("<li>" + list[i].day_weather + "</li>")
                        div.append("<li>" + list[i].day_wind_direction + "</li>")
                        div.append("<li>" + list[i].day_wind_power + "</li>")
                        div.append("</ul>")
                    }

                }, "JSON")
            })

結果截圖：