Ajax異步請(qǐng)求的五個(gè)步驟及實(shí)戰(zhàn)案例

更新時(shí)間：2022年08月01日 12:39:59 作者：隨便944

通過(guò)在后臺(tái)與服務(wù)器進(jìn)行少量數(shù)據(jù)交換,Ajax可以使網(wǎng)頁(yè)實(shí)現(xiàn)異步更新,下面這篇文章主要給大家介紹了關(guān)于Ajax異步請(qǐng)求的五個(gè)步驟及實(shí)戰(zhàn)案例的相關(guān)資料,文中通過(guò)實(shí)例代碼介紹的非常詳細(xì),需要的朋友可以參考下

前言
1.建立xmlHttpRequest異步對(duì)象
2.創(chuàng)建HTTP請(qǐng)求（設(shè)置請(qǐng)求方法和URL）
3.發(fā)送數(shù)據(jù)
4.設(shè)置回調(diào)函數(shù)
5.在回調(diào)函數(shù)中對(duì)不同的響應(yīng)狀態(tài)進(jìn)行處理
案例實(shí)現(xiàn)
總結(jié)

前言

AJAX（Asynchronous JavaScript and XML）：是指一種創(chuàng)建交互式網(wǎng)頁(yè)應(yīng)用的網(wǎng)頁(yè)開(kāi)發(fā)技術(shù)，通過(guò)在后臺(tái)與服務(wù)器進(jìn)行少量數(shù)據(jù)交換，AJAX 可以使網(wǎng)頁(yè)實(shí)現(xiàn)異步更新。這就意味著可以在不重新加載整個(gè)網(wǎng)頁(yè)的情況下，對(duì)網(wǎng)頁(yè)的局部進(jìn)行更新。

1.建立xmlHttpRequest異步對(duì)象

 const xhr=new XMLHttpRequest();

2.創(chuàng)建HTTP請(qǐng)求（設(shè)置請(qǐng)求方法和URL）

//get方式
xhr.open('GET',URL);
 
//post方式發(fā)送數(shù)據(jù)，需要設(shè)置請(qǐng)求頭
xhr.open('POST',URL);
xhr.setRequestHeader('Content-Type','application/x-www-form-urlencoded');

除了method和URL兩個(gè)必選參數(shù)外還有三個(gè)可選參數(shù)：flag,name,password

flag:參數(shù)值為布爾類型，用于指定是否用異步方式。true表異步，false表同步，默認(rèn)為true。

name:

3.發(fā)送數(shù)據(jù)

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

4.設(shè)置回調(diào)函數(shù)

xhr.onreadystatechange = callback；

5.在回調(diào)函數(shù)中對(duì)不同的響應(yīng)狀態(tài)進(jìn)行處理

function callback() {
     //判斷響應(yīng)狀態(tài)碼
     if(xhr.readyState===4){
        // 判斷交互是否成功
        if(xhr.status>=200&&xhr.status<300){
             // console.log(xhr.status);//狀態(tài)碼
             // console.log(xhr.statusText);//狀態(tài)字符串
             // console.log(xhr.getAllResponseHeaders());//所有響應(yīng)頭
             // console.log(xhr.response);//響應(yīng)體
 
             // 獲取服務(wù)器響應(yīng)的數(shù)據(jù)
             result.innerHTML=xhr.response;
        }else{
 
        }
    }
}

ajax中的readyState屬性

0：未初始化。尚未調(diào)用 open()方法。
1：?jiǎn)?dòng)。已經(jīng)調(diào)用 open()方法，但尚未調(diào)用 send()方法。
2：發(fā)送。已經(jīng)調(diào)用 send()方法，但尚未接收到響應(yīng)。
3：接收。已經(jīng)接收到部分響應(yīng)數(shù)據(jù)。
4：完成。已經(jīng)接收到全部響應(yīng)數(shù)據(jù)，而且已經(jīng)可以在客戶端使用了。

只有在XMLHttpRequest對(duì)象完成了以上5個(gè)步驟之后，才可以獲取從服務(wù)器端返回的數(shù)據(jù)。

ajax中的狀態(tài)碼（200-300則表示響應(yīng)成功）

400：請(qǐng)求參數(shù)錯(cuò)誤
401：無(wú)權(quán)限訪問(wèn)
404：訪問(wèn)的資源不存在

案例實(shí)現(xiàn)

案例：獲取天氣信息

格式要求：使用HTML創(chuàng)建一個(gè)輸入框，一個(gè)按鈕，在輸入框中輸入文字后點(diǎn)擊按鈕，即可在下面打印未來(lái)15天的天氣

輸出要求：每個(gè)天氣要求：城市名，溫度，天氣，風(fēng)向，風(fēng)力

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

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

使用 $.get( ) 獲?。?/p>

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( ) 獲?。?/p>

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,{
                    // 傳入必須的參數(shù)
                    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")
            })

結(jié)果截圖：