注册登录

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

时间:2016-02-24 18:34 来源: 我爱IT技术网作者:佚名

欢迎您访问我爱IT技术网，今天小编为你分享的编程技术是：【DISCUZ架构：AJAX之ajax.js 函数之二】，下面是详细的分享！

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

有了这些理论的基础就可以分析一下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=http://www.chinaz.com/program/2008/1024/"{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。当然，最开始也验证了一下两次密码是否一致，这里就不说了。

以上所分享的是关于DISCUZ架构：AJAX之ajax.js 函数之二，下面是编辑为你推荐的有价值的用户互动：

　　相关问题：js中function如何返回ajax

　　答：原理 ajax有同步和异步的方式，因为$.post已经是封装后的，只能通过异步方式。因此只能通过回调。举例 function a(){ $.post( "ajaxpost", {"senddata":"sendtext"}, function(message){ getMsg(message);//调用函数处理 });}function getMsg(m... >>详细

　　相关问题：AJAX问题！一个页面里调用了两个AJAX的问题！

　　答：你肯定是B的回调把A的回调给覆盖掉了。出现这类问题，一般是所有的AJAX访问都是使用的同一个对象这里面要分清楚同一个类和同一个对象 var ajax = new ajax() ajax.post()....1 ajax.callback = callback1 ajax.post()....2 ajax.callback = ca... >>详细

　　相关问题：discuz中的showwindow函数返回的页面，第一次返回...

　　答：onload事件只是在request页面的时候执行一次，如果在该页面调用ajax是不会执行onload事件的，你可以把你的js插件调用写在ajax的callback函数里面就行了 >>详细

评论列表（网友评论仅供网友表达个人看法，并不表明本站同意其观点或证实其描述）

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

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

以上所分享的是关于DISCUZ架构：AJAX之ajax.js 函数之二，下面是编辑为你推荐的有价值的用户互动：

最新教程

相关教程