不用XMLHttpRequest来模仿AJAX

最新推荐文章于 2024-07-07 19:49:58 发布

mayday526

最新推荐文章于 2024-07-07 19:49:58 发布

阅读量955

点赞数

分类专栏： Javascript PHP 文章标签： ajax xmlhttprequest 服务器

本文链接：https://blog.csdn.net/whd526/article/details/78158405

版权

PHP 同时被 2 个专栏收录

22 篇文章 1 订阅

订阅专栏

Javascript

6 篇文章 1 订阅

订阅专栏

AJAX的原理就是通过XMLHttpRequest对象来对服务端发起请求。所以XMLHttpRequest对象是AJAX的核心。
这里写图片描述

现在我想不通过XMLHttpRequest对象来对服务端发起请求，但不刷新页面。
例：创建一个投票按钮，点击后将请求服务器数据库对数据加一。
前端投票按钮test.html：

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>Document</title>
</head>
<body>
    <a href="./test.php">投票</a>
</body>
</html>

请求的后端页面 test.php

<?php
$mysqli = new mysqli('localhost','root','');
$mysqli->select_db('test');

$query="update vote set votenum = votenum + 1";
$mysqli->query($query);
?>

数据库内容
这里写图片描述

一点击投票按钮能实现数据库自增操作，但是跳转了页面。

方法一：
可以对请求的页面添加一句header("HTTP/1.1 204 No Content");
指定204表示响应执行成功,但没有数据返回,浏览器不用刷新,不用导向新页面。

方法二：可以利用<img>标签加载src的特性来加载服务端页面
前端页面修改为：

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>Document</title>
    <script>
        function vote(){
            var req = document.createElement('img');
            req.setAttribute('src','./test.php');
            //ocument.getElementById('add').appendChild(req);
        }
    </script>
</head>
<body>
    <input type="button" value="投票" onclick="vote()"/>
    <div id="add"></div>
</body>
</html>

前两种方法虽然可以实现无刷新请求服务端页面，但是有局限：
如，携带数据访问时，只能使用GET方法请求；请求的结果无法返回；

方法三解决了这两种局限：利用iframe
前端页面：

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>Document</title>
</head>
<body>
    <?php
    $mysqli = new mysqli('localhost','root','');
    $mysqli->select_db('test');

    $query="select votenum from vote;";
    $res = $mysqli->query($query);
    $row = $res->fetch_assoc();
    ?>
    <form action="./test.php" method="post" target="reqzone">
        <P>
        <input type="hidden" name="add" value="1"/>
        <input type="submit" value="投票" />
        当前票数： <sapn id="votenum"><?php echo $row['votenum'];?></span>
        </p>
    </form>

    <iframe name="reqzone" ></iframe>
</body>
</html>

后端test.php

<?php
$mysqli = new mysqli('localhost','root','');
$mysqli->select_db('test');

$query="update vote set votenum = votenum + 1";
$mysqli->query($query);

$query="select votenum from vote;";
$res = $mysqli->query($query);
$row = $res->fetch_assoc();

echo "当前票数：".$row['votenum'];
?>

这样便可实现无刷新进行POST请求
这里写图片描述

看起来不像是理想中的结果，只是把另一个页面模块挪到一个页面而已？
但是这样的花iframe页面可以用js操控父级页面的内容。
可以在后端页面test.php加上如下的js代码：

<script type="text/javascript">
    parent.document.getElementById('votenum').innerHTML=<?php echo $row['votenum'];?>;
</script>

这里写图片描述

接下来，隐藏iframe
为iframe加上样式
<iframe name="reqzone" width="0" height="0" frameborder="0"></iframe>

结果如下：
这里写图片描述

完美！

mayday526

关注

0
点赞
踩
0

收藏

觉得还不错? 一键收藏
0
评论
不用XMLHttpRequest来模仿AJAX

AJAX的原理就是通过XMLHttpRequest对象来对服务端发起请求。所以XMLHttpRequest对象是AJAX的核心。现在我想不通过XMLHttpRequest对象来对服务端发起请求，但不刷新页面。例：创建一个投票按钮，点击后将请求服务器数据库对数据加一。前端投票按钮test.html：<!DOCTYPE html><html lang="en"><head> <m
复制链接

扫一扫

专栏目录