ArcGIS Server JAVA讲座 --AJAX基础,开源盛世-源代码下载网,一切精彩开放源代码尽在开源盛世！,开源,源代码,源码,VC,VB,Delphi,MapX,GIS,PDA,EVC,EVB,MapInfo,Visual C++,Visual Basic,开放源代码

咱也来跟跟潮流，讲一讲AJAX和JSF如何结合。我相信，这也是将来SERVER JAVA的开发人员都会问的一个问题。我们来看看如何能够让AJAX能够在服务器上和客户端跑起来。
要应用AJAX的条件是：
1、  一个支持javascript的浏览器，当然，现在主流的浏览器都是支持Javascript的。
2、  浏览器必须支持XMLHTTP或者XMLHttpRequest对象。
3、  能够以XML发送响应的服务器端。服务器端可以有很多的技术来实现，不管你是用ASP，JAVA，都可以实现。当然，本文要讨论的局限于JSF技术。

对于熟悉大多数服务器端程序编写的工程师，比如我，Javascript完全是另外一个世界。但是了解Javascript，将使你的程序更加强大，开发起来更加容易。一个很有意思的功能是如果用户在编辑地图的时候，编辑到中途，忘记保存了，这提醒我们可以做一个比较有意思的功能，自动保存。在google mail中，你是不是已经感觉到过这个自动保存的功能了呢？反正我当时看到的时候吓了一跳。以一个服务器端程序员的思路去思考，会觉得不可思议。事实上这个功能就可以用Ajax技术来实现，用一个定时器，每隔5分钟自动发送一个保存的请求就可以实现这样的功能。

再看一个自动查找的例子，比如一个输入一个用户后自动出来和该用户有关的信息，可以通过这样的方法来实现：

[Copy to clipboard] [ - ]

CODE:

Search(‘query’)方法可以发送一个Ajax请求到客户端，进行查询后，将结果以XML请求返回，这样就不需要刷新整个页面而进行部分更新。就这么一个小小的技术，让用户在继续Web 浏览的时候感觉更好，也成为了各个网站争相模仿的对象，一些开发人员也发现了宝贝一样言必称Ajax，甚至成为项目选型的关键，这大概也是最初的开发者想象不到的。

来看看Javascript如何来发送一个XMLHttpRequest请求的。来看一下下面的代码：

[Copy to clipboard] [ - ]

CODE:

if (window.XMLHttpRequest) {
req = new XMLHttpRequest();
}
else if (window.ActiveXObject) {
req = new ActiveXObject("Microsoft.XMLHTTP");
}

这是再简单不过的实例化XMLHttpRequest的一段代码，实例化一个之后，你就可以像操作一个普通的对象一样操作它，它有很多的方法，比如下面的方法是建立和服务器端的链接：

[Copy to clipboard] [ - ]

CODE:

req.open("GET", url, true);

第一个参数是HTTP请求的方式：”Get”或者”Post”，第二个参数是服务器的URL，第三个参数是是否进行非同步的请求。大家如果已经仔细研究了我们ESRI的工具标签，你会发现这些标签里面有一个clientPostBack属性可以设置是否进行异步请求。我们可以知道，Web ADF在后面肯定用了open方法的第三个参数来进行。要小心的是，如果你要设置clientPostBack为true，你的javascript代码可能需要重新构建一下。不然这些代码可能不会被执行。因为异步请求更新的是部分页面。

异步请求的意思是在请求时浏览器可以做其它的事情，那么如何得知服务器端的处理已经结束，可以更新页面上的数据了呢？我们来看看XMLHttpRequest对象的方法

[Copy to clipboard] [ - ]

CODE:

req.onreadystatechange = processXMLResponse;

当服务器端的处理结束时，就可以调用processXMLResponse方法，我们就可以通过对这个方法进行编程来处理请求，当然可以是任何的名字的方法，只要将方法注册到onreadystatechange方法即可。

XMLHttpRequest初始化完成后就可以发送到请求到服务器端了，用一个很简单的方法即可：

[Copy to clipboard] [ - ]

CODE:

req.send(null);

当然，一般get用的实在太少，我们最关心的是Post，看看Post应该怎么做：

[Copy to clipboard] [ - ]

CODE:

req.open("POST", "/agsviewer", true);
req.setRequestHeader("Content-Type", "application/x-www-form-urlencoded";
req.send("__ADFPostBack__=true&formId=f"+"&mapId=Map0&ajaxdemo=ajaxdemo ");

Post可以发送一些数据到服务器端，这正是我们所需要的。我们来继续看看一个请求当前比例尺的代码：

[Copy to clipboard] [ - ]

CODE:

function updateInfoResponse(xmlHttp) {
if (xmlHttp != null && xmlHttp.readyState == 4 && xmlHttp.status == 200) {
var xml = xmlHttp.responseXML;
document.getElementById("scale").value = "1:" + xml.getElementsByTagName("scale").item(0).firstChild.nodeValue;
}
}

看一下判断了(xmlHttp != null && xmlHttp.readyState == 4 && xmlHttp.status == 200，判断4是表示处理已经结束，判断200表示HTTP请求正常，相信大家都见过404的HTTP请求，令人讨厌的“page not found”。
判断结束后，就用xml.getElementsByTagName("scale").item(0).firstChild.nodeValue;语句把比例尺取过来。

相信大家都大致知道AJAX是怎么回事了，下一次我会写一个简单的例子。

IBM网站上有一篇很好的介绍AJAX的文章，大家可以去看看：
http://www-128.ibm.com/developerworks/cn/xml/wa-ajaxintro1.html

软件：
文章：