玩命牛的成长记录（十三）——ajax实现局部更新
|
欣欣（1989—）
自动化专业研究生，转行当程序员，在一家国内领先的IT公司工作，业余时间兼职创业，创办网站
欣欣网站制作。
玩命牛（1989—）
欣欣的本科同学，学习非常玩命，本科毕业后去了一家小公司，干得并不称心，正准备转行IT，听说本科同学欣欣正在兼职互联网创业，特邀他一起合租，同时加入了兼职创业的队伍。
ajax实现局部更新
AJAX全名叫做Asynchronous Javascript And XML，读作阿贾克斯，喜欢足球的同学是不是兴奋了呀？ 多说无益，先来个例子大家看看，不过ajax技术涉及到前端和后台，所以要两个文件，后台返回数据的文件叫data.php，前端展示文件叫web.php，来看看代码： data.php： <?php
if(!file_exists("data.txt")) {
$num = 0;
} else {
$num = file_get_contents("data.txt");
$num = $num + 1;
}
file_put_contents("data.txt",$num);
echo $num;
?>
web.php： <!DOCTYPE html>
<head>
<meta charset=utf-8 />
<title>ajax实现局部更新</title>
</head>
<body>
<button id="btn">点我吧</button>
<div id="num"></div>
<script>
var xhr = null;
var refresh = function() {
xhr = new XMLHttpRequest();
xhr.open("GET","data.php",true);
xhr.onreadystatechange = callback;
xhr.send(null);
}
var callback = function() {
if (xhr.readyState == 4) {
if (xhr.status == 200) {
alert(xhr.responseText);
document.getElementById("num").innerText = xhr.responseText;
}
}
}
document.getElementById("btn").onclick = function() {
refresh();
}
refresh();
</script>
</body>
check the result
这个例子要详细解释一下，首先来看data.php，file_exist方法可以判断一个文件存不存在，file_get_contents可以读取文件的内容，file_put_contents可以向文件写入内容，所以data.php的逻辑就是从文件中读出num，然后加一，再存入文件，初识时num为0。这个php文件，你可以通过浏览器输入路径直接访问，但是我们要用ajax来访问。 再来看web.php，关键是refresh函数，它就是ajax，xhr = new XMLHttpRequest();，是初始化一个ajax对象，xhr.open("GET",true);，是设置使用get请求data.php，异步的，xhr.onreadystatechange = callback;，是设置回调函数，也就是当数据请求到时，会调用的函数。xhr.send(null);，这是发送请求。同样重要的还有刚刚设置的回调函数callback，如果xhr.readyState为4而且xhr.status为200，表示我们请求成功，返回的数据在xhr.responseText中，这时候我们可以使用javascript去更新我们想要更新的元素。怎样，是不是很酷？ 我们来看看注册界面怎么使用ajax技术实现无刷新请求。我们需要改一改register.php，还要新增一个接口checkuser.php。先看看代码： checkuser.php： <?php
require_once dirname ( __FILE__ ) . '/../../../../common/SQLHelper.class.php';
if(isset($_POST['username'])) {
$sqlHelper = new SQLHelper();
$sql = "select count(id) as count from test where username='" . $_POST['username'] . "'";
$res = $sqlHelper->execute_dql_array($sql);
if($res[0]['count'] > 0) {
echo "false";
} else {
echo "true";
}
} else {
echo "false";
}
?>
register.php： <!DOCTYPE html>
<head>
<meta charset=utf-8 />
<title>ajax实现局部更新</title>
<style>
.info {
color : red;
}
</style>
</head>
<body>
<form action="handler.php" method="post">
<input type="text" name="username" id="username" placeholder="请输入用户名" />
<span id="info" class="info"></span><br/>
<input type="password" name="password" placeholder="请输入密码" /><br/>
<input type="hidden" name="type" value="register" /><br/>
<input type="submit" value="注册" onclick="return false;" /><br/>
</form>
有账号？直接<a href="login.php">登陆</a>
<script>
var xhr = null;
var check = function() {
xhr = new XMLHttpRequest();
xhr.open("POST","checkuser.php",true);
xhr.setRequestHeader("Content-Type","application/x-www-form-urlencoded");
xhr.onreadystatechange = callback;
xhr.send("username=" + document.getElementById("username").value);
}
var callback = function() {
if (xhr.readyState == 4) {
if (xhr.status == 200) {
if(xhr.responseText == "true") {
document.getElementById("info").innerText = "";
} else {
document.getElementById("info").innerText = "用户名已存在";
}
}
}
}
document.getElementById("username").onblur = check;
</script>
</body>
check the result
在checkuser.php中，我们按照username来查纪录，如果有纪录则返回false，表示用户名已存在。 在chechuser.php中，我们使用post方法来请求，与get不同的是，需要加上xhr.setRequestHeader("Content-Type","application/x-www-form-urlencoded");，这一句来设置请求头，另外就是在xhr.send中传递参数。其他处理逻辑类似啦，需要注意的是，onblur是输入框控件失去焦点的事件，也就是我们点击输入框，输入用户名后，再点击别的地方会触发的事件，这里我们正好可以判断用户名是否已存在。另外就是我在注册按钮加了onclick="return false;"，这样就可以禁止表单提交，因为表单提交不是这节的重点，上节已经讲过了。 AJAX是非常重要的技术，它不仅可以提高用户体验，而且可以节省用户带宽，是开发WEB的必备技能。 （编辑：李大同） 【声明】本站内容均来自网络，其相关言论仅代表作者个人观点，不代表本站立场。若无意侵犯到您的权利，请及时与联系站长删除相关内容! |