`
Virgo_S
  • 浏览: 1137705 次
  • 性别: Icon_minigender_1
  • 来自: 北京
社区版块
存档分类
最新评论

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

BeanJavaJavaScriptJSFAjax 
阅读更多
  先以一个问题开始，如果我们的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是怎么回事了，下一次我会写一个简单的例子。
分享到：
| Oracle exp/imp导出导入工具的使用 整理中 ...
评论
发表评论

您还没有登录,请您登录后再发表评论

相关推荐

Magicbox
Global site tag (gtag.js) - Google Analytics