以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()"就是触发验证的,看下这个函数 下面是服务器端做出响应的ＰＨＰ程序

复制内容到剪贴板

代码:

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. }