18天:AJAX
昨天,我们实现了一个非常强大的搜索引擎为Jobeet,多亏了Zend Lucene图书馆。在第二行,提高响应能力的搜索引擎,我们将利用AJAX搜索引擎转换为一个活的。
的形式应该启用和不启用JavaScript, live搜索功能将实现使用低调的JavaScript。用低调的JavaScript还允许一个更好的分离关注点之间的客户机代码的HTML, CSS和JavaScript行为。
安装jQuery
,而不是重新发明轮子和管理许多浏览器之间的差异,我们将使用一个JavaScript框架,jQuery。symfob娱乐下载ony框架本身是不可知论者,可以处理任何JavaScript库。
去jQuery网站,下载最新版本,把. js
下的文件web / js /
。
包括jQuery
我们需要在所有页面jQuery,更新布局包括它<头>
。小心地插入use_javascript ()
函数前include_javascripts ()
电话:
< !——应用程序/前端/模板/布局。php - - >< ? phpuse_javascript(“jquery-1.4.2.min.js”)? >< ? phpinclude_javascripts()? >< / >头
我们可以直接与包括jQuery文件<脚本>
标记,但使用use_javascript ()
帮助确保相同的JavaScript文件不会被包括两次。
请注意
为性能的原因,您可能还想移动include_javascripts ()
助手叫前结束< /身体>
标签。
添加行为
实现一个live搜索意味着每次用户类型一封信在搜索框中,调用服务器需要触发;服务器将返回所需的信息来更新页面的一些地区不刷新整个页面。
而不是增加的行为* ()
HTML属性,jQuery背后的主要原理是将行为添加到页面完全加载后的DOM。这种方式,如果您在您的浏览器中禁用JavaScript支持,没有注册行为,和表单仍然像以前一样工作。
第一步是拦截每当用户类型的关键在搜索框:
美元(“# search_keywords”).keyup(函数(关键){如果(this.value。长度> =3| |。值= =”){/ /做某事}});
请注意
现在不添加的代码,我们将修改它。最后的JavaScript代码将添加到布局在下一节。
每次用户键入一个关键,jQuery执行上述代码中定义的匿名函数,但只有当用户输入超过3个字符或如果他从输入中删除标记。
使一个AJAX调用服务器一样简单的使用load ()
在DOM元素的方法:
美元(“# search_keywords”).keyup(函数(关键){如果(this.value。长度> =3| |。值= =”){美元(“#乔布斯).load(美元(这).parents(“形式”).attr(“行动”),{查询:这个。值+‘*’});}});
管理AJAX调用相同的行动一个叫做“正常”。所需的行动的变化将在下一节中完成。
最后但并非最不重要,如果启用了JavaScript,我们会想要删除搜索按钮:
美元(”。搜索输入(type =“提交”))hide();
用户反馈
当你让一个AJAX调用,页面不会被更新。浏览器将等待服务器响应前回来更新页面。与此同时,需要为用户提供视觉反馈通知他的事情。
一个会议是显示在AJAX调用加载程序图标。更新布局添加装载机图像和隐藏它默认情况下:
< !——应用程序/前端/模板/布局。php - - > < div类=“搜索”> < h2 >问为一份工作< / h2 > < action =“< ?php echo url_for (job_search) ? > "方法=“获得”> < input type =“文本”name =“查询”值=“< ?php echo $ sf_request - > getParameter(‘查询’)? > "id =“search_keywords”/ > < input type =“提交”值=“搜索”/ > < img id =“机”src =“遗产/图片/ loader.gif”风格=“vertical-align:中间;显示:没有”/ > < div类=“帮助”>输入一些关键字(城市,国家,位置,…)< / div > < /形式> < / div >
请注意
默认加载器是Jobeet当前布局的优化。如果你想创建自己的,你会找到很多免费的在线服务,比如http://www.ajaxload.info/。
现在您已经所需的所有碎片使HTML工作,创建一个search.js
目前我们所写的文件,其中包含JavaScript:
/ / web / js / search.js美元(文档)时(函数(){美元(”。搜索输入(type =“提交”))hide();美元(“# search_keywords”).keyup(函数(关键){如果(this.value。长度> =3| |。值= =”){美元(“#装载机”),告诉();美元(“#乔布斯).load(美元(这).parents(“形式”).attr(“行动”),{查询:这个。值+‘*’},函数(){美元(“#装载机”)hide();});}});});
您还需要更新布局包含这个新文件:
< !——应用程序/前端/模板/布局。php - - >< ? phpuse_javascript(“search.js”)? >
侧边栏
JavaScript是一个行动
虽然JavaScript写给搜索引擎是静态的,有时,你需要调用一些PHP代码(使用url_for ()
助手)。
JavaScript是另一种格式(如HTML,看到了一些在以前的日子,symfony使格式管理相当容易。ob娱乐下载页面的JavaScript文件将包含行为,你甚至可以有相同的URL的页面的JavaScript文件,但结局. js
。例如,如果您想创建一个文件搜索引擎的行为,您可以修改job_search
路线如下,并创建一个searchSuccess.js.php
模板:
job_search: url: /搜索。:sf_format参数:{模块:工作、行动:搜索、sf_format: html}要求:sf_format: (?: html | js)
AJAX的一个动作
如果启用了JavaScript, jQuery将拦截所有键输入搜索框,并将调用搜索
行动。如果不是,是一样的搜索
行动也被称为用户提交表单时,通过按“输入”键或点击“搜索”按钮。
所以,搜索
行动,现在需要确定通过AJAX调用。当一个请求是由一个AJAX调用,isXmlHttpRequest ()
请求对象返回的方法真正的
。
请注意
的isXmlHttpRequest ()
方法适用于所有主要的JavaScript库,如原型,Mootools或jQuery。
/ /应用程序/前端/模块/工作/行动/ actions.class.php公共函数executeSearch(sfWebRequest美元的请求){这个美元- >forwardUnless(美元的查询=美元的请求- >getParameter(“查询”),“工作”,“指数”);这个美元- >工作= JobeetJobPeer::getForLuceneQuery(美元的查询);如果(美元的请求- >isXmlHttpRequest()){返回这个美元- >renderPartial方法(“工作/列表”,数组(“工作”= >这个美元- >工作));}}
作为jQuery不会重新加载页面但只会取代#工作
DOM元素的响应内容,页面不应该装饰的布局。因为这是一个共同的需要,布局是禁用默认情况下,当一个AJAX请求。
此外,而不是返回完整的模板,我们只需要返回的内容工作/列表
部分。的renderPartial方法()
方法用于操作返回部分的反应而不是完整的模板。
如果用户删除所有字符在搜索框中,如果没有搜索返回的结果,我们需要显示一条消息,而不是一个空白页。我们将使用renderText ()
方法来呈现一个简单的测试字符串:
/ /应用程序/前端/模块/工作/行动/ actions.class.php公共函数executeSearch(sfWebRequest美元的请求){这个美元- >forwardUnless(美元的查询=美元的请求- >getParameter(“查询”),“工作”,“指数”);这个美元- >工作= JobeetJobPeer::getForLuceneQuery(美元的查询);如果(美元的请求- >isXmlHttpRequest()){如果(‘*’= =美元的查询| | !这个美元- >工作){返回这个美元- >renderText(“没有结果。”);}返回这个美元- >renderPartial方法(“工作/列表”,数组(“工作”= >这个美元- >工作));}}
提示
您也可以返回一个组件在操作使用renderComponent ()
方法。
测试AJAX
因为symfoob娱乐下载ny浏览器无法模拟JavaScript,您需要帮助的时候测试AJAX调用。主要意味着你需要手动添加jQuery的头和其他主要的JavaScript库发送的请求:
/ /测试/功能/前端/ jobActionsTest.php美元的浏览器- >setHttpHeader(“X_REQUESTED_WITH”,XMLHttpRequest的);美元的浏览器- >信息(“5 - Live搜索”)- >得到(“查询= sens * /搜索?”)- >与(“响应”)- >开始()- >checkElement(“表tr”,2)- >结束();
的setHttpHeader ()
方法设置一个HTTP头的下一个请求的浏览器。
最终的想法
在17天,我们使用Zend Lucene图书馆实现搜索引擎。今天,我们使用jQuery响应更快。symfob娱乐下载ony框架提供了所有的基本工具来轻松构建MVC应用程序,与其他组件,也是。像往常一样,尝试使用最好的工具来工作。明天,我们将解释如何国际化Jobeet网站。
这项工作在Creative Commons许可Attribution-Share都3.0 Unported许可执照。