站长论坛

标题: 以discuz检测用户名为例分析ajax+php（提供源代码） [打印本页]

作者: superadmin 时间: 2008-1-8 20:16
标题: 以discuz检测用户名为例分析ajax+php（提供源代码）
读了下discuz的代码还是感觉很好，今天想学习下ajax，于是就扒下来这段看了下

discuz原程序的验证包括检测用户名是否合法和用户名是否被占用,为了学习方便,就只研究下检测用户名是否被占用的程序吧,因为这个程序基本上把ajax的基础东西都包括了表单文件很简单,就是一个输入用户名的文本框和一个用来存放返回信息的

<input type="text" id="username" name="username" size="25" maxlength="15" onBlur="checkusername()" tabindex="3" />
 

这里面有个onBlur="checkusername()"就是触发验证的,看下这个函数下面是服务器端做出响应的PHP程序

function checkusername(){
 var username=trim($('username').value);
 //关键，获取是否存在此用户名
 ajaxresponse('checkusername', 'action=checkusername&username=' + username );
 }

这个函数有两个作用,一是获得username的值,二是开始ajax验证(function $()和function trim()是discuz定义的函数),下面就开始验证了,来看下ajaxresponse这个函数
复制内容到剪贴板代码:
function ajaxresponse(objname, data) {
 var x = new Ajax('XML', objname);

 x.get('register.php?'+ data, function(s){
 var obj = $(objname);
 if(s == 'succeed') {
 obj.style.display = '';
 obj.innerHTML = '<img src="./check_right.gif" width="13" height="13">';
 obj.className = "warning";
 } else {
 obj.style.display = '';
 obj.innerHTML = '<img src="./check_error.gif" width="13" height="13">';
 obj.className = "warning";
 }
 });
 }
这个函数有两个参数，其中objname就是用来显示返回信息的对象（在这个例子中就是username这个span），data 就是要发出的数据．先跳过var x = new Ajax('XML', objname)这一句（我随后介绍），我们来看function(s),这个函数的作用就是分别控制返回为成功或失败时怎么来显示．

