快捷導(dǎo)航

Ajax免刷新地前后端交互功能實(shí)例

更新時(shí)間：2025年08月08日 10:37:18 作者：#巖王爺

AJAX是一種在無(wú)需重新加載整個(gè)頁(yè)面的情況下,能夠更新部分網(wǎng)頁(yè)的技術(shù),這篇文章主要介紹了Ajax免刷新地前后端交互的相關(guān)資料,文中通過(guò)代碼介紹的非常詳細(xì),需要的朋友可以參考下

介紹

AJAX (Asynchronous JavaScript and XML) 是一種創(chuàng)建快速動(dòng)態(tài)網(wǎng)頁(yè)應(yīng)用的開(kāi)發(fā)技術(shù)，它允許網(wǎng)頁(yè)在不重新加載整個(gè)頁(yè)面的情況下，與服務(wù)器交換數(shù)據(jù)并更新部分網(wǎng)頁(yè)內(nèi)容。例如，在我們做爬蟲(chóng)的時(shí)候發(fā)現(xiàn)有些頁(yè)面可以打開(kāi)圖片、視頻等資源，但是無(wú)論我們?cè)趺床檎叶紵o(wú)法查到資源的url到底在哪里，這就說(shuō)明網(wǎng)頁(yè)很有可能把資源的url藏在了javascript的代碼中，通過(guò)XMLHttpRequest 對(duì)象向后端發(fā)送請(qǐng)求，在前端篩選處理信息并呈現(xiàn)出來(lái)。

XMLHttpRequest 對(duì)象

所有現(xiàn)代瀏覽器均支持 XMLHttpRequest 對(duì)象。XMLHttpRequest 用于在后臺(tái)與服務(wù)器交換數(shù)據(jù)。這意味著可以在不重新加載整個(gè)網(wǎng)頁(yè)的情況下，對(duì)網(wǎng)頁(yè)的某部分進(jìn)行更新。

在這個(gè)html的代碼中，我們?cè)O(shè)置了一個(gè)按鈕，點(diǎn)擊這個(gè)按鈕就會(huì)觸發(fā)函數(shù)ajax（），在ajax函數(shù)中，我們首先創(chuàng)建了一個(gè)XMLHttpRequest對(duì)象，接下來(lái)使用我們創(chuàng)建的對(duì)象向指定的url發(fā)送get請(qǐng)求，在加載完畢后（onreadystatechange）以后就會(huì)觸發(fā)匿名函數(shù)，把請(qǐng)求的內(nèi)容放到id為aj的標(biāo)簽里面。

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>ajax</title>
    <script>
        function ajax() {
            var xhr = new XMLHttpRequest();
            xhr.onreadystatechange = function() {
                if (xhr.readyState == 4 && xhr.status == 200) {
                    document.getElementById("aj").innerHTML = xhr.responseText;
                }
            }
            xhr.open("GET", "http://127.0.0.1:8000/a", true);
            xhr.send();
        }
    </script>
</head>
<body>
    <button onclick="ajax()">click me</button>
    <div id="aj"></div>
</body>
</html>

我們創(chuàng)建了一個(gè)服務(wù)器監(jiān)聽(tīng)8000端口，并且設(shè)置這個(gè)網(wǎng)頁(yè)的url為……/a，但是我們使用瀏覽器打開(kāi)html文件以后發(fā)現(xiàn)，怎么點(diǎn)擊按鈕都打不開(kāi)。

在束手無(wú)策的時(shí)候，我們不得已打開(kāi)抓包工具，然后查看console(終端)發(fā)現(xiàn)它給我們的提示是：

這個(gè)報(bào)錯(cuò)給我們的提示大概內(nèi)容是不允許我們的內(nèi)容跨站加載（瀏覽器的同源策略），于是要想訪問(wèn)127.0.0.1：8000我們現(xiàn)在要做的就是把這個(gè)html文件也放到對(duì)應(yīng)的url上。為了更快加載這些資源，我們這次選擇php語(yǔ)言做服務(wù)端。

<?php
    $request_url = $_SERVER['REQUEST_URI'];
    
    $request_url = rtrim($request_url, '/');
    $request_url = ltrim($request_url, '/') ;

    switch($request_url){
        case 'a':
            echo "Hello from A";
            break;
        case 'b':
            if(file_exists("1.html")){
                include("1.html");                
            }else{
                echo "not found file 1.html";
            }
            break;
        default:
            echo "404 Not Found";
            break;
    }
?>

這個(gè)代碼的大致思路是通過(guò)$_SERVER['REQUEST_URL']獲得我們輸入的url，在接下來(lái)的rtrim和ltrim函數(shù)中，我們把獲得的url前后的'/'去掉，接下來(lái)通過(guò)switch根據(jù)不同的url向客戶(hù)端返回不同的網(wǎng)頁(yè)。之后我們?cè)诮K端輸入php -S 127.0.0.1:8000 filename.php這樣我們的服務(wù)器就會(huì)運(yùn)行在指定的端口。

再在終端打開(kāi)測(cè)試即可。

接下來(lái)我們點(diǎn)擊按鈕后發(fā)現(xiàn)，瀏覽器沒(méi)有刷新頁(yè)面就給我們加載出來(lái)了想要的信息。

onkeyup

