第11章集成 Ajax.docx

phpechojavascript_tag（'

update_element_function（"indicator",array（

"content"=>"Dataprocessingcomplete",

'））

）?

>

你也许在想：

这条辅助函数语句和真正的javascript代码一样长，那使用它有什么特别的好处呢?

好处在于它的可读性。

例如，如果你想根据某种条件在一个元素之前或之后插入内容，或者不是更新元素内容而是删除一个元素，或者不做任何处理时，javascript代码将会变得相当混乱，但是利用update_element_function（），却可以像例11-5那样保持清晰易读。

例11-5update_element_function（）辅助函数的选项

//在indicator元素之后插入内容

update_element_function（'indicator',array（

'position'=>'after',

'content'=>"Dataprocessingcomplete",

））;

//如果$condition成立，则删除indicator之前的元素

update_element_function（'indicator',array（

'action'=>$condition?

'remove':

'empty',

'position'=>'before',

））

可以看出，这个辅助函数让你的模板比任何javascript代码都要容易理解，而且你只要使用一种语法就可以处理相似的行为。

这也是为什么这个辅助函数名字这样长的原因：

无需额外的说明，它就可以充分地解释自身的用途。

轻松地降级（GracefulDegradation）

用

symfony用一个辅助函数从另一方面进行补充这个功能，也就是利用它可以让代码仅在支持javascript的浏览器中执行。

例11-6中，显示了用if_javascript（）和end_if_javascript（）实现这种降级的用法：

例11-6利用if_javascript（）辅助函数轻松地降级

phpif_javascript（）;?

>

YouhaveJavaScriptenabled.

phpend_if_javascript（）;?

>

Youdon'thaveJavaScriptenabled.

NOTE调用if_javascript（）和end_if_javascript（）时，不需要用echo.

Prototype

Prototype是一个优秀的javascript库，它扩展了客户端脚本的能力，增加了开发者想要的功能，并且提供了新的机制去操作DOM，该项目的网站是http:

//prototypejs.org/。

symfony框架中绑定了Prototype文件，在每个项目的web/sf/prototype目录中可以找到它的文件。

这样只要在你的action中增加下列代码就可以使用Prototype：

$prototypeDir=sfConfig:

:

get（'sf_prototype_web_dir'）;

$this->getResponse（）->addJavascript（$prototypeDir.'/js/prototype'）;

或者在view.yml文件中加入：

all:

javascripts:

[%SF_PROTOTYPE_WEB_DIR%/js/prototype]

NOTE因为symfonyAjax辅助函数（下一节介绍）需要用到Prototype，所以只要你用到Prototype库，它就会自动被包含进来。

也就是说，如果你的模板调用一个_remote辅助函数，你无需在你的响应里手工添加PrototypeJavascript。

一旦你载入了Prototype库，就可以利用它为javascript核心增加的新函数。

本书的主要目的不是讲述这些函数，你可以很容易在互联网上找到所需的文档，以下是几个有关的网站：

∙Particletree:

∙SergioPereira:

∙Script.aculo.us:

http:

//wiki.script.aculo.us/scriptaculous/show/Prototype

Prototype新增的Javascript函数之一是$（）函数。

简单地说，这个函数可以看成是document.getElementById（）函数的缩写，但它有更强的功能。

例11-7给出了一个应用的例子。

例11-7利用$（）函数根据DOM的元素ID取得元素值。

node=$（'elementID'）;

//相当于

node=document.getElementById（'elementID'）;

//也可以一次检索多个元素

//在本例中返回值是一个由DOM元素组成的数组。

nodes=$（'firstDiv','secondDiv'）;

Prototype还提供了javascript核心真正缺乏的一个方法，这个方法返回所有CSSclassName属性等于它接收的参数的DOM元素组成的数组：

nodes=document.getElementByClassName（'myclass'）;

当然你不太会用到这个函数，因为Prototype提供了一个更强大的$$（）函数。

这个函数根据CSS选择器返回一个由DOM元素组成的数组。

所以前面的调用可以写成如下形式：

nodes=$$（'.myclass'）;

凭借CSS选择器的作用，你可以根据class、ID、父子关系和前后关系去解析DOM，这比通过XPath表达式去解析更为简单。

你甚至可以用一个混合了所有这些选择器的复杂选择器去访问对应的元素。

nodes=$$（'bodydiv#mainulli.lastimg>span.legend'）;

Prototype增强Javascript语法功能的最后一个例子是数组迭代。

它为Javascript定义匿名函数和闭包（closure）（译者注:

如果在一个javascript函数体中又出现一个函数定义时，称此函数为闭包（closure））功能提供了和PHP同样的简化形式。

如果你编写javascript代码，可能会大量用到这个功能。

varvegetables=['Carrots','Lettuce','Garlic'];

vegetables.each（function（food）{alert（'Ilove'+food）;}）;

因为用Prototype编写Javascript比纯手工编写更为有趣，并且因为Prototype也是symfony的一个组成部分，所以你应该花些时间去研究它的文档。

Ajax辅助函数

如果你想在服务器端用PHP脚本去更新页面中的元素内容，而不想用javascript去更新（如例11-5所示），这样你可以根据一个服务器的响应来改变页面的某个部分，那该怎么做呢？

remote_function（）辅助函数就可以完成这个任务，如例11-8所示：

例11-8应用remote_function（）辅助函数