var x = new Ajax('XML', objname)创建了x这个对象，我们来看Ajax这个函数

 1. function Ajax(recvType, waitId) {
2. //参数recvType为返回的文件类型
3. //waitId为返回信息的id（这里为checkusername）
4. for(var stackId = 0; stackId < AjaxStacks.length && AjaxStacks[stackId] != 0; stackId++);
5. AjaxStacks[stackId] = 1;
6.
7. var aj = new Object();
8.
9. aj.loading = 'Loading...';//public
 10. aj.recvType = recvType ? recvType : 'XML';//public
 11. aj.waitId = waitId ? $(waitId) : null;//public
 12.
 13. aj.resultHandle = null;//private
 14. aj.sendString = '';//private
 15. aj.targetUrl = '';//private
 16. aj.stackId = 0;
 17. aj.stackId = stackId;

1. aj.setLoading = function(loading) {
2. if(typeof loading !== 'undefined' && loading !== null) aj.loading = loading;
3. }
4.
5. aj.setRecvType = function(recvtype) {
6. aj.recvType = recvtype;
7. }
8.
9. aj.setWaitId = function(waitid) {
 10. aj.waitId = typeof waitid == 'object' ? waitid : $(waitid);
 11. }
 12. //创建XMLHttpRequest对象
 13. aj.createXMLHttpRequest = function() {
 14. var request = false;
 15. if(window.XMLHttpRequest) {
 16. request = new XMLHttpRequest();
 17. if(request.overrideMimeType) {
 18. request.overrideMimeType('text/xml');
 19. }
 20. } else if(window.ActiveXObject) {
 21. var versions = ['Microsoft.XMLHTTP', 'MSXML.XMLHTTP', 'Microsoft.XMLHTTP', 'Msxml2.XMLHTTP.7.0', 'Msxml2.XMLHTTP.6.0', 'Msxml2.XMLHTTP.5.0', 'Msxml2.XMLHTTP.4.0', 'MSXML2.XMLHTTP.3.0', 'MSXML2.XMLHTTP'];
 22. for(var i=0; i<versions.length; i++) {
 23. try {
 24. request = new ActiveXObject(versions);
 25. if(request) {
 26. return request;
 27. }
 28. } catch(e) {}
 29. }
 30. }
 31. return request;
 32. }
 33. aj.XMLHttpRequest = aj.createXMLHttpRequest();
 34. //创建XMLHttpRequest对象结束
 35. //aj.showLoading为显示正在查询的函数
 36. aj.showLoading = function() {
 37. if(aj.waitId && (aj.XMLHttpRequest.readyState != 4 || aj.XMLHttpRequest.status != 200)) {
 38. changedisplay(aj.waitId, '');
 39. aj.waitId.innerHTML = '<img src="loading.gif"> ' + aj.loading + '';
 40. }
 41. }
 42. //定义回调函数
 43. aj.processHandle = function() {
 44. if(aj.XMLHttpRequest.readyState == 4 && aj.XMLHttpRequest.status == 200) {
 45. for(k in Ajaxs) {
 46. if(Ajaxs[k] == aj.targetUrl) {
 47. Ajaxs[k] = null;
 48. }
 49. }
 50. if(aj.waitId) changedisplay(aj.waitId, 'none');
 51. if(aj.recvType == 'HTML') {
 52. aj.resultHandle(aj.XMLHttpRequest.responseText, aj);
 53. } else if(aj.recvType == 'XML') {
 54. aj.resultHandle(aj.XMLHttpRequest.responseXML.lastChild.firstChild.nodeValue, aj);
 55. }
 56. AjaxStacks[aj.stackId] = 0;
 57. }
 58. }
 59.
 60. aj.get = function(targetUrl, resultHandle) {
 61. setTimeout(function(){aj.showLoading()}, 500);
 62. if(in_array(targetUrl, Ajaxs)) {
 63. return false;
 64. } else {
 65. Ajaxs.push(targetUrl);
 66. }
 67. aj.targetUrl = targetUrl;
 68. aj.XMLHttpRequest.onreadystatechange = aj.processHandle;
 69. aj.resultHandle = resultHandle;
 70.
 71. var delay = attackevasive & 1 ? (aj.stackId + 1) * 1001 : 100;
 72. //提交数据
 73. if(window.XMLHttpRequest) {
 74. setTimeout(function(){
 75.
 76. aj.XMLHttpRequest.open('GET', aj.targetUrl,true);
 77.
 78. aj.XMLHttpRequest.send(null);},delay);
 79.
 80. } else {
 81. setTimeout(function(){
 82. aj.XMLHttpRequest.open("GET", targetUrl, true);
 83. aj.XMLHttpRequest.send();}, delay);
 84. }
 85. }
 86. return aj;
 87. }
这个ＰＨＰ程序输出的是一个ＸＭＬ文档

1. <?php
2. header("Content-Type: application/xml");
3. echo "<?xml version=\"1.0\" encoding=\"utf-8\"?>\n";
4. if($_GET['action'] == 'checkusername') {
5. if(!mysql_connect("localhost","root","1111")){
6. echo "连接错误";
7. }
8. mysql_select_db("test");
9.
 10. $username = trim($username);
 11. //查询
 12. $query = mysql_query("SELECT username FROM user WHERE username='$username'");
 13. $username = stripslashes($username);
 14. if(mysql_num_rows($query)) {
 15. $result='register_check_found';
 16. }else{
 17. $result='succeed';
 18. }
 19. echo "<root>";
 20. echo "<![CDATA[".$result."]]>";
 21. echo "</root>";
 22. }
 23. ?>
OK,这样验证就结束了！
其实仔细研究一下原理的话会发现ajax并不难，只是一个异步提交而已比我想象的简单多了，就是好多人向我一样对ajax产生了恐惧

欢迎光临站长论坛 (https://www.tzlink.com/bbs/)