在上面的代碼中，我們每次點(diǎn)擊按鈕都會(huì)給我們進(jìn)行一次請(qǐng)求，但是這樣使用起來(lái)顯然有點(diǎn)麻煩，我們?nèi)绻斎肽承?yàn)證類(lèi)的東西，每次都要重新點(diǎn)擊會(huì)加重我們的負(fù)擔(dān)，那么在html標(biāo)簽中給我們準(zhǔn)備了onkeyup，讓我們可以改變輸入的值以后就會(huì)被瀏覽器檢測(cè)到，進(jìn)而讓我們不再需要點(diǎn)擊，而是直接輸入改變值就可以和后端對(duì)接。

onkeyup 是一個(gè)HTML事件屬性，用于在用戶(hù)釋放鍵盤(pán)上的某個(gè)鍵時(shí)觸發(fā)指定的 JavaScript 函數(shù)或代碼。這個(gè)事件通常用于捕獲用戶(hù)在輸入框中輸入的內(nèi)容，并在用戶(hù)停止輸入時(shí)執(zhí)行某些操作，例如實(shí)時(shí)搜索、驗(yàn)證輸入或動(dòng)態(tài)更新頁(yè)面內(nèi)容。

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>sub</title>
    <script>
        function showHint(str) {
            if (str.length == 0) {
                document.getElementById("hint").innerHTML = "";
                return;
            } else {
                var xmlhttp = new XMLHttpRequest();
                xmlhttp.onreadystatechange = function() {
                    if (this.readyState == 4 && this.status == 200) {
                        document.getElementById("hint").innerHTML = this.responseText;
                    }
                };
                xmlhttp.open("GET", "http://127.0.0.1:8000/sub?id=" + str, true);
                xmlhttp.send();
            }
        }
    </script>
</head>
<body>
    <input type="text" onkeyup="showHint(this.value)">
    <div id = "hint"></div>
</body>
</html>

在測(cè)試的過(guò)程中，我做了這樣的一個(gè)前端代碼，有一個(gè)文本輸入的input我們每次輸入數(shù)據(jù)都可以觸發(fā)函數(shù)showHint()。接下來(lái)我們看一下服務(wù)端怎么構(gòu)造。

<?php
    $request_url = $_SERVER['REQUEST_URI'];
    
    $request_url = rtrim($request_url, '/');

    $parsed_url = parse_url($request_url);
    $path = $parsed_url['path'] ?? '';
    $query = $parsed_url['query'] ?? '';
    
    $path = ltrim($path, '/');

    switch($path){
        case 'a':
            echo "Hello from A";
            break;
        case 'b':
            if(file_exists("1.html")){
                include("1.html");                
            }else{
                echo "not found file 1.html";
            }
            break;
        case 'sub':
            parse_str($query, $query_params);
            $id = $query_params['id'] ?? '';

            if(!isset($id) || empty($id)){
                include("2.html");
            }else if($id === '1'){
                echo "這是１";
            }else if($id === '2'){
                echo "這是２";
            }else{
                echo "not found";
            }
            break;
        default:
            echo "404 Not Found";
            break;
    }
?>

在這個(gè)代碼中，我們輸入的url為……/sub時(shí)就會(huì)呈現(xiàn)html文件，里面是一個(gè)輸入框。我們可以傳入?yún)?shù)，html文件會(huì)給我們的服務(wù)端發(fā)送帶著id參數(shù)的請(qǐng)求，而不同的id則會(huì)觸發(fā)不同的提示。

fetch函數(shù)

Fetch API 是一種現(xiàn)代的、功能強(qiáng)大的網(wǎng)絡(luò)請(qǐng)求工具，它允許你通過(guò) JavaScript 異步地請(qǐng)求資源，而不需要使用傳統(tǒng)的 XMLHttpRequest 對(duì)象。Fetch API 可以簡(jiǎn)潔地發(fā)起 HTTP 請(qǐng)求，并處理服務(wù)器的響應(yīng)。Fetch API 基于 Promise 設(shè)計(jì)，使得異步操作更加簡(jiǎn)潔和易于理解。

fetch函數(shù)的使用會(huì)讓你的代碼更加易讀，使用它處理url會(huì)讓代碼更加優(yōu)雅。它的基本使用方法是：

fetch(url)
  .then(response => response.json()) // 解析 JSON 數(shù)據(jù)
  .then(data => console.log(data))   // 處理數(shù)據(jù)
  .catch(error => console.error('Error:', error)); // 錯(cuò)誤處理

我們按照這種方法修改一下2.html的代碼。

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>sub</title>
    <script>
        function showHint(str) {
            if (str.length == 0) {
                document.getElementById("hint").innerHTML = "";
                return;
            } else {
                fetch("http://127.0.0.1:8000/sub?id=" + str)
                   .then(response => response.json())
                   .then(data => {
                        document.getElementById("hint").innerHTML = data.result;
                    })
                   .catch(error => console.log(error));
            }
        }
    </script>
</head>
<body>
    <input type="text" onkeyup="showHint(this.value)">
    <div id = "hint"></div>
</body>
</html>

注意：一定要按照1.加載數(shù)據(jù)2.處理數(shù)據(jù)3.捕獲異常的順序，1和2不能合并在一起，因?yàn)閖s沒(méi)有多線程的編程方法，這就導(dǎo)致了它的異步工作處理非常發(fā)達(dá)，如果1和2寫(xiě)在一起，就會(huì)導(dǎo)致，數(shù)據(jù)還沒(méi)有從服務(wù)器發(fā)過(guò)來(lái)就被開(kāi)始處理，這通常會(huì)導(dǎo)致報(bào)錯(cuò)。

測(cè)試后發(fā)現(xiàn)和之前相同，能正常使用