ArcGIS客户端开发学习笔记（一）—AJAX机制

zongnixunta · 发表于 2010-11-1 11:38

摘要：AJAX即“Asynchronous JavaScript and XML”（异步JavaScript和XML)。现在的GIS客户端编程都是基于Ajax技术的。我觉得Ajax最大的特点在于它提供了更好的用户体验。以往的Web开发，当用户填完表单后点击“提交”按钮，整个页面都会回送请求到服务器（Server）端。在回送的过程中，客户无法在当前页面进行其他的操作（比如继续浏览当前网页的其他内容），需要等待服务器端对请求进行响应后，才能进行下一步的操作，这样的等待是漫长的。那么Ajax技术的出现，很好的缩短了这个漫长的等待。　　AJAX即“Asynchronous JavaScript and XML”（异步JavaScript和XML)。现在的GIS客户端编程都是基于Ajax技术的。我觉得Ajax最大的特点在于它提供了更好的用户体验。以往的Web开发，当用户填完表单后点击“提交”按钮，整个页面都会回送请求到服务器（Server）端。在回送的过程中，客户无法在当前页面进行其他的操作（比如继续浏览当前网页的其他内容），需要等待服务器端对请求进行响应后，才能进行下一步的操作，这样的等待是漫长的。那么Ajax技术的出现，很好的缩短了这个漫长的等待。
　　

　　上面这图就是传统的网络应用程序模型和是用了Ajax的网络应用程序模型的比较。传统的模型，当客户端发出请求（HTTP request）后，需要将当前页面都回送给服务器端。服务器对请求进行分析后，发出的响应中包含新页面的所有信息，包括HTML、CSS和DATA，一起回送给请求页面，这样整个页面都会根据响应过来的信息重新刷新一遍。
　　Ajax模型中，页面的请求一般是由javascript触发的，经过Ajax engine（一般是XMLHttpRequest）将请求发送到Server端，这个过程不需要把整个页面进行回送。Server对数据进行响应的处理后发送回应信息，回应信息的格式一般是string和XML，其中就不需要包含整个页面的HTML和CSS，只需要把请求中需要的数据发送给请求页面，这样的数据传输量也就小了。响应的数据由javascript进行处理。这样在整个请求和响应过程中，用户还可以对当前页面进行其他的操作，所以说整个Ajax请求是异步的。
　　下面是一个AJAX请求的Demo：向服务器获取服务器当前的时间。我是用的是asp.net作为Server端。
　　客户端Html代码：

view source
print?
01 <!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
02
03 <html xmlns="http://www.w3.org/1999/xhtml">
04 <head>
05    <title>AJAX Demo</title>
06    <script type="text/javascript" language="javascript">
07    var request=null;//Ajax请求对象
08    //根据不同浏览器创建请求对象
09    function createRequest()
10    {
11       try{
12       request=new XMLHttpRequest();
13       }
14       catch(trymicrosoft)
15       {
16          try{
17                request = new ActiveXObject("Msxm12.XMLHTTP");
18                }
19          catch(othermicrosoft)
20          {
21                try{
22                   request = new ActiveXObject("Microsoft.XMLHTTP");
23                   }
24                   catch(faild)
25                   {
26                   request=null;
27                   }
28          }
29       }
30       if(request==null)
31          alert("创建request对象失败");
32    }
33    //异步请求触发器
34    function getServerTime()
35    {
36       createRequest();//创建请求对象
37       var url="Default.aspx?time=";//新脚本的url
38       var date = new Date();
39       url=url+date.getTime();
40       request.open("GET",url,true);//请求对象初始化连接
41       request.onreadystatechange=updatePage;//设置服务器响应请求后的回调函数
42       request.send(null);//向服务器发送请求
43    }
44    //服务器响应请求后的回调函数
45    function updatePage()
46    {
47       if(request.readyState==4)//就绪状态(ready state)有4个值“1:连接刚被初始化；
48       {                      //2:正在处理请求；3:服务器快要完成请求；4:请求完成，浏览器得到响应”
49          var time=request.responseText;//服务器的响应数据
50
51          document.getElementById("timeInfo").innerHTML=time;
52
53       }
54    }
55    </script>
56 </head>
57 <body>
58    服务器当前的时间是：<div id="timeInfo"></div><br />
59    <input type="button" value="得到服务器时间"/>
60 </body>
61 </html>

服务器端代码：

view source
print?
1 using System;
2 public partial class Default : System.Web.UI.Page
3 {
4    protected void Page_Load(object sender, EventArgs e)
5    {
6       string respons = DateTime.Now.ToString();
7       Response.Write(respons);
8    }
9 }

　　总结一下，一个完整的Ajax过程如下：
　　1、创建XMLHttpRequest对象
　　2、通过上一步创建的XMLHttpRequest对象，打开一个连接
　　3、绑定事件，对获取到的数据进行处理。一般为请求成功后的回调函数
　　4、发送该请求
　　5、在客户端对请求的响应数据进行操作
　　最后说明一下，一般来说，我们不会按照上面那样进行Ajax模式的编程。首先，不同浏览器对Ajax Engine的支持是不一样的，比如Firefox可以使用XMLHttpRequest对象，但是IE浏览器就不支持这个对象，需要使用ActiveXObjext对象。其次，如果每次都按照上面那样写的话，代码量大，容易出错。考虑到代码的兼容性、易用性，一般现在在客户端都会使用其他轻量级的javascript脚本的框架，比如后面的ArcGIS API forJavascript中用到的Dojo框架，还有Struct框架等等。这些框架，都帮我们把Ajax模式都封装成了响应的类库，我们直接调用就行了。

本篇文章来源于 GIS空间站转载请以链接形式注明出处网址：http://www.gissky.net/Article/1968.htm