Notes On <AJAX & PHP> - 2

第六章：Ajax提示與自動完成

这张图显示了客户端的Javascript向服务器发送请求的基本逻辑。check函数每0.5秒运行一次，每次运行他都会用setTimeOut再次设定自己的下一次运行，而如果条件符合，它将呼叫getSuggestions()函数，后者将进行一系列判断来决定如何处理，其中有三个可能性，而最重要的是XHR对象当下有效，于是它向服务器发送了一个请求，于是下面的控制就转交给处理函数：handleGettingSuggestions()。

请注意一点，就是如果当下XHR对象无效，那么getSuggestions()将会设定0.5秒之后重新呼叫自己，而在此之前会清除之前的相同情况下被滞留的呼叫，也就是说，当一个字段在还没有被搜索 时，用户就已经修改了字段，那么不需要再搜索它了。

下面是在收到服务器的回应后做的反应的大致流程，从handleGettingSuggestions()被呼叫开始：

在这个流程中，有一些固定的繁琐操作被作者包装到一些个独立的函数来处理。这里面，在displayResults()里面，根据返回的结果（函数名）来创建自动提示表里的内容，这里的处理有些复杂，因为每个函数名中前面几个匹配被搜索的字段的字符将会被设定为粗体，而对应的链接是根据全局变量phpHelpUrl和函数名按照一定程序组合成的，这个链接在后来也将被用作提取函数名，在updateKeywordValue()函数里。

除了以上用来与服务器交互处理数据的函数外，这个程序还有一些重要的事件处理函数：

handleOnMouseOver()与handleOnMouseOut()只与元素样式有关。handleKeyUp()则比较复杂，它处理up键，down键与enter键，enter键会导致页面重定向去PHP官网。

另外有一点，就是在这个小程序里，作者展示了如何尽量多的设定变量来追踪程序的状态，而进一步通过这个状态的判断来减少不必要的操作，以及避免导致奇怪的用户体验。

还有没有被此图列入其中的isKeyUpDownPressed。

第七章：基于SVG的实时图表

其实这个程序的逻辑很简单，它只是作者用来介绍SVG如何使用的一个极端简单化的示例，但因为我暂时对SVG不感兴趣，所以我也不想多提SVG，比较有用的信息是，SVG本身是基于XML的技术，而且它也支持Javascript嵌入，可以当它是另一种XHTML的版本，只是SVG却又可以被嵌入HTML中交由浏览器的插件来实现。这个技术我觉得有点尴尬，眼下HTML5的大趋势下，任何插件式的东西都被排斥，而SVG眼下仍以插件的姿态出现，只不过不像Flash那样是一家公司的插件，可它仍是插件。我认为它长远的发展只有两条路，要么融合进HTML5的标准，成为一个新的标签；要么被抛弃。

下面的图是前端的Javascript的流程：

上面的流程中，当前端程序想要发送一个异步请求至服务器时，它有两个选择，在非IE的情况下，都会选择调用ajaxrequest.js中定义的ajaxRequest方法，而这个方法与之前的大多数都差不多：

简单来讲，这个前端程序做的事情就是每隔一段时间，就从服务器获取一个坐标点，然后将这个坐标点的数据插入SVG的标签里，具体讲是通过Js修改某些标签的属性值，这样就会有一个动态变化的图表了。

而通过Ajax发送的请求，服务器的返回总是一组坐标值：

而最关键之处，就是修改这个path标签的d属性，它的值是个很长的字符串，在这个字串后加上新的点的位置：

不过，貌似Chrome对于SVG的支持不是原生态的，而是通过使用Javascript+HTML的方法给Chrome写的扩展来支持。而且在这个实现中有一些问题，或许是bug：