基础：用js结合struts实现不刷新页面查询数据

flash59

浏览: 97696 次
性别:
来自: 北京

最近访客更多访客>>

u012363178

wangyy

bigguo

luokery

博主相关

博客

微博

相册

留言

关于我

文章分类

社区版块

存档分类

博客分类：

项目学习

Struts Ajax IE JSP 框架

我遇到一个需求，可能大伙也遇见过这样的需求，那就是在页面上提供省和市的列表供用户选择输入，当选择某个省时，市的列表立即改变成这个省里的城市，很简单吧，刚开始时想调用list的onChange方法直接到后面取数据，然后刷新整个页面，改变城市列表的内容，考虑到网络后台处理时要执行很多无关的逻辑处理，所以想到只刷新城市列表那一个控件，那就请出名躁一时的ajax吧！

实现这个功能并不复杂，结合struts一会工夫就搞定了：下面是我的做法

首先描述一下AJAX在Struts框架中的位置和作用：

STRUTS框架实现了MVC模式，大家都知道这个模式，也知道STRUTS数据流的过程，简单讲，VIEW.jsp发送请求到CONTROL ：action.do，action.do来选择业务处理模块，在业务处理模块中更新MODEL：model.java ，并请求action.do选择VIEW.jsp，发送回客户VIEW，而AJAX在VIEW端发送xmlhttprequest给action.do,然后像普通处理一样更新MODEL，不同的是，要由MODEL来生成带有返回数据的XML给客户端VIEW，可以看到，这个过程省略了选择VIEW.jsp的过程，所以，客户端没有刷新页面，但数据已经传到VIEW了。

我的应用中稍微改变了一下做法，处理完请求后，再交给ACTION来选择VIEW.jsp，不过这个jsp文件和页面的相同，这样在客户端就收到一个和现有页面只有一小部分不同的HTML代码，那部分不同的代码就是要在页面上更新的数据，只要在得到数据后将那部分数据分离出来显示在页面上，就可以实现无刷新页面的更新效果了。。。

jsp代码：

<script type="text/javascript">
function getCity()
   {
       //alert("begin1");
       retrieveURL('/xxxx/netinfo.do?method=getCity','NetinfoForm');//document.forms[0].submit();
   }
</script>
<script type="text/javascript" src="/xxxx/scripts/Ajax.js"></script>
<tr bgcolor="#F7FDFD">
<td class="right">省份： td>
<td>
<html:select property="province" size="1" onchange="javascript:getCity();" >
<logic:iterate id="prov" name="NetinfoForm" property="province_list">
<%String nid= ((Province)prov).getId().toString();%>
<html:option value=""><bean:write name="prov" property="name"/>html:option>
logic:iterate>
html:select>
td>
<td class="right">城市： td>
<td>
<span name="change" id="change">
<html:select property="city" size="1" >
<logic:iterate id="cit" name="NetinfoForm" property="city_list">
<%String nid= ((City)cit).getId().toString();%>
<html:option value=""><bean:write name="cit" property="name"/>html:option>
logic:iterate>
html:select>
td>
tr>

action.do代码

