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;"，这样就可以禁止表单提交，因为表单提交不是这节的重点，上节已经讲过了。
