Jobeet日18:AJAX

以前在Jobeet

昨天,我们实现了一个非常强大的搜索引擎为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.2.6.min.js”)? >< ? phpinclude_javascripts()? >< / >头

我们可以直接与包括JQuery文件<脚本>标记,但使用use_javascript ()帮助确保相同的JavaScript文件不会被包括两次。

添加行为

实现一个live搜索意味着每次用户类型一封信在搜索框中,调用服务器需要被触发;服务器将返回所需的信息来更新页面的选择区域不刷新整个页面。

而不是增加的行为* ()HTML属性,JQuery背后的主要原理是将行为添加到页面完全加载后的DOM。这种方式,如果您在您的浏览器中禁用JavaScript支持,没有注册行为,和表单仍然像以前一样工作。

第一步是拦截每当用户类型的关键在搜索框:

$ (' # search_keywords ') .keyup(函数(键){如果(this.value。长度> = 3 | |。值= = "){/ /做某事}});

现在不添加的代码,我们将修改它。最后的JavaScript代码将添加到布局在下一节。

每次用户键入一个关键,JQuery执行上述代码中定义的匿名函数,但只有当用户输入超过3个字符或如果他从输入中删除标记。

使一个AJAX调用服务器一样简单的使用load ()在DOM元素的方法:

美元(“# search_keywords”).keyup(函数(关键){如果(this.value。长度> =3| |。值= =”){美元(“#乔布斯).load(' < ?php echo url_for ('@job_search”)? > ',{查询:这个。值+‘*’}});}});

管理Ajax调用相同的行动一个叫做“正常”。所需的行动的变化将在下一节中完成。

但是,首先,让我们删除搜索按钮,如果启用了JavaScript:

美元(”。搜索输入(type =“提交”))hide();

用户反馈

当你让一个AJAX调用,页面不会被更新。浏览器将等待服务器响应前回来更新页面。与此同时,需要为用户提供视觉反馈通知他的事情。

一个会议是显示在AJAX调用加载程序图标。更新布局添加装载机图像和隐藏它默认情况下:

/ /应用程序/前端/模板/ layout.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工作,打开布局文件,添加以下JavaScript代码结束的时候<头>部分:

/ /应用程序/前端/模板/ layout.php<脚本类型=“text / javascript”>美元(文档)时(函数(){美元(”。搜索输入(type =“提交”))hide();美元(“# search_keywords”).keyup(函数(关键){如果(this.value。长度> =3| |。值= =”){美元(“#装载机”),告诉();美元(“#乔布斯).load(' < ?php echo url_for ('@job_search”)? > ',{查询:这个。值+‘*’},函数(){美元(“#装载机”)hide();});}});});> < /脚本

AJAX的一个动作

如果启用了JavaScript, JQuery将拦截所有键输入搜索框,并将调用搜索行动。如果不是,是一样的搜索行动也被称为用户提交表单时,通过按“输入”键或点击“搜索”按钮。

所以,搜索行动,现在需要确定通过AJAX调用。当一个请求是由一个AJAX调用,isXmlHttpRequest ()请求对象返回的方法真正的。

的isXmlHttpRequest ()方法适用于所有主要的JavaScript库,如原型,Mootools或jQuery。

/ /应用程序/前端/模块/工作/行动/ actions.class.php公共函数executeSearch(sfWebRequest美元的请求){如果(!美元的查询=美元的请求- >getParameter(“查询”)){返回这个美元- >向前(“工作”,“指数”);}这个美元- >工作= JobeetJobPeer::getForLuceneQuery(美元的查询);如果(美元的请求- >isXmlHttpRequest()){返回这个美元- >renderPartial方法(“工作/列表”,数组(“工作”= >这个美元- >工作));}}

作为JQuery不会重新加载页面但只会取代#工作DOM元素的响应内容,页面不应该装饰的布局。因为这是一个共同的需要,布局是禁用默认情况下,当一个AJAX请求。

此外,而不是返回完整的模板,我们只需要返回的内容工作/列表部分。的renderPartial方法()方法用于操作返回部分的反应而不是完整的模板。

如果用户删除所有字符在搜索框中,如果没有搜索返回的结果,我们需要显示一条消息,而不是一个空白页。我们将使用renderText ()方法来呈现一个简单的测试字符串:

/ /应用程序/前端/模块/工作/行动/ actions.class.php公共函数executeSearch(sfWebRequest美元的请求){如果(!美元的查询=美元的请求- >getParameter(“查询”)){返回这个美元- >向前(“工作”,“指数”);}这个美元- >工作= JobeetJobPeer::getForLuceneQuery(美元的查询);如果(美元的请求- >isXmlHttpRequest()){如果(‘*’= =美元的查询| | !这个美元- >工作){返回这个美元- >renderText(“没有结果。”);}其他的{返回这个美元- >renderPartial方法(“工作/列表”,数组(“工作”= >这个美元- >工作));}}}

您也可以返回一个组件使用renderComponent ()方法。

JavaScript是一个行动

虽然将JavaScript直接进入<头>标签Jobeet搜索引擎很有道理,有时更好的创建一个专门的文件。但随着大多数JavaScripts使AJAX调用需要一些网址,他们需要使用url_for ()助手,因此应该是动态的。

JavaScript是另一种格式(如HTML,看到一些天前,symfony使格式管理相当容易。ob娱乐下载页面的JavaScript文件将包含行为,你甚至可以有相同的URL的页面的JavaScript文件,但结局. js。例如,如果您想创建一个文件搜索引擎的行为,您可以修改job_search路线如下:

job_search: url: /搜索。:sf_format参数:{模块:工作、行动:搜索、sf_format: html}要求:sf_format: (?: html | js)

url在网站上是稳定的,JavaScript文件大多是静态的,并且不随时间变化的。缓存,这是一个完美的候选人,我们会在未来的一天。

测试AJAX

因为symfoob娱乐下载ny浏览器无法模拟JavaScript,您需要帮助的时候测试AJAX调用。主要意味着你需要手动添加JQuery的头和其他主要的JavaScript库发送的请求:

/ /测试/功能/前端/ jobActionsTest.php美元的浏览器- >setHttpHeader(“X_REQUESTED_WITH”,XMLHttpRequest的);美元的浏览器- >信息(“5 - Live搜索”)- >得到(“查询= sens * /搜索?”)- >与(“响应”)- >开始()- >checkElement(“表tr”,3)- >结束();

的setHttpHeader ()方法设置HTTP头的下一个请求的浏览器。

明天见

昨天,我们使用Zend Lucene图书馆实现搜索引擎。今天,我们使用JQuery响应更快。symfob娱乐下载ony框架提供了所有的基本工具来轻松构建MVC应用程序,与其他组件,也是。像往常一样,尝试使用最好的工具来工作。

明天,我们将看到如何国际化Jobeet网站。