web开发实现页面的局部刷新的技术,除了比较常见的ajax,还有通过iframe来实现,这种方式和ajax有什么不同呢?
首先看一个用ajax技术实现的页面局部刷新的效果——表单登陆。
情况1.不输入用户名,登陆失败。
情况2.输入用户名,密码正确,登陆成功。
上面的效果实现起来很简单,无非就是给按钮绑定点击事件,事件里发送一个ajax请求,请求完成后,回调函数根据返回结果,再操作dom元素。
那同样的表单登陆,用iframe如何实现呢?
先看前端页面的代码:
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>登录</title>
<script type="text/javascript">
/*
隐藏帧实现局部更新
实际上iframe就相当于页面的子页面
*/
</script>
</head>
<body>
<div>
<form action="./iframe.php" method="post" target="myframe">
用户名:<input type="text" name="username"><span id="info"></span><br>
密码:<input type="text" name="password">
<input type="submit" value="登录">
</form>
</div>
<iframe width="0" height="0" frameborder="0" name="myframe"></iframe>
</body>
</html>
页面中首先是一个表单,这个表单与以往表单不同的是,form多了一个target属性,属性值为“myframe”。
在表单的下面有一个iframe元素,这个iframe元素上有个name属性,属性值也为“myframe”。
解释一下target属性的作用,w3school上的介绍:target 属性规定在何处打开 action URL。
如果表单元素没有target这个属性,表单提交后,当前页面会发生跳转;如果有了target属性,页面就不会发生跳转,这种情况下服务端返回的东西输出到哪里呢?
这里就需要用一个iframe来接受服务端返回的数据,并且iframe的name属性必须和表单form的target的属性相同。target指向了一个iframe元素,在iframe中打开action的url。
利用iframe方式,返回的数据与ajax返回的数据是不同的。来看一下iframe返回的后端php代码:
<?php
$uname = $_POST['username'];
$pw = $_POST['password'];
if($uname == 'admin' && $pw == '123'){
?>
<script type="text/javascript">
parent.document.getElementById('info').innerHTML = '登录成功';
</script>
<?php }else{ ?>
<script type="text/javascript">
parent.document.getElementById('info').innerHTML = '登录失败';
</script>
<?php } ?>
php代码的解释:接受前端发送的数据,之后根据接受到的结果,输出不同的值。
咱们来看看输出的什么值:
<script type="text/javascript">
parent.document.getElementById('info').innerHTML = '登录成功';
</script>
以上代码有些人会判断是js,说是js是不准确的。这段代码用javascript标签包裹,所以是一段html代码,而js代码中有一个parent.document。通过这段代码可以获取到当前页面中的dom元素,并对其进行操作,看操作结果:
情况1.账号密码正确时,登陆成功。
情况2,账号或密码不正确时,登陆失败。
同样实现了页面的局部刷新,而且用的不是ajax技术。
原理是将表单提交后跳转的页面,指向本页的iframe标签中,iframe刷新后,返回的是后端输出的javascript标签包裹的js代码,而返回的javascript代码可以直接运行,并且可以操作父页面中的元素。
封装原生ajax还得考虑兼容,iframe就不用考虑兼容性的问题,但ajax对比iframe会更加简洁明了。在ajax没有普及之前,web开发的局部刷新用的都是iframe。
有疑问可给此公众号发送信息。
欢迎转发!