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

2022-07-15 80酷酷网 80kuku.com

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

以下为引用的内容：
./register.php
./ajax.php
./include/javascript/common.js
./include/javascript/ajax.js
./template/default/register.htm

其实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这个函数。下面就分析这个函数。

以下为引用的内容：

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