<!-- /* Font Definitions */ @font-face {font-family:宋体; panose-1:2 1 6 0 3 1 1 1 1 1; mso-font-alt:SimSun; mso-font-charset:134; mso-generic-font-family:auto; mso-font-pitch:variable; mso-font-signature:3 135135232 16 0 262145 0;} @font-face {font-family:"Cambria Math"; panose-1:2 4 5 3 5 4 6 3 2 4; mso-font-charset:1; mso-generic-font-family:roman; mso-font-format:other; mso-font-pitch:variable; mso-font-signature:0 0 0 0 0 0;} @font-face {font-family:Calibri; panose-1:2 15 5 2 2 2 4 3 2 4; mso-font-charset:0; mso-generic-font-family:swiss; mso-font-pitch:variable; mso-font-signature:-1610611985 1073750139 0 0 159 0;} @font-face {font-family:"/@宋体"; panose-1:2 1 6 0 3 1 1 1 1 1; mso-font-charset:134; mso-generic-font-family:auto; mso-font-pitch:variable; mso-font-signature:3 135135232 16 0 262145 0;} /* Style Definitions */ p.MsoNormal, li.MsoNormal, div.MsoNormal {mso-style-unhide:no; mso-style-qformat:yes; mso-style-parent:""; margin:0cm; margin-bottom:.0001pt; mso-para-margin-top:0cm; mso-para-margin-right:0cm; mso-para-margin-bottom:.5gd; mso-para-margin-left:0cm; mso-para-margin-bottom:.0001pt; text-indent:10.0pt; mso-char-indent-count:2.0; mso-pagination:none; font-size:10.5pt; mso-bidi-font-size:11.0pt; font-family:"Calibri","sans-serif"; mso-ascii-font-family:Calibri; mso-ascii-theme-font:minor-latin; mso-fareast-font-family:宋体; mso-fareast-theme-font:minor-fareast; mso-hansi-font-family:Calibri; mso-hansi-theme-font:minor-latin; mso-bidi-font-family:"Times New Roman"; mso-bidi-theme-font:minor-bidi; mso-font-kerning:1.0pt;} .MsoChpDefault {mso-style-type:export-only; mso-default-props:yes; mso-bidi-font-family:"Times New Roman"; mso-bidi-theme-font:minor-bidi;} /* Page Definitions */ @page {mso-page-border-surround-header:no; mso-page-border-surround-footer:no;} @page Section1 {size:612.0pt 792.0pt; margin:72.0pt 90.0pt 72.0pt 90.0pt; mso-header-margin:36.0pt; mso-footer-margin:36.0pt; mso-paper-source:0;} div.Section1 {page:Section1;} -->
AJAX 即 “Asynchronous JavaScript and XML” (异步 JavaScript 和 XML) 。现在的 GIS 客户端编程都是基于 Ajax 技术的。我觉得 Ajax 最大的特点在于它提供了更好的用户体验。以往的 Web 开发,当用户填完表单后点击“提交”按钮,整个页面都会回送请求到服务器( Server )端。在回送的过程中,客户无法在当前页面进行其他的操作(比如继续浏览当前网页的其他内容),需要等待服务器端对请求进行响应后,才能进行下一步的操作,这样的等待是漫长的。那么 Ajax 技术的出现,很好的缩短了这个漫长的等待。
<!-- /* Font Definitions */ @font-face {font-family:宋体; panose-1:2 1 6 0 3 1 1 1 1 1; mso-font-alt:SimSun; mso-font-charset:134; mso-generic-font-family:auto; mso-font-pitch:variable; mso-font-signature:3 135135232 16 0 262145 0;} @font-face {font-family:"Cambria Math"; panose-1:2 4 5 3 5 4 6 3 2 4; mso-font-charset:1; mso-generic-font-family:roman; mso-font-format:other; mso-font-pitch:variable; mso-font-signature:0 0 0 0 0 0;} @font-face {font-family:Calibri; panose-1:2 15 5 2 2 2 4 3 2 4; mso-font-charset:0; mso-generic-font-family:swiss; mso-font-pitch:variable; mso-font-signature:-1610611985 1073750139 0 0 159 0;} @font-face {font-family:新宋体; panose-1:2 1 6 9 3 1 1 1 1 1; mso-font-charset:134; mso-generic-font-family:modern; mso-font-pitch:fixed; mso-font-signature:3 135135232 16 0 262145 0;} @font-face {font-family:"/@宋体"; panose-1:2 1 6 0 3 1 1 1 1 1; mso-font-charset:134; mso-generic-font-family:auto; mso-font-pitch:variable; mso-font-signature:3 135135232 16 0 262145 0;} @font-face {font-family:"/@新宋体"; panose-1:2 1 6 9 3 1 1 1 1 1; mso-font-charset:134; mso-generic-font-family:modern; mso-font-pitch:fixed; mso-font-signature:3 135135232 16 0 262145 0;} /* Style Definitions */ p.MsoNormal, li.MsoNormal, div.MsoNormal {mso-style-unhide:no; mso-style-qformat:yes; mso-style-parent:""; margin:0cm; margin-bottom:.0001pt; mso-para-margin-top:0cm; mso-para-margin-right:0cm; mso-para-margin-bottom:.5gd; mso-para-margin-left:0cm; mso-para-margin-bottom:.0001pt; text-indent:10.0pt; mso-char-indent-count:2.0; mso-pagination:none; font-size:10.5pt; mso-bidi-font-size:11.0pt; font-family:"Calibri","sans-serif"; mso-ascii-font-family:Calibri; mso-ascii-theme-font:minor-latin; mso-fareast-font-family:宋体; mso-fareast-theme-font:minor-fareast; mso-hansi-font-family:Calibri; mso-hansi-theme-font:minor-latin; mso-bidi-font-family:"Times New Roman"; mso-bidi-theme-font:minor-bidi; mso-font-kerning:1.0pt;} .MsoChpDefault {mso-style-type:export-only; mso-default-props:yes; mso-bidi-font-family:"Times New Roman"; mso-bidi-theme-font:minor-bidi;} /* Page Definitions */ @page {mso-page-border-surround-header:no; mso-page-border-surround-footer:no;} @page Section1 {size:612.0pt 792.0pt; margin:72.0pt 90.0pt 72.0pt 90.0pt; mso-header-margin:36.0pt; mso-footer-margin:36.0pt; mso-paper-source:0;} div.Section1 {page:Section1;} -->
上面这图就是传统的网络应用程序模型和是用了 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 代码:
<! DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
< html xmlns ="http://www.w3.org/1999/xhtml">
< head >
< title > AJAX Demo</ title >
< script type ="text/javascript" language ="javascript">
var request=null ;//Ajax 请求对象
// 根据不同浏览器创建请求对象
function createRequest()
{
try {
request=new XMLHttpRequest();
}
catch (trymicrosoft)
{
try {
request = new ActiveXObject("Msxm12.XMLHTTP" );
}
catch (othermicrosoft)
{
try {
request = new ActiveXObject("Microsoft.XMLHTTP" );
}
catch (faild)
{
request=null ;
}
}
}
if (request==null )
alert(" 创建request 对象失败" );
}
// 异步请求触发器
function getServerTime()
{
createRequest();// 创建请求对象
var url="Default.aspx?time=" ;// 新脚本的url
var date = new Date();
url=url+date.getTime();
request.open("GET" ,url,true );// 请求对象初始化连接
request.onreadystatechange=updatePage;// 设置服务器响应请求后的回调函数
request.send(null );// 向服务器发送请求
}
// 服务器响应请求后的回调函数
function updatePage()
{
if (request.readyState==4)// 就绪状态(ready state) 有4 个值 “ 1: 连接刚被初始化;
{ //2: 正在处理请求;3: 服务器快要完成请求;4: 请求完成,浏览器得到响应 ”
var time=request.responseText;// 服务器的响应数据
document.getElementById("timeInfo" ).innerHTML=time;
}
}
</ script >
</ head >
< body >
服务器当前的时间是:< div id ="timeInfo"></ div >< br />
< input type ="button" onclick ="getServerTime()" value =" 得到服务器时间"/>
</ body >
</ html >
服务器端代码:
using System;
public partial class Default : System.Web.UI.Page
{
protected void Page_Load(object sender, EventArgs e)
{
string respons = DateTime .Now.ToString();
Response.Write(respons);
}
}
总结一下,一个完整的 Ajax 过程如下:
1 、创建 XMLHttpRequest 对象
2 、通过上一步创建的 XMLHttpRequest 对象,打开一个连接
3 、绑定事件,对获取到的数据进行处理。一般为请求成功后的回调函数
4 、发送该请求
5 、在客户端对请求的响应数据进行操作
最后说明一下,一般来说,我们不会按照上面那样来进行 Ajax 模式的编程。首先,不同的浏览器对 Ajax Engine 的支持是不一样的,比如 Firefox 可以使用 XMLHttpRequest 对象,但是IE 浏览器就不支持这个对象,需要使用ActiveXObjext 对象。其次,如果每次都按照上面那样写的话,代码量大,这样就容易出错。考虑到代码的兼容性、易用性,一般现在在客户端都会使用其他轻量级的javascript 脚本的框架,比如后面ArcGIS API for Javascript 中用到的Dojo 框架,还有Struct 框架等等。这些框架,都帮我们把Ajax 模式都封装成了响应的类库,我们直接调用就行了。