ArcGIS客户端开发学习笔记(一)——AJAX机制

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

  ArcGIS客户端开发学习笔记(一)——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 forJavascript中用到的Dojo框架,还有Struct框架等等。这些框架,都帮我们把Ajax模式都封装成了响应的类库,我们直接调用就行了。

你可能感兴趣的:(arcgis)