远古时代”ajax“实现页面无刷新效果

不使用xmlHttprequest，怎样实现页面无刷新的视觉效果？

1 使用http协议的204状态码

2 利用图片加载的特性，进行资源请求

3 利用css，javascript特性，完成请求

4 利用iframe特性（页面注册，提交表单）

第一个例子：实现投票

<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Strict//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-strict.dtd">
<html xmlns="http://www.w3.org/1999/xhtml" lang="zh-CN">
<head>
<title>新建网页</title>
<Meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
<script type="text/javascript">
function vote() {
    var hh = document.createElement('img'); //创建img标签
    
    // 设置src 属性,浏览器将会请求src对应的资源
    hh.setAttribute('src','./01-vote.PHP');
    
    //document.getElementById('progress').appendChild(hh);
}
</script>

<style type="text/css">
</style>
</head>
    <body>
        <div>
        <p><img src="wmc.jpg" /><p>
        <p><a href="01-vote.PHP">投票方法1</a></p>
        <p><input type="button" value="投票方法2" onclick="vote();" /></p>
        </div>
        <div id="progress"></div>
    </body>
</html>

PHP 后台处理代码：

<?PHP
$cnt = file_get_contents('./res.txt');
$cnt += 1;
file_put_contents('./res.txt',$cnt);


// 利用HTTP协议的204特性

header('HTTP/1.1 204 No Content');

运行结果：

第二个例子：用户注册，利用iframe特性

<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Strict//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-strict.dtd">
<html xmlns="http://www.w3.org/1999/xhtml" lang="zh-CN">
<head>
<title>新建网页</title>
<Meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
<style type="text/css">
</style>
</head>
    <body>
        <div id="regres"></div>
        <form action="02-reg.PHP" method="post" target="regzone">
            <p>用户名:<input type="text" name="username" /></p>
            <p>邮件地址:<input type="text" name="email" /></p>
            <p><input type="submit" name="注册" /></p>
        </form>
        <iframe width="0" height="0" frameBorder="0" name="regzone"></iframe>
    </body>
</html>

PHP 后台代码：

<?PHP
/*
判断,写入数据库等业务逻辑
...
...
*/
//print_r($_POST);
//经过运算,注册成功,$res=1
$res = 1;
?>

<script>
parent.document.getElementById('regres').innerHTML = '注册成功';
</script>

效果：

原文链接：https://www.f2er.com/ajax/166553.html

远古时代”ajax“实现页面无刷新效果

猜你在找的Ajax相关文章