当前位置: 首页 > 图文教程 > 网络编程 > PHP > DISCUZ架构:AJAX之ajax.js 函数之二

PHP
AJAX在PHP中的简单使用
vim下高亮显示php代码
用 PHP 使 Web 数据分析进入更高境界
用Apache与MySQL整合实现基本身份认证
通用PHP动态生成静态HTML网页的代码
自己轻松修复Discuz!数据库技巧
PHP在Web开发领域的优势在哪?
php4和php5单态模式(Singleton Pattern)写法
使用Xdebug优化你的php程序
PHP学习入门的一些基础知识
关于正则表达式学习
浅谈PHP开发团队的管理之道
传奇的诞生,PHP三位创始人简介
利用PHP制作简单的内容采集器
PHP精确到每一秒钟的在线人数显示代码
一些PHP学习过程中的心得和经验
WINDOWS服务器安装多套PHP的另类解决方案
让你的PHP引擎全速运转的三个简单绝招
大型系统上PHP令人不爽的九大原因
php的计数器程序

PHP 中的 DISCUZ架构:AJAX之ajax.js 函数之二


出处:互联网   整理: 软晨网(RuanChen.com)   发布: 2009-08-14   浏览: 176 ::
收藏到网摘: n/a

有了这些理论的基础就可以分析一下ajax的具体实现了,下面就以注册过程中的检查用户名在数据库是不是存在并给用户提示这样一个ajax过程进行全程分析。
用到如下的几个文件:

其实register.php这个文件没什么多大的关系,不过register.htm模板是通过它解析过来的,所以就提出来了。

大家都知道在注册过程中是在输完用户名并输入密码的时候才会触发事件检查是不是用户存在,所以很明显,这个是input的onBlur事件。
好了,现在看看./templates/default/register.htm这个文件。

以下为引用的内容:
<tr>
        <td class="altbg1" width="21%"><span class="bold">{lang username}</span></td>
        <td class="altbg2"><div class="input"><input type="text" name="username" size="25" maxlength="15" id="username" onBlur="checkusername()"></div><div id="checkusername"></div>
        </td>
        </tr>

很简单的HTML代码,注意看到 onBlur="checkusername()"这里,继续往下深入,看看这个函数是做什么的。      

以下为引用的内容:
function checkusername() {
                var username = trim($('username').value);
                if(username == lastusername) {
                        return;
                } else {
                        lastusername = username;
                }
                var cu = $('checkusername');
                var unlen = username.replace(/[^\x00-\xff]/g, "**").length;

 

                if(unlen < 3 || unlen > 15) {
                        warning(cu, unlen < 3 ? profile_username_tooshort : profile_username_toolong);
                        return;
                }
                ajaxresponse('checkusername', 'action=checkusername&username=' + username);
        }

第一行是得到username的值,也就是我们输入的,lastusername应该是我们在返回的时候不会让用户名消失用的,应该是写入cookie或者是其他。
接下来判断经过了替换的用户名是不是大于15或者小于3,是的话直接调用warning这个函数(稍后讲这样一个函数)并返回,不是的话就调用ajaxresponse函数发出ajax请求,看看ajaxresponse这个函数就是关键所在了。

以下为引用的内容:
        function ajaxresponse(objname, data) {
                var x = new Ajax('XML', objname);
                x.get('ajax.php?inajax=1&' + data, function(s){
                        var obj = $(objname);
                        if(s == 'succeed') {
                                obj.style.display = '';
                                obj.innerHTML = '<img src="{IMGDIR}/check_right.gif" width="13" height="13">';
                                obj.className = "warning";
                        } else {
                                warning(obj, s);
                        }
                });
        }

ajaxresponse函数来了,这个作用就是实例化一个ajax对象,注意到我们先前说的recvType,就是第一个传入参数,这里固定成了XML,Discuz喜欢用XML(^^),然后发出请求,这里全部用的是get(第二行),地址是ajax.php?inajax=1&加上传入的参数,所以结合上面就变成:ajax.php?inajax=1&action=checkusername&username=用户名,构造出来了一个URL,(大家可以自己测试一下看看返回的是什么东东,通过http://你的URL/ajax.php?inajax=1&action=checkusername&username=用户名)通过XMLHttpRequest发出去,注意那个处理函数:function(s),实际这个函数作为参数已经写出来了,如果最后返回的是succed,那么就在obj这个层里(在这个例子中对应id='checkusername'这个层)显示一个带勾的图,否则的话还是调用warning这个函数。下面就分析这个函数。

以下为引用的内容:

        function warning(obj, msg) {
                if((ton = obj.id.substr(5, obj.id.length)) != 'password2') {
                        $(ton).select();
                }
                obj.style.display = '';
                obj.innerHTML = '<img src="{IMGDIR}/check_error.gif" width="13" height="13">   ' + msg;
                obj.className = "warning";
        }

warning函数前面两次提到,其实这个函数很简单,实现的作用就是在obj这个层里打一个叉,然后写上错误的原因,把obj这个层的CSS class设置成为warning。当然,最开始也验证了一下两次密码是否一致,这里就不说了。