首页 > 编程笔记 > JavaScript笔记 > Ajax 阅读:197

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 响应代码,表示无消息正文,从而避免客户端继续等待永远不会到来的消息体。

演示效果如下:


 

编程帮,一个分享编程知识的公众号。跟着站长一起学习,每天都有进步。

通俗易懂,深入浅出,一篇文章只讲一个知识点。

文章不深奥,不需要钻研,在公交、在地铁、在厕所都可以阅读,随时随地涨姿势。

文章不涉及代码,不烧脑细胞,人人都可以学习。

当你决定关注「编程帮」,你已然超越了90%的程序员!

编程帮二维码
微信扫描二维码关注

所有教程

优秀文章