The DoYouHaoBaby PHP Framework中文开发文档手册
Copyright(c) DoYouHaoBaby.NET All Rights Reserved.
The DoYouHaoBaby PHP Framework中文开发文档手册
主页　 上级
[ 使用Ajax功能 ]

这里，我们将为大家讲述DoYouHaoBaby 框架提供的Ajax功能。

Ajax无刷新用户体验是现在WEB2.0必须的功能，它能够提高用户体验，让网站变得一用。

DoYouHaoBaby 框架封装了Ajax，为你提供完美的Ajax体验。

DoYouHaoBaby Ajax组件位于 DoYouHaoBaby\LibCom\Js\Dyhb\Ajax 中，只要加载了Dyhb.package.js即可使用框架提供了Ajax支持。

系统有四个基本的AJax操作方法，使用这几个方法可以完成任意格式的AJax请求。

Dyhb.Ajax.Request请求：

  1. /**  
  2.  * 发送一个ajax请求  
  3.  *  
  4.  * <!-- 说明 -->  
  5.  * < Function [onsuccess]       请求成功时触发，function( XMLHttpRequest oXmlHttp, string   
  6.  
  7. responseText )。  
  8.  *   Function [onfailure]       请求失败时触发，function( XMLHttpRequest oXmlHttp )。  
  9.  *   Function [onbeforerequest] 发送请求之前触发，function( XMLHttpRequest oXmlHttp )。  
  10.  *   Function [ on{STATUS_CODE}] 当请求为相应状态码时触发的事件，如on302、on404、on500，function  
  11.  
  12. (XMLHttpRequest xhr)。3XX的状态码浏览器无法获取，4xx的，可能因为未知问题导致获取失败。>  
  13.  *  
  14.  * @param string    sUrl 发送请求的url  
  15.  * @param Object    arrOptions 发送请求的选项参数           
  16.  * @returns {XMLHttpRequest} 发送请求的XMLHttpRequest对象  
  17.  */  
  18. Dyhb.Ajax.Request = function (  sUrl, arrOptions ) {   
  19.   
  20.     /* Ajax请求配置 */  
  21.     /* 初始化请求参数 */  
  22.     arrOptions = arrOptions || {};   
  23.     var sData        = arrOptions.data || "", /* 需要发送的数据。如果是GET请求的话，不需要这个属性 |   
  24.  
  25. string */  
  26.         bAsync       = !( arrOptions.async === false ), /* 是否异步请求。默认为true（异步）| boolean   
  27.  
  28. */  
  29.         sUsername    = arrOptions.username || "", /* 用户名 */  
  30.         sPassword    = arrOptions.password || "", /* 密码 */  
  31.         sMethod      = (arrOptions.method || "GET").toUpperCase(), /* 发送方式 ：POST,GET */  
  32.         arrHeaders     = arrOptions.headers || {}, /* 要设置的http request header ( HTTP 请求头 ) */  
  33.         arrEventHandlers = {}, /* 事件句柄 */  
  34.         sKey, oXmlHttp; /* 参数中的键值，XMLHttpRequest对象 */  

延伸而来的Dyhb.Ajax.Post请求：
  1. /**  
  2.  * 发送一个post请求  
  3.  *   
  4.  * @param string    sUrl        发送请求的url地址  
  5.  * @param string    sData       发送的数据  
  6.  * @param Function [onsuccess]  请求成功之后的回调函数，function(XMLHttpRequest oXmlHttp, string   
  7.  
  8. responseText)  
  9.  * @meta standard            
  10.  * @returns {XMLHttpRequest}    发送请求的XMLHttpRequest对象  
  11.  */  
  12. Dyhb.Ajax.Post = function ( sUrl, sData, onsuccess ) {   
  13.   
  14.     return Dyhb.Ajax.Request(   
  15.   
  16.         sUrl, {   
  17.   
  18.             'onsuccess': onsuccess,   
  19.             'method': 'POST',   
  20.             'data': sData   
  21.         }   
  22.     );   
  23. };  

延伸而来的Dyhb.Ajax.Get请求：
  1. /**  
  2.  * 发送一个get请求  
  3.  *  
  4.  * @param string    sUrl        发送请求的url地址  
  5.  * @param string    sData       发送的数据  
  6.  * @param Function [onsuccess]  请求成功之后的回调函数，function(XMLHttpRequest oXmlHttp, string   
  7.  
  8. responseText)             
  9.  * @returns {XMLHttpRequest}    发送请求的XMLHttpRequest对象  
  10.  */  
  11. Dyhb.Ajax.Get = function ( sUrl,sData, onsuccess ) {   
  12.   
  13.     return Dyhb.Ajax.Request( sUrl, {'onsuccess': onsuccess,'data':sData} );   
  14. };  


表单提交Ajax：
  1. /**  
  2.  * 将一个表单用ajax方式提交  
  3.  *   
  4.  * <!-- 说明 -->  
  5.  * < Function [replacer]            对参数值特殊处理的函数,replacer(string value, string   
  6.  
  7. key)  
  8.  *   Function [onbeforerequest]     发送请求之前触发，function(XMLHttpRequest oXmlHttp)。  
  9.  *   Function [onsuccess]           请求成功时触发，function(XMLHttpRequest oXmlHttp, string   
  10.  
  11. responseText)。  
  12.  *   Function [onfailure]           请求失败时触发，function(XMLHttpRequest oXmlHttp)。  
  13.  *   Function [on{STATUS_CODE}]     当请求为相应状态码时触发的事件，如on302、on404、on500，  
  14.  
  15. function(XMLHttpRequest oXmlHttp)。3XX的状态码浏览器无法获取，4xx的，可能因为未知问题导致获取失败。 >  
  16.  *  
  17.  * @param  HTMLFormElement oForm    需要提交的表单元素  
  18.  * @param  Object   [arrOptions]    发送请求的选项参数  
  19.  * @returns {XMLHttpRequest}        发送请求的XMLHttpRequest对象  
  20.  */  
  21. Dyhb.Ajax.Form = function ( oForm, arrOptions ) {   
  22.   
  23.     /* 初始化配置参数 */  
  24.     arrOptions = arrOptions || {};   
  25.     var arrElements    = oForm.elements,   
  26.         nLen           = arrElements.length,   
  27.         sMethod        = oForm.getAttribute('method'),   
  28.         sUrl           = oForm.getAttribute('action'),   
  29.         replacer       = arrOptions.replacer || function ( sValue, sName ) {   
  30.   
  31.             return sValue;   
  32.         },   
  33.         arrSendOptions = {},   
  34.         arrData = [],   
  35.         nI, oItem, sItemType, sItemName, sItemValue,    
  36.         arrOpts, oOI, nOLen, oOItem;  


具体的使用方法，大家直接访问框架中源代码参考即可。

另外，系统还封装了用于DoYouHaoBaby 框架专用的Ajax操作。

DoYouHaoBaby Framework专用Ajax位于 DoYouHaoBaby\LibCom\Js\Dyhb\Ajax\Dyhb.class.js和DoYouHaoBaby\LibCom\Js\Dyhb\Ajax\Dyhb目录，它们负责框架的Ajax请求。

主要包括表单提交和直接请求一个URL地址。

表单体验请求Dyhb.Ajax.Dyhb.AjaxSubmit：
  1. /**  
  2.  * 表单提交ajax  
  3.  *  
  4.  * @param  string form 表单ID  
  5.  * @param  string url Ajax请求url  
  6.  * @param  string target 返回的消息的div id值  
  7.  * @param  function response 回调函数   
  8.  * @param  string   sTips  Ajax加载消息  
  9.  */  
  10. Dyhb.Ajax.Dyhb.AjaxSubmit = function( sForm,sUrl,sTarget,Response,sTips ){   
  11.   
  12.     /* 初始化值 */  
  13.     sUrl = (sUrl === undefined || sUrl=='' || sUrl===null) ? Dyhb.Ajax.Dyhb.Options['url']: sUrl;    
  14.   
  15. /* 请求URL */  
  16.   
  17.     if (sTarget === undefined || sTarget =='' || sTarget ===null)   { /* 消息DIV id */  
  18.   
  19.         Dyhb.Ajax.Dyhb.TipTarget = ( Dyhb.Ajax.Dyhb.Options['target']) ?    
  20.   
  21. Dyhb.Ajax.Dyhb.Options['target'] : Dyhb.Ajax.Dyhb.TipTarget;   
  22.     }   
  23.        
  24.     else{   
  25.   
  26.         Dyhb.Ajax.Dyhb.TipTarget=sTarget;   
  27.     }   
  28.   
  29.     /* 成功后回调函数 */  
  30.     Dyhb.Ajax.Dyhb.Response = ( Response === undefined||Response==''||Response===null ) ?    
  31.   
  32. Dyhb.Ajax.Dyhb.Response : Response;   
  33.   
  34.     if ( sTips === undefined||sTips==''||sTips===null ) {   
  35.   
  36.         sTips = ( Dyhb.Ajax.Dyhb.Options['tips']) ? Dyhb.Ajax.Dyhb.Options['tips']:    
  37.   
  38. Dyhb.Ajax.Dyhb.UpdateTips;   
  39.     }  

直接请求一个URL 地址Dyhb.Ajax.Dyhb.AjaxSend：
  1. /**  
  2.  * 表单提交ajax  
  3.  *  
  4.  * @param  string url Ajax请求url  
  5.  * @param  string target 返回的消息的div id值  
  6.  * @param  function response 回调函数   
  7.  * @param  string   sTips  Ajax加载消息  
  8.  * @param  string sType Ajax发送类型[get/post,默认为get]  
  9.  */  
  10. Dyhb.Ajax.Dyhb.AjaxSend = function( sUrl,Params,sTarget,Response,sTips,sType ){   
  11.   
  12.     /* 初始化值 */  
  13.     sUrl = (sUrl === undefined || sUrl==''||sUrl===null) ? Dyhb.Ajax.Dyhb.Options['url']: sUrl; /*   
  14.  
  15. 请求URL */  
  16.   
  17.     if (sTarget === undefined || sTarget =='' || sTarget ===null)   { /* 消息DIV id */  
  18.   
  19.         Dyhb.Ajax.Dyhb.TipTarget = ( Dyhb.Ajax.Dyhb.Options['target']) ?    
  20.   
  21. Dyhb.Ajax.Dyhb.Options['target'] : Dyhb.Ajax.Dyhb.TipTarget;   
  22.     }   
  23.        
  24.     else{   
  25.   
  26.         Dyhb.Ajax.Dyhb.TipTarget=sTarget;   
  27.     }   
  28.   
  29.     /* 成功后回调函数 */  
  30.     Dyhb.Ajax.Dyhb.Response = ( Response === undefined||Response==''||Response===null ) ?    
  31.   
  32. Dyhb.Ajax.Dyhb.Response : Response;   
  33.   
  34.     if ( sTips === undefined||sTips==''||sTips===null ) {   
  35.   
  36.         sTips = ( Dyhb.Ajax.Dyhb.Options['tips']) ? Dyhb.Ajax.Dyhb.Options['tips']:    
  37.   
  38. Dyhb.Ajax.Dyhb.UpdateTips;   
  39.     }  


有了这两个方法，我们可以轻松地进行Ajax操作。

说明：除了这两个方法外，还有一些辅助方法供大家参考。

我们在开发 DYHB.BLOG_X 1.0版本中使用实例，代码位于admin项目中。

我们首先初始化Ajax消息提示图片，位于DYHB.BLOG_X\Upload\admin\Tpl\Default\public_header.html。
  1. Dyhb.Ajax.Dyhb.Image = ['__TMPLPUB__/Images/ajax/loading.gif','__TMPLPUB__/Images/ajax/ok.gif','__TMPLPUB__/Images/ajax/update.gif' ];  

具体的操作方法，位于DYHB.BLOG_X\Upload\admin\Tpl\Default\node_add.html中：
  1. {script}   
  2. <!--   
  3. function add(){   
  4.     if( $('#id').val()!='' && $('#id').val()!==null  ){   
  5.        update();   
  6.        return;   
  7.     }   
  8.     $("#submit_button").attr("disabled", "disabled");   
  9.     $("#submit_button").val( D.L('添加节点中') );   
  10.     Dyhb.AjaxSubmit('nodeAdd','{:G::U('node/insert')}','',complete);   
  11. }   
  12. function update(){   
  13.     $("#submit_button").attr("disabled", "disabled");   
  14.     $("#submit_button").val( D.L('更新节点中') );   
  15.     Dyhb.AjaxSubmit('nodeAdd','{:G::U('node/update')}','',function(){ $("#submit_button").attr   
  16.   
  17. ("disabled", false);$("#submit_button").val( D.L('更新节点') ); });   
  18. }   
  19. function complete(data,status){   
  20.     $("#submit_button").attr("disabled", false);   
  21.     $("#submit_button").val( D.L('添加节点') );   
  22.     if(status==1){   
  23.         $('#id').val(data.node_id);   
  24.     }   
  25. }   
  26. -->   
  27. {/script}  

说明：complete有三个参数function complete(data,status,info)为返回的数据，状态和反馈消息。
data为一个json数组，status的值为0，1（1代表正确，0表示错误），info为一个字符串消息。

提供给Ajax显示 显示效果的DIV 块：
  1. <div id="DyhbAjaxResult" class="none DyhbAjaxResult">&nbsp;</div>  

修饰Ajax的CSS代码：
  1. .DyhbAjaxResult{border:2px ridge #000; background-color:#eee;line-height:20px;position:fixed;top:20px;rightright:20px;padding:10px 20px;}  

为了确保是AJax访问，你可以在提交表单中隐藏传入一个为ajax的表单值，ajax表单值可以通过系统配置来修改，改

配置为AJAX_SUBMIT_VAR_NAME，你可以在项目配置中修改。
  1. <input type="hidden" name="ajax" value="1">  

使用Dyhb.AjaxSend来发送ajax，可以添加一个ajax=1来确保返回的是AjAX 技术。
  1. function checkUsername(){   
  2.     $("#check_button").attr("disabled", "disabled");   
  3.     $("#check_button").val( D.L('帐号检查中') );   
  4.     Dyhb.AjaxSend('{:G::U('user/checkusername')}','ajax=1&user_name='+$('#user_name').val   
  5.   
  6. (),'',function(data,status){ $("#check_button").attr("disabled", false);$("#check_button").val(D.L("检  
  7.  
  8. 测账户")); });   
  9. }  

在框架的PHP 中使用Ajax.
  1. $arrVo = array(   
  2.   
  3.     'id' => $sInputAjaxField.'_'.$nInputAjaxId,   
  4.     'value' => $sInputAjaxVal,   
  5. );   
  6.   
  7. $this->A( $arrVo, G::L( '数据更新成功！') );  

我们在框架中complete有三个参数function complete(data,status,info)可以得到。
data.id返回id值，value返回value值，status=1,info为"数据更新成功！".


如果，你不需要返回数据，你也可以使用:
  1. $this->S( G::L( '数据更新成功！') );  

这样简单吧，哈哈，寻求更多支持，请访问官方论坛！

To be continue!

主页
上级