JS借助image元素傳送遠端請求（案例實戰）

JavaScript 可以建立一個 image 元素，通過 src 動態向伺服器傳送一個請求，伺服器根據請求響應影象型別的資訊。這是跨域、非同步互動最有效的方法，開銷很小，而且任何伺服器端的異常都不會影響用戶端。

這種方式不能傳送 POST 資料，只能通過 GET 方法附帶簡單的查詢字串。用戶端可以在 image 的 load 事件中監聽伺服器端是否接收了資料，並根據事先約定好的條件，檢查伺服器返回的圖片資訊，判斷伺服器的響應目的。

例如，本節範例設計當響應圖片的寬度大於 2 畫素時，表示登入成功，並進行提示，否則表示登入失敗。

操作步驟

1) 新建網頁文件，儲存為 test.html。

2) 設計登入框結構。頁面程式碼如下：

<div id="login">
    <h1>使用者登入</h1>
    使用者名稱<input name="" id="user" type="text" /><br /><br />
    密 碼<input name="" id="pass" type="password" /><br /><br />
    <input name="submit" type="button" id="submit" value="提交" />
    <span id="title"></div>
</div>

3) 設計使用 image 實現非同步通訊的請求函數。

var imgRequest = function (url) {
    if (typeof url != "string") return ;
    var image = new Image();
    image.src = url;
    image.onload = function () {
        var title = document.getElementById("title");
        title.innerHTML = "";
        if (this.width > 2) {
            console.log("登入成功");
            var image1 = new Image();
            image1.src = "2.png";
            title.appendChild(image1);
        } else {
            console.log("您輸入的使用者名稱或密碼有誤，請重新輸入");
            var image1 = new Image();
            image1.src = "1.png";
            title.appendChild(image1);
        }
    };
    image.onerror = function () {
        console.log("載入失敗");
    };
}

在 imgRequest() 函數體內，建立一個 image 物件，設定它的 src 為伺服器請求地址，然後在 load 載入事件處理常式中檢測圖片載入狀態，如果載入成功，再檢測載入圖片的寬度是否大於 2 畫素，如果大於 2 畫素，說明稽核通過，否則為稽核沒有通過。

4) 定義登入處理常式 login()，在函數體內獲取文字方塊的值，然後連線為字串，附加在 URL 尾部，呼叫 imgRequest() 函數，傳送給伺服器。最後，在頁面初始化 load 事件處理常式中，為按鈕 click 事件系結 login 函數。

window.onload = function () {
    var b = document.getElementById("submit");
    b.onclick = login;
}
var login = function () {
    var user = document.getElementById("user");
    var pass = document.getElementById("pass");
    var s = "server.php?user=" + user.value + "&pass" + pass.value;
    imgRequest(s);

5) 設計伺服器端指令碼，讓伺服器根據接收的使用者登入資訊驗證使用者資訊是否合法，然後根據條件相應不同的圖片。

<?php
    header("Content-Type:text/html; Charset=utf-8");
    header("Content-Type:image/jpeg");
    $user = $_GET["user"];
    $pass = $_GET["pass"];
    if ($user == "admin" && $pass == "admin"){
        $img = imagecreatetruecolor(3, 3);
    }else {
        $img = imagecreatetruecolor(1, 1);
    }
    imagejpeg($img);
    imagedestroy($img);
?>

如果不需要響應返回資料，還可以傳送一個 204 No Centent 響應程式碼，表示無訊息正文，從而避免用戶端繼續等待永遠不會到來的訊息體。

演示效果如下：

---