public ActionForward getCity(ActionMapping mapping, ActionForm form, HttpServletRequest request, HttpServletResponse response) {
int provinceId=Integer.parseInt(request.getParameter("province"));
ArrayList<city></city> city_list=(ArrayList<city></city>)cityManager.getCityByProvince(provinceId);
object.setCity_list(city_list);
initForm(form, request, object);
mapping.findForward(SUCCESS);
//转向原页面，请保证jsp页面上的其他无关元素都能得到初始化，否则，struts 在生成html代码的时候会报错，而在客户端却没有任何反应，所以在这个方法中把所有元素都准备好。

关键部分：ajax.js代码：

js 代码

//global variables
var req;
var which;
/**
* Get the contents of the URL via an Ajax call
* url - to get content from (e.g. /struts-ajax/sampleajax.do?ask=COMMAND_NAME_1)
* nodeToOverWrite - when callback is made
* nameOfFormToPost - which form values will be posted up to the server as part
* of the request (can be null)
*/
function retrieveURL(url,nameOfFormToPost) {
document.getElementById("change").innerHTML = "loading...";
//alert("retrieveURL");
//get the (form based) params to push up as part of the get request
poststr=getFormAsString(nameOfFormToPost);
//poststr=encodeURIComponent(poststr);
//poststr=encodeURI(poststr);
//alert("url="+url+poststr);
//Do the Ajax call
if (window.XMLHttpRequest) { // Non-IE browsers
req = new XMLHttpRequest();
//req.setRequestHeader( "Content-Type", "text/html;charset=UTF-8" );
req.setRequestHeader("Content-type", "application/x-www-form-urlencoded");
req.onreadystatechange = processStateChange;
try {
req.open("POST", url, true); //was get
} catch (e) {
//alert("Problem Communicating with Server\n"+e);
}
req.send(null);
} else if (window.ActiveXObject) { // IE
//alert("IE");
req = new ActiveXObject("Microsoft.XMLHTTP");
if (req) {
req.onreadystatechange = processStateChange;
req.open("POST", url+poststr, true);
req.send();
}
}
}
/**
* gets the contents of the form as a URL encoded String
* suitable for appending to a url
* @param formName to encode
* @return string with encoded form values , beings with &
*/
function getFormAsString(formName){
//alert("getFormAsString");
//Setup the return String
returnString ="";
//Get the form values
formElements=document.forms[formName].elements;
//loop through the array , building up the url
//in the form /strutsaction.do&name=value
for ( var i=formElements.length-1; i>=0; --i ){
//we escape (encode) each value
////只取省的名字
//if(formElements[i].name=="province")
//{
//alert("formElements[i].value="+formElements[i].value);
returnString=returnString+"&"+formElements[i].name+"="+formElements[i].value;
//}
//if(formElements[i].name=="sourcepage")
//{
// alert("formElements[i].value="+formElements[i].value);
//returnString=returnString+"&"+formElements[i].name+"="+formElements[i].value;
//}
//returnString=returnString+"&"+escape(formElements[i].name)+"="+escape(formElements[i].value);
}
//alert("returnString="+returnString);
//return the values
return returnString;
}
/*
* Set as the callback method for when XmlHttpRequest State Changes
* used by retrieveUrl
*/
function processStateChange() {
//alert("processStateChange");
if (req.readyState == 4) { // Complete
if (req.status == 200) { // OK response
//alert("Ajax response:"+req.responseText);
//Split the text response into Span elements
spanElements = splitTextIntoSpan(req.responseText);
//Use these span elements to update the page
replaceExistingWithNewHtml(spanElements);
} else {
//alert("Problem with server response:\n " + req.statusText);
}
}
}
/**
* Splits the text into elements
* @param the text to be parsed
* @return array of elements - this array can contain nulls )
*/
function splitTextIntoSpan(textToSplit){
//Split the document
returnElements=textToSplit.split(""
//Process each of the elements
for ( var i=returnElements.length-1; i>=0; --i ){
//Remove everything before the 1st span
spanPos = returnElements[i].indexOf(");
//if we find a match , take out everything before the span
if(spanPos>0){
subString=returnElements[i].substring(spanPos);
returnElements[i]=subString;
}
}
//alert(returnElements[0]);
return returnElements;
}
/*
* Replace html elements in the existing (ie viewable document)
* with new elements (from the ajax requested document)
* WHERE they have the same name AND are elements
* @param newTextElements (output of splitTextIntoSpan)
* in the format texttoupdate
*/
function replaceExistingWithNewHtml(newTextElements){
//alert("newTextElements="+newTextElements);
//loop through newTextElements
for ( var i=newTextElements.length-1; i>=0; --i ){
//check that this begins with
if(newTextElements[i].indexOf(")>-1){
//get the name - between the 1st and 2nd quote mark
startNamePos=newTextElements[i].indexOf('"')+1;
endNamePos=newTextElements[i].indexOf('"',startNamePos);
name=newTextElements[i].substring(startNamePos,endNamePos);
if(name=="change")
{
//alert("#"+name+"#");
//get the content - everything after the first > mark
startContentPos=newTextElements[i].indexOf('>')+1;
content=newTextElements[i].substring(startContentPos);
//alert(content);
//Now update the existing Document with this element
//check that this element exists in the document
//document.all.link1.href
if(document.getElementById(name)){
//if(document.all.name){
//alert("Replacing Element:"+name);
document.getElementById(name).innerHTML = content;
} else {
document.getElementById("change").innerHTML = "error,retry!";
//alert("Element:"+name+"not found in existing document");
}
}
}
}
}

分享到：

利用JAVA 反射机制实现对象的域类型的转换 ... | hibernate 数据保存操作的原理

2007-08-15 15:12
浏览 4321
评论(3)
论坛回复 / 浏览 (3 / 8069)
查看更多

3 楼 flash59 2007-08-20

毕竟这个项目不是以AJAX为主的东东啊，整个项目只有这个功能使用了，不过，有机会一定好好学习一下相关的框架，请问有比较流行和实用的框架推荐一下吗？

2 楼 mark.li.guyu 2007-08-17

目前AJAX技术虽然不能说成熟，但是已经有很多框架可以借鉴了，无论是RIA类型的还是RPC类型的

1 楼泡泡 2007-08-17

楼主还生活在2001年？

发表评论

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

最近访客更多访客>>

博主相关

文章分类

社区版块

存档分类

最新评论