Iframe实现局部刷新的原理
可以在页面中使用iframe来嵌套其他页面
在iframe中，可以使用js来操作父页面
实现后的效果图：
当焦点从用户名后的文本框中移开时出现的效果
父页面的代码：
<!DOCTYPE html>
<html lang="en">
<head>
<Meta charset="UTF-8">
<title>Title</title>
</head>
<body>
<form action="reg.PHP" method="post">
<ul>
<li><label for="">用户名：</label><input type="text" name="username" id="username"> <span id="message"></span></li>
<li><label for="">密 码：</label><input type="password" name="password" ></li>
<li><label for=""></label><input type="submit" value="注册" ></li>
<iframe src="" frameborder="0" id="ifr"></iframe>
</ul>
</form>
<script type="text/javascript">
var username = document.getElementById("username");
var ifr = document.getElementById("ifr");
//绑定失去焦点事件
username.onblur = function(){
//向iframe发出请求，实际上就是设置其src属性
ifr.src = "doreg.PHP?username=" + username.value;
}
</script>
</body>
</html>
子页面doreg.PHP的代码：
<?PHP
//获取用户名
$username = $_GET['username'];
//对该用户名检测
$message = "";
if($username == "admin"){
$message = "对不起，该用户名已被占用！";
} else {
$message = "恭喜，该用户名可用！";
}
//在子页面编写js代码操作父页面，通过PHP输出一段js代码
echo <<<STR
<script type="text/javascript">
window.parent.document.getElementById("message").innerHTML = "$message";
</script>
STR;