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

最新推荐文章于 2026-06-17 17:50:55 发布

原创最新推荐文章于 2026-06-17 17:50:55 发布 · 431 阅读

0 ·

本内容遵循CC 4.0 BY-SA版权协议

标签

#ajax #xmlhttprequest #服务器 #javascript #asynchronous

GIS二次开发专栏收录该内容

5 篇文章

订阅专栏

本文介绍了Ajax技术的基本原理及其在GIS客户端编程中的应用。通过对比传统网络应用程序模型与Ajax模型，阐述了Ajax如何通过异步请求提高用户体验。并提供了一个简单的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 代码：

<! 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 模式都封装成了响应的类库，我们直接调用就行了。