不用XMLHttpRequest来模仿AJAX

AJAX的原理就是通过XMLHttpRequest对象来对服务端发起请求。所以XMLHttpRequest对象是AJAX的核心。
不用XMLHttpRequest来模仿AJAX_第1张图片

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


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

请求的后端页面 test.php


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

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

数据库内容
不用XMLHttpRequest来模仿AJAX_第2张图片

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

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

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


<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>Documenttitle>
    <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
前端页面:


<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>Documenttitle>
head>
<body>
    
    $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"> echo $row['votenum'];?>span>
        p>
    form>

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

后端test.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请求
不用XMLHttpRequest来模仿AJAX_第3张图片

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

不用XMLHttpRequest来模仿AJAX_第4张图片

接下来,隐藏iframe
为iframe加上样式

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

完美!

你可能感兴趣的:(Javascript,PHP)