openlayers的popup实现

功能需求如下：

在一张地图上，我们希望点击相应的点之后，能够弹框显示该点的具体信息。

最终效果如下：（由于某些原因，有关信息不予显示）

首先，要完成该图的效果，要首先保证你了解了下面的相关知识：

1.如果你的openlayers工程和Geoserver部署在不同的服务器上，则，你需要解决跨域的问题。

无论你是通过WMS的GetFeatureInfo或者是通过WFS的GetFeature来实现，最终都是以Ajax的方式来发起请求。

下图是用firebug来捕捉点击事件，可以看出，X-Requested-With:XMLHttpRequest

所以该请求通过Ajax方式发起。

讲到这个地方，有必要温习一下几个知识点：同源策略，跨域访问。

注：参考 袭烽-《同源策略和跨域访问 》 该文章写的很好很全，建议读者抽空细读。

（1）何谓同源策略:（Same origin policy）
URL由协议、域名、端口和路径组成，如果两个URL的协议、域名和端口相同，则表示他们同源。
浏览器的同源策略，限制了来自不同源的"document"或脚本，对当前"document"读取或设置某些属性。 （白帽子讲web安全[1]）
从一个域上加载的脚本不允许访问另外一个域的文档属性。

（2）跨域访问：
顾名思义，就是一个站点中的资源去访问另外一个不同域名站点上的资源。
这种情况很常见，比如说通过 style 标签加载外部样式表文件、通过 img 标签加载外部图片、
通过 script 标签加载外部脚本文件、通过 Webfont 加载字体文件等等。
默认情况下，脚本访问文档属性等数据采用的是同源策略。

2.具体如何实现跨域访问
注：参考 袭烽-《同源策略和跨域访问 》

(1) JSONP
JSONP技术实际和Ajax没有关系。我们知道<script>标签可以加载跨域的javascript脚本，并且被加载的脚本和当前文档属于同一个域。因此在文档中可以调用/访问脚本中的数据和函数。如果javascript脚本中的数据是动态生成的，那么只要在文档中动态创建<script>标签就可以实现和服务端的数据交互。
JSONP就是利用<script>标签的跨域能力实现跨域数据的访问，请求动态生成的JavaScript脚本同时带一个callback函数名作为参数。其中callback函数本地文档的JavaScript函数，服务器端动态生成的脚本会产生数据，并在代码中以产生的数据为参数调用callback函数。当这段脚本加载到本地文档时，callback函数就被调用。

(2) Proxy
使用代理方式跨域更加直接，因为SOP的限制是浏览器实现的。如果请求不是从浏览器发起的，就不存在跨域问题了。
使用本方法跨