Zh:Tutorials:Creating Custom Response Commands

你可以附加各种自定义的功能来扩充xajax。xajax的扩展性借由xajaxResponse类的addScript()方法和PHP面向对象的类继承能力得以实现。

使用addScript()

响应类的addScript()方法允许你从xajax注册函数中返回自定义的Javascript代码，并使其在客户端运行。

例如，叫你使用xajax给select元素动态添加option。完成这个要求你需要使用xajaxResponse类，你需要构建必要的Javascript代码作为字符串，然后通过xajaxResponse的addScript()方法来调用。象这样：

$objResponse = new xajaxResponse();

$sScript  = "var objOption = new Option('New Option', '1');";
$sScript .= "document.getElementById('select1').options.add(objOption);";
$objResponse->addScript($sScript);

return $objResponse;

返回值会被发送到xajax运行的客户端，会给id为"select1"的select框添加一个名称为"New Option"，值为“1”的选项。效果非常好。但是，如果你设计的程序需要你频繁的添加类似的不同的select框，你得在整个程序中不断的拷贝并修改代码，代码马上会变得一坨一坨的，晦涩难读，难于修改及维护。

这样，使用addScript()方法异步传递Javascript代码显得就是那么的酷和有效了，为了充分利用浏览器的缓存，不必每次都回传Javascript代码，最好能够在客户端代码/标记语言中创建一个Javascript函数，或者是链接一个外部的Javascript文件，然后使用addScript()方法调用它。象这样：

客户端：

<script type="text/javascript">
function addOption(selectId, txt, val)
{
    var objOption = new Option(txt, val);
    document.getElementById(selectId).options.add(objOption);
}
</script>

服务器端：

$objResponse->addScript("addOption('select1', 'New Option', '13');");

将Javascript函数放置在客户端并通过addScript()方法进行调用，能够使浏览器缓存并重用Javascript代码，避免每次xajax响应都要回传整段Javascript。使用这种方式能够提高程序性能和可维护性。

扩展xajaxResponse类

为了更近一步提高你代码的可维护性和可读性，你可以利用PHP语言的面向对象特性来创建自定义的响应类，添加你经常使用的功能，扩展标准的xajaxResponse类，同时依然可以使用所有的标准响应方法。

例如，续上面我们的例子，你可以扩展xajaxResponse类，增加一个通用的添加select框选项的方法如：

class myXajaxResponse extends xajaxResponse
{  
    function addCreateOption($sSelectId, $sOptionText, $sOptionValue)  
    {  
        $sScript  = "var objOption = new Option('".$sOptionText."', '".$sOptionValue."');";
        $sScript .= "document.getElementById('".$sSelectId."').options.add(objOption);";
        $this->addScript($sScript);
    }
}

或者，如果你为了充分利用浏览器缓存，并且避免每次响应Javascript代码都要回传，已经创建了一个Javascript函数，如上面描述的一样，你可以象这样创建你自定义的响应类：

class myXajaxResponse extends xajaxResponse
{  
    function addCreateOption($sSelectId, $sOptionText, $sOptionValue)  
    {  
        $this->addScript("addOption('".$sSelectId."', '".$sOptionText."', '".$sOptionValue."');");
    }
}

诺，原来xajax中标准的xajaxResponse对象实例化方法，就变为你自己的myXajaxResponse对象实例化了：

$objResponse = new myXajaxResponse();

//standard methods are still available
$objResponse->addAssign("div1", "innerHTML", "Some Text");   

//you can use your custom methods as well
$objResponse->addCreateOption("select1", "New Option", "13");
 
return $objResponse;

使用扩展响应类方法能够使你有效的重用通用代码，使你的代码更清晰易读，维护，及扩展。你已经添加了一个创建单个新select框选项的方法，你还可以添加一个方法，使其能够创建一组option。象这样：

class myXajaxResponse extends xajaxResponse
{  
    function addCreateOption($sSelectId, $sOptionText, $sOptionValue)  
    {  
        $this->addScript("addOption('".$sSelectId."', '".$sOptionText."', '".$sOptionValue."');");
    }

    function addCreateOptions($sSelectId, $aOptions)
    {
        foreach($aOptions as $sOptionText => $sOptionValue)
        {
            $this->addCreateOption($sSelectId, $sOptionText, $sOptionValue);
        }
    }
}

现在你可以动态添加options组到select框里面了，如：

$objResponse = new myXajaxResponse();
    
$aOptions['One'] = 1;
$aOptions['Two'] = 2;
$aOptions['Three'] = 3;
$objResponse->addCreateOptions("select1", $aOptions);
 
return $objResponse;

如你所见，这种能力基本是无限的。

使用这种方式扩展xajaxResponse类也能使你方便的整合第三方的Javascript类库到你的xajax程序中。如同我们扩展响应类用来调用客户端的Javascript函数添加select框选项一样，我们也可以扩展它添加响应方法用来调用第三方的Javascript函数。

扩展响应类的另外一个优点是它能够使你自定义的代码独立于xajax核心库，当xajax升级到新版本时你不必在新版本代码中添加以前版本的自定义的函数。使用扩展响应类，你只需要安装新的类，然后就可以继续在你的代码中使用扩展类。

希望这些帮助/技巧能够帮助开发者在他们的程序开发中更好的使用xajax。如果你扩展的响应类加入的自定义方法可能其它xajax用户发现非常有用，因此请将他们帖到到论坛上以飨社区大人。您的一些想法可能会对未来的xajax发行版非常有用！