您的位置：首页 > 理论基础 > 计算机网络

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

2010-08-27 02:08 549 查看

上面这图就是传统的网络应用程序模型和是用了
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
模式都封装成了响应的类库，我们直接调用就行了。

内容来自用户分享和网络整理，不保证内容的准确性，如有侵权内容，可联系管理员处理

标签： ajax xmlhttprequest 服务器 javascript asynchronous 浏览器

相关文章推荐

新的分享

章节导航