Server Java 一 :实现后台JSF Bean和前台Javascript

  先以一个问题开始,如果我们的webapplication中对geodatabase进行了编辑,大家都知道,这个时候需要一个提交编辑并保存,或者提交编辑并取消的过程,大家都用过ArcMAP,如果没有用过ArcMAP,word总是用过的,编辑过的东西,一关闭,肯定会给你警告。这个问题在桌面程序中简直就不是问题,在web上,我们倒是可以来说一说了,因为server和你的browser可能相距几万公里,你这边要关闭browser,在美国的服务器怎么能够知道你要关闭呢?服务器上运行的是JSF的Bean,而客户端运行的是Javascript,怎么让Javascript去感知后台的情况,给用户一个提示,这样就会很好地显示我们程序的友好性,对建设以人为本的和谐社会也大有好处。那么我们来看看如何做这个事情。
  Browser关闭时会产生onUnload事件,有了这个事件,使我们有机会做一些事情,比如下面的语句,显示一个信息
<body onUnload="javascript: alert('你要关闭我么?')">

在body中添加了这一句后,是不是已经看到了那个温柔的问句呢?如果是,那么你的Browser是支持这个onUnload事件的。下面来看这段代码:
function checkTime(){
var isModified=<c:out value="${editBean.edited }"/>;
  if(isModified ==true)
  alert("更新没有保存");
}

这个代码很有意思,其它的好说,<c:out value="${editBean.edited }"/>不好理解,这是JSTL,如果没有见过JSTL,google或者baidu一下看看吧。editBean是一个标准的JSF的bean,它在faces-config.xml文件中部署,它有一个属性和属性的getter,setter方法,如下:
private boolean edited=false;
                                                    
public boolean isEdited() {
return edited;
}
public void setEdited(boolean edited) {
this.edited = edited;
}


你在开始编辑的时候,设置edited为true就可以了。JSTL能够用过<c:out>标签访问到这个bean的值。这样,就实现了前台Javascript和后台JSF bean的联动。
AJAX和JSF如何结合。
这是将来SERVER JAVA的开发人员都会问的一个问题。那么如何能够让AJAX能够在服务器上和客户端连起来。
要应用AJAX的条件是:
1、 一个支持javascript的浏览器,当然,现在主流的浏览器都是支持Javascript的。
2、 浏览器必须支持XMLHTTP或者XMLHttpRequest对象。
3、 能够以XML发送响应的服务器端。服务器端可以有很多的技术来实现,不管你是用ASP,JAVA,都可以实现。当然,本文要讨论的局限于JSF技术。
对于熟悉大多数服务器端程序编写的工程师,比如我,Javascript完全是另外一个世界。但是了解Javascript,将使你的程序更加强大,开发起来更加容易。一个很有意思的功能是如果用户在编辑地图的时候,编辑到中途,忘记保存了,这提醒我们可以做一个比较有意思的功能,自动保存。在google mail中,你是不是已经感觉到过这个自动保存的功能了呢?反正我当时看到的时候吓了一跳。以一个服务器端程序员的思路去思考,会觉得不可思议。事实上这个功能就可以用Ajax技术来实现,用一个定时器,每隔5分钟自动发送一个保存的请求就可以实现这样的功能。
再看一个自动查找的例子,比如一个输入一个用户后自动出来和该用户有关的信息,可以通过这样的方法来实现:
<input type="text" id="query" size="20" onkeyup="search(‘query’);">

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

这是再简单不过的实例化XMLHttpRequest的一段代码,实例化一个之后,你就可以像操作一个普通的对象一样操作它,它有很多的方法,比如下面的方法是建立和服务器端的链接:
req.open("GET", url, true);

第一个参数是HTTP请求的方式:”Get”或者”Post”,第二个参数是服务器的URL,第三个参数是是否进行非同步的请求。大家如果已经仔细研究了我们ESRI的工具标签,你会发现这些标签里面有一个clientPostBack属性可以设置是否进行异步请求。我们可以知道,Web ADF在后面肯定用了open方法的第三个参数来进行。要小心的是,如果你要设置clientPostBack为true,你的javascript代码可能需要重新构建一下。不然这些代码可能不会被执行。因为异步请求更新的是部分页面。
异步请求的意思是在请求时浏览器可以做其它的事情,那么如何得知服务器端的处理已经结束,可以更新页面上的数据了呢?我们来看看XMLHttpRequest对象的方法
req.onreadystatechange = processXMLResponse;


当服务器端的处理结束时,就可以调用processXMLResponse方法,我们就可以通过对这个方法进行编程来处理请求,当然可以是任何的名字的方法,只要将方法注册到onreadystatechange方法即可。
XMLHttpRequest初始化完成后就可以发送到请求到服务器端了,用一个很简单的方法即可:
req.send(null);

当然,一般get用的实在太少,我们最关心的是Post,看看Post应该怎么做:
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可以发送一些数据到服务器端,这正是我们所需要的。我们来继续看看一个请求当前比例尺的代码:
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是怎么回事了,下一次我会写一个简单的例子。

你可能感兴趣的:(JavaScript,java,Ajax,bean,JSF)