ajax公共文件 ajax.js
/***************************************************
将当前列表<select>中选中的值<option>移动到目标列表
@param selfId 当前列表id<Select id="xxx">
@param targetId 目标列表的id
@author wangw
@version 1.0
2006-05-10
****************************************************/
function moveElement(selfId,targetId){
var self=document.getElementById(selfId);//根据id得到当前列表(select)对象
var selfOptions=self.childNodes;//得到当前列表的option对象
var target=document.getElementById(targetId);//根据id得到目标列表select对象
var selfOption=null;
for(var i=0;i<selfOptions.length;i++){
selfOption=selfOptions[i];//得到第i个option对象
if(selfOption.selected){//判断是否被选中
self.removeChild(self.childNodes[i--]);//将当前列表中的被选中元素移除,并把计数器减一,因为移除一个元素后其他元素的索引会发生变化
var option=document.createElement("option");//创建一个新的option对象
option.setAttribute("value",selfOption.value);//设置option对象的value属性
option.appendChild(document.createTextNode(selfOption.text));//设置option的显示信息
target.appendChild(option);//将option对象插入如目标列表
}
}
}
/***************************************************
显示进度条
@param 提示信息
***************************************************/
function showProcessBar(msg){
var str_div = '<div align="center" id="ProcessBar" style="position:absolute; visibility:hidden; left:400; top:300; width:150; height:100; z-index:1000;">';
str_div += '<table border="0" width="300" height="100" cellspacing="1" cellpadding="0" class="ReportTable">';
str_div += '<tr class="TableContent">';
str_div += '<td align="center">'+msg+'<br>';
str_div += '<img src="../images/process_bar2.gif" border="0">';
str_div += '</td>';
str_div += '</tr>';
str_div += '</table>';
str_div += '</div>';
document.write(str_div);
}
/***************************************************
Ajax应用
@author wangw
@version 1.0
2006-05-10
****************************************************/
var xmlHttp;
var handleResponse;
/**
根据不同浏览器创建xmlHttp对象
*/
function createXMLHttpRequest(){
if(window.ActiveXObject){//ie浏览器
xmlHttp=new ActiveXObject("Microsoft.XMLHTTP");
}else if(window.XMLHttpRequest){//其他浏览器
xmlHttp=new XMLHttpRequest();
}
}
/**
向指定的url发送请求
并指定处理服务器请求的方法
一般情况下,服务器返回一个xml
@param url 处理请求的服务器端程序(servlet、action。。。)
@param handle 处理服务器请求的方法名
*/
function sendRequest(url,handle,postStr){
handleResponse=handle;
createXMLHttpRequest();
xmlHttp.onreadystatechange=handleStateChance;
if(postStr==null||postStr==""){
xmlHttp.open("GET",url,"false");
xmlHttp.send(null);
}else{
xmlHttp.open("POST",url,"true");
xmlHttp.setRequestHeader('Content-Type', 'application/x-www-form-urlencoded');
xmlHttp.send(postStr);
}
}
function sendRequestByType(url,handle,postStr,isAynchronous){
handleResponse=handle;
createXMLHttpRequest();
xmlHttp.onreadystatechange=handleStateChance;
if(postStr==null||postStr==""){
xmlHttp.open("GET",url,isAynchronous);
xmlHttp.send(null);
}else{
xmlHttp.open("POST",url,isAynchronous);
xmlHttp.setRequestHeader('Content-Type', 'application/x-www-form-urlencoded');
xmlHttp.send(postStr);
}
}
function handleStateChance(){
if(xmlHttp.readyState==4){
if(xmlHttp.status==200){
handleResponse();
}
}
}
/*************************************************/
在页面中使用
<script language="javascript" src="hr/js/helper.js" type=""></script>
function change(){
var type = document.getElementById("accountDetailVO.type").value;
var url = "accountDetailAddAction.do?operate=checkType&type="+type;
sendRequest(url,updateList);//向服务器发送请求,并用处理服务器请求的函数指针作为参数
}
//
function updateList(){
var results = xmlHttp.responseXML.getElementsByTagName("select");
var metadatas = accountDetailForm("accountDetailVO.item"); //目标对象
while(metadatas.childNodes.length>0){
metadatas.removeChild(metadatas.childNodes[0]);
}
var option = null;
option = document.createElement("option");
option.setAttribute("value","");
option.appendChild(document.createTextNode("请选择"));
metadatas.appendChild(option);
for(var i=0;i<results.length;i++){
option = document.createElement("option");
option.setAttribute("value",results[i].firstChild.text);
option.appendChild(document.createTextNode(results[i].lastChild.text));
metadatas.appendChild(option);
}
}
在java类中互动
String type = request.getParameter("type");
try {
StringBuffer results = new StringBuffer("<metadata>");
AllowanceType allowanceType = typeLogic.getAllowanceTypeByType(type);
List typeList = typeLogic.getAllowTypeChildList(allowanceType.getCode());
for (Iterator iterator = typeList.iterator(); iterator.hasNext();) {
AllowanceType alloType = (AllowanceType)iterator.next();
results.append("<select>");
results.append("<key>");
results.append(alloType.getType());
results.append("</key>");
results.append("<value>");
results.append(alloType.getTypeName());
results.append("</value>");
results.append("</select>");
}
results.append("</metadata>");
response.setContentType("text/xml;charset=UTF-8");
request.setCharacterEncoding("GBK");
response.getWriter().write(results.toString());
} catch (Exception e) {
log.error(e);
}
return null;