您当前的位置: 首页 » AJAX编程 » 以discuz检测用户名为例分析ajax+php（提供源代码）
以discuz检测用户名为例分析ajax+php（提供源代码）
论坛链接
读了下discuz的代码还是感觉很好，今天想学习下ajax，于是就扒下来这段看了下
discuz原程序的验证包括检测用户名是否合法和用户名是否被占用,为了学习方便,就只研究下检测用户名是否被占用的程序吧,因为这个程序基本上把ajax的基础东西都包括了表单文件很简单,就是一个输入用户名的文本框和一个用来存放返回信息的
<span><input type="text" id="username" name="username" size="25" maxlength="15" onBlur="checkusername()" tabindex="3" />
<span id="checkusername"> </span>
这里面有个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 = '<span><img src="loading.gif"> ' + aj.loading + '</span>';
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产生了恐惧
下载地址：以discuz检测用户名为例分析ajax+php（提供源代码）
discuz原程序的验证包括检测用户名是否合法和用户名是否被占用,为了学习方便,就只研究下检测用户名是否被占用的程序吧,因为这个程序基本上把ajax的基础东西都包括了表单文件很简单,就是一个输入用户名的文本框和一个用来存放返回信息的
<span><input type="text" id="username" name="username" size="25" maxlength="15" onBlur="checkusername()" tabindex="3" />
<span id="checkusername"> </span>
这里面有个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 = '<span><img src="loading.gif"> ' + aj.loading + '</span>';
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产生了恐惧
下载地址：以discuz检测用户名为例分析ajax+php（提供源代码）