OpenLayers 3 之 使用 AJAX 通信

0. 摘要

地图应用是大流量应用，如果频繁刷新页面，造成的数据传输也必然是很大的，这在你的网络不是很好的时候，你就醉了，这时候便是 AJAX 显现优势的时候了。这里我们把 AJAX 应用在地图搜索中，下面看看怎么做到的吧！
当然，AJAX 在执行的时候，如果网络不好，同样会让用户感到点击了触发 AJAX 的按钮，却没有反应！所以可以在处理过程中，添加一个进度条。现实项目中，要根据情况选择最合适项目的技术，是业务驱动技术，而不是反过来！

1. 什么是AJAX ，什么作用

AJAX，全称是Asynchronous JavaScript + XML，它可以向服务器请求额外的数据而无需卸载页面，带来更好的用户体验。虽然名字中包含XML，但是AJAX的通信实际上与数据格式无关，这种技术就是无需刷新页面即可从服务器取得数据，但不一定是XML数据。
使用AJAX不仅要处理浏览器的兼容问题，还要处理与服务器通信过程中的状态变化问题。为了避免这些繁杂的与事务无关的事情，使用一种框架来处理这些繁杂的事情，很有必要，JQuery等很多框架都可以做到。

2. 添加查询组件

我们可能想给系统加上查询地理事物的功能，而前面我们提到最好是在不刷新的情况下进行查询和结果展示，这里便是一个AJAX技术很好的应用点！首先我们要在HTML文件中添加搜索框，然后在JS文件中编写点击按钮的事件，事件处理中便包含一些AJAX技术，用来查询数据库。

2.1 在 map.html 添加搜索框

<div id="search_group" class="search_group">
    <input id="search_input" class="search_input">
    <button id="search_button" class="search_button" type="button">搜索！</button>
</div>

这段代码加入到 id 为”map”的 div 里边，让其为第一个子元素。这里每个元素都有两个属性：id 和 class ，id 是为了使用 JavaScript 取用用户输入文字的（getElementById）， class 是 css 类，定义了相应元素的外观。

2.2 在 map_style.css 添加搜索框样式