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

PHP
php 多线程上下文中安全写文件实现代码
PHP类的使用 实例代码讲解
用php实现让页面只能被百度gogole蜘蛛访问的方法
php 学习笔记
PHP编程过程中需要了解的this,self,parent的区别
php 操作excel文件的方法小结
使用PHP获取网络文件的实现代码
PHP 巧用数组降低程序的时间复杂度
php下将XML转换为数组
php 文件上传代码(限制jpg文件)
php 无极分类(递归)实现代码
PHP 采集获取指定网址的内容
PHP 将图片按创建时间进行分类存储的实现代码
PHP 存储文本换行实现方法
PHP 批量更新网页内容实现代码
用PHP查询搜索引擎排名位置的代码
用php实现的获取网页中的图片并保存到本地的代码
php实现首页链接查询 友情链接检查的代码
处理php自动反斜杠的函数代码
php实现的遍历文件夹下所有文件,编辑删除

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


出处:互联网   整理: 软晨网(RuanChen.com)   发布: 2009-08-14   浏览: 198 ::
收藏到网摘: 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。当然,最开始也验证了一下两次密码是否一致,这里就不说了。