Ajax学习--案例分析

代码太长，无法在中打开，此篇只做个人学习经验，无参考价值，看官别浪费时间看这个了。

Ajax是异步处理技术，用js来实现，该技术主要用来处理部分网页的加载以防止只需要更新一小部分页面却需要更新整个页面的尴尬局面，大大减少了网页加载的功耗。

案例代码实现的功能是：热点放大，具体就是当你鼠标悬停在地图某一点时，若该点为事先设置好的热点区域，则会加载该地区的图片。

代码分析如下：

整个程序是事件驱动的，程序的入口是鼠标移动mousemove事件，在鼠标移动的事件中加入timer计时器以进行计时。当鼠标移动时则计时器刷新，当计时器累积达到0.5秒，也就是鼠标在某一点停留超过0.5秒时则触发下一个事件。

此时分为两种情况，如果悬停的点不是热点事件则不会触发任何事件，直至鼠标在此移动，触发上一级的鼠标移动事件；而如果悬停的点是事先设置好的热点区域，则程序就会将该点关联的图片加载出来。因为关联的图片信息藏在悬停地理坐标点处。此时就需要根据鼠标在屏幕中的屏幕坐标换算出该点真实的地理坐标。因此悬停后将触发坐标转换的代码，如下

坐标找到便要得到该点的xml信息，由于可能影响用户体验，因此使用异步处理技术。

如下：

触发分析XML事件从坐标中挖掘信息，如下：

图片路径最终位置与上段程序中如下代码有关：

得到相对路径后通过如下事件加载到地图上。

代码效果：

---

---