ajax实现实时聊天,ajax笔记

　　Symfony评论

　　经过七个小时的工作，askeet程序已经很不错了。主页显示了一个问题列表，详细信息显示了问题的答案。用户有一个配置页面，各种主题列表也可以通过每个页面的侧边栏访问。我们社区加强的FAQ方向是对的，但是现在用户无法修改数据。

　　如果web中的数据操作是基于长表单的，那么今天的AJAX技术可以改变程序的构建方式。这同样适用于askeet。在本指南中，我们将展示如何向askeet添加增强的AJAX交互。它的目标是允许注册用户声明他对某个问题的兴趣。

　　向布局添加指示器。

　　当发送异步请求时，AJAX网站的用户不需要考虑通常的动作暂停，结果会很快显示出来。这就是为什么所有的AJAX交互页面都应该能够显示一个活动指示器。

　　因此，在global layout.php的主体顶部添加以下代码行：

　　div id=indicator /div

　　尽管这在默认情况下是隐藏的，但是当发送AJAX请求时，将会显示div。它是空的，但是main.css样式表指定了它的形状和内容：

　　div #指示器

　　{

　　位置：绝对；

　　100px

　　高度：40px

　　左：10px

　　top:10px；

　　z指数：900；

　　背景：url(/images/indicator.gif)无重复0 0；

　　}

　　添加AJAX交互申报利益。

　　AJAX交互由三部分组成：调用者(链接、按钮或其他用户发起动作的控件)、服务器动作和向用户显示动作结果的页面区域。

　　呼叫者

　　让我们回到所示的问题。如果我们记得第四天，问题可以显示在问题列表或问题详细信息中。

　　这就是为什么问题标题和兴趣块被重构为_ inter _ user.php片段的原因。再次打开此剪辑并添加一个链接以允许用户声明他们的兴趣：

　　？php use_helper(User )？

　　div id=mark_？php echo $question- getId()？

　　？PHP echo $ question-getInterestedUsers()？

　　/div

　　？PHP echo link _ to _ user _ interested($ SF _ user，$question)？

　　这个链接不仅仅是重定向到另一个页面。实际上，如果用户已经指定了自己对某个问题的兴趣，就不能再声明了。如果这个用户没有被认证，呃，这将是我们稍后讨论的情况。

　　这个链接是用一个helper函数写的，需要在askeet/apps/frontend/lib/helper/user helper . PHP中创建：

　　？服务器端编程语言（Professional Hypertext Preprocessor的缩写）

　　use _ helper( Javascript )；

　　函数link_to_user_interested($user，$question)

　　{

　　if ($user- isAuthenticated())

　　{

　　$ interested=interest peer:retrieveByPk($ question-getId()，$ user-getSubscriberId())；

　　如果(感兴趣)

　　{

　　//已经感兴趣了

　　返回“感兴趣！”；

　　}

　　其他

　　{

　　//还没有申报利益

　　返回link_to_remote(感兴趣吗？，数组(

　　url=用户/感兴趣？id=。$question- getId()，

　　update =array( success = block _ 。$question- getId())，

　　正在加载“=”元素，

　　请完成“=”元素。hide( indicator )；”。visual_effect(highlight ， mark_ )。$question- getId())，

　　));

　　}

　　其他

　　{

　　返回link_to(有兴趣吗？，‘用户/登录’)；

　　}

　　？

　　link_to_remote()函数是AJAX交互的第一个元素：调用者。他说明了当用户单击链接时必须请求哪个动作(这里是用户/感兴趣的),以及必须用动作结果更新页面中的哪个区域。添加了两个事件处理程序(loding和complete ),并与原型javascript函数相关联。原型库提供了手动javascript工具，使用简单的函数调用来实现页面中的视觉效果。唯一的缺点是缺少文档，但是源代码相当直接。

　　我们选择使用helper而不是partial，是因为这个函数的PHP代码比HTML代码多。

　　别忘了加id id=block_？在question/_list片段中。php echo $question- getId()？。

　　div id=block_？php echo $question- getId()？

　　？PHP include _ partial( interested _ user ，array(question=$question))？

　　/div

　　结果区域

　　link _ to _ remote()JavaScript helper的update属性指定结果区域。在这个例子中，用户/感兴趣的动作的结果将替换id为block_XX的元素的内容。如果我们仍然困惑，我们可以看看这个模板片段中的综合内容：

　　div id=block_？php echo $question- getId()？

　　！-在这之间-

　　？php use_helper(User )？

　　div id=mark_？php echo $question- getId()？

　　？PHP echo $ question-getInterestedUsers()？

　　/div

　　？PHP echo link _ to _ user _ interested($ SF _ user，$question)？

　　！-在那里-

　　/div

　　两个段落的中间区域是结果区域。一旦执行此操作，它将替换这些内容。

　　第二个id(mark_XX)的兴趣相当明显。link_to_remote帮助器的完整事件处理程序将突出显示所单击兴趣的interested_mark div层，并返回该动作中某个兴趣的增量数。

　　服务器操作

　　AJAX调用者指向用户/感兴趣的动作。此操作必须为兴趣表中的当前问题和当前用户创建新记录。在Symfony中，我们可以这样做：

　　公共函数executeInterested()

　　{

　　$ this-quest=question peer:retrieveByPk($ this-getrequest parameter( id )；

　　$ this-forward 404除非($ this-question)；

　　$ user=$ this-getUser()-get subscriber()；

　　$interest=新利息()；

　　$ interest-set question($ this-question)；

　　$ interest-setUser($ user)；

　　$ interest-save()；

　　}

　　这里我们要记住，兴趣对象的-save()方法已经修改，增加了相关用户的interested_user域。所以对当前问题感兴趣的用户数量会在动作调用后自动增加。

　　那么结果的interestedSuccess.php模板应该如何显示呢？

　　？PHP include _ partial( question/interested _ user)，array(question=$question))？

　　他将再次显示问题模块的_ inter _ user.php片段。这是写这个片段最棒的地方。

　　我们不得不禁止这个模板的布局(modules/user/config/view.yml):

　　有趣的成功：

　　has_layout: off

　　最后试验

　　AJAX兴趣的开发现在结束了。我们可以进行相应的测试，在登录页面输入已有的用户名和密码，显示问题列表，点击‘有兴趣？’链接。当请求发送到服务器时，会显示该指示器。然后，当服务器回答时，增加的数字将被突出显示。我们可以注意到开头的“感兴趣？”现在链接是‘感兴趣’，没有链接。这就是我们的link _ to _ interested助手所做的事情。

　　添加嵌入式“登录”表单

　　我们前面说过，只有注册用户才能声明自己对某个问题感兴趣。这意味着如果未经授权的用户点击“感兴趣的？”链接，您必须首先显示登录页面。

　　但是等一下。为什么用户加载一个新的页面登录，和他声明的兴趣失去联系？更好的方法是在页面上动态加载一个登陆页面。这就是我们将要做的。

　　将隐藏的登录表单添加到布局中。

　　打开全局布局(askeet/apps/frontend/templates/layout . PHP)并添加以下代码(header和content div之间的内容):

　　？php use_helper(Javascript )？

　　div id=登录

　　h2请先登录/h2

　　？PHP echo link _ to _ function( cancel ，visual_effect(blind_up ， login ，array(duration=0.5))？

　　？php echo form_tag(用户/登录， id=loginform )？

　　昵称：php echo input_tag(昵称)？br /

　　密码：PHP echo input _ password _ tag( password )？br /