/* * AJAX通讯辅助类 * * <p> * 使用方法:<br/> * <script type="text/javascript" src="<%=request.getContextPath()%>/script/ajax.js"></script> <script type="text/javascript"> function getJSPInfo(id){ var ajax=new AjaxObject(); ajax.onComplete=function(responseText,responseXml){ document.getElementById("right").innerHTML=responseText; } ajax.send("ajax_jsp.do","id="+id,"POST",true); } </script> * </P> * * */ function AjaxObject() { this.XmlHttp = this.getHttpObject(); } AjaxObject.prototype.getHttpObject = function () { var xmlhttp = false; if (window.XMLHttpRequest) { xmlhttp = new XMLHttpRequest(); } else { if (window.ActiveXObject) { try { xmlhttp = new ActiveXObject("Msxml2.XMLHTTP"); } catch (e) { try { xmlhttp = new ActiveXObject("Microsoft.XMLHTTP"); } catch (e) { alter("create ajax object faild!"); } } } } return xmlhttp; }; /** 说明:AJAX通讯回调函数 参数说明: URL: 通讯URL地址 CONTENT: 通讯所用数据信息 METHOD: GETPOST TYPE: truefalse异步提交方式 */ AjaxObject.prototype.send = function (URL,CONTENT,METHOD,TYPE) { if (METHOD == "" || METHOD == null || METHOD.toUpperCase() != "POST") { METHOD = "GET"; } else { METHOD = "POST"; } if (TYPE == "" || TYPE == null || TYPE != true) { TYPE = false; } else { TYPE = true; } if (CONTENT == "") { CONTENT = null; } if (this.XmlHttp) { if (this.XmlHttp.readyState == 4 || this.XmlHttp.readyState == 0) { var oThis = this; this.XmlHttp.open(METHOD,URL,TYPE); this.XmlHttp.onreadystatechange = function () { oThis.readyStateChange(); }; if (METHOD.toUpperCase() == "POST") { this.XmlHttp.setRequestHeader("Content-Type","application/x-www-form-urlencoded"); } this.XmlHttp.send(CONTENT); } } }; AjaxObject.prototype.abortCallBack = function () { if (this.XmlHttp) { this.XmlHttp.abort(); } }; /* * 正在加载过程 */ AjaxObject.prototype.onLoading = function () { // Loading }; /* * 加载完成 */ AjaxObject.prototype.onLoaded = function () { // Loaded }; /* * 请求就绪 */ AjaxObject.prototype.onInteractive = function () { // Interactive }; /* * 请求完成 */ AjaxObject.prototype.onComplete = function (responseText,responseXml) { // Complete }; /* * 清求无效 */ AjaxObject.prototype.onAbort = function () { // Abort }; /* * 请求错误 */ AjaxObject.prototype.onError = function (status,statusText,responseText) { // Error }; AjaxObject.prototype.readyStateChange = function () { if (this.XmlHttp.readyState == 1) { this.onLoading(); return; } else { if (this.XmlHttp.readyState == 2) { this.onLoaded(); return; } else { if (this.XmlHttp.readyState == 3) { this.onInteractive(); return; } else { if (this.XmlHttp.readyState == 4) { if (this.XmlHttp.status == 0) { this.onAbort(); } else { if (this.XmlHttp.status == 200 && this.XmlHttp.statusText == "OK") { this.onComplete(this.XmlHttp.responseText,this.XmlHttp.responseXML); } else { this.onError(this.XmlHttp.status,this.XmlHttp.statusText,this.XmlHttp.responseText); } } } } } } };
具体使用例子:
function showPeriodinfo(){ //var iWidth = window.screen.availWidth-800; //var iHeight = window.screen.availHeight-500; var periodTypeNo = document.getElementById("ebegToEnd").value; var productCode = document.getElementById("productCode").value; //if(periodTypeNo!= null&&periodTypeNo!="00"){ // WinPop('${root}/product.do?method=showPeriodTypeInfo&productcode='+productCode+'&periodTypeNo='+periodTypeNo,'',iWidth,iHeight,'0','0'); //}else{ // alert("请选择一个待查看的XXX类型!"); //} var ajax=new AjaxObject(); ajax.onComplete=function(responseText,responseXml){ var typevalue =responseText; if(typevalue == null || typevalue ==""){ alert("xxx描述为空!"); document.getElementById("showDesc").style.display = ""; document.getElementById("periodDesc").innerHTML = ""; periodTypeNo.focus(); } else{ document.getElementById("showDesc").style.display = ""; document.getElementById("periodDesc").innerHTML = typevalue; } } if(periodTypeNo!= null&&periodTypeNo!="00"){ ajax.send("${root}/product.do","method=showPeriodTypeInfo&productcode="+productCode+"&periodTypeNo="+periodTypeNo,true); }else{ alert("请选择一个待查看的XXX类型!"); } }
<td>
<html:select property="ebegToEnd" value="${period}" onchange="showPeriodinfo();"> <logic:iterate id="tconstant" name="periodList" scope="request"> <html:option value="${tconstant.id.constantId}">${tconstant.constantValue1}</html:option> </logic:iterate> </html:select> </td>