jsp中运用Ajax处理过程及页面动态显示处理结果(out.print出html)

1 我们先来看下jsp上调用这个ajax的代码

 

<input type="text" name="merchantNo" id="merchantNo2" size="30"οnblur="validateMerchantNo2();" />
<font color="red">*</font>

<span id="merchantError2" style="float: bottom; margin-top: 1000px;">&nbsp;&nbsp;精确查询</span>

  可以看到鼠标事件onblur(鼠标离开时候触发)触发的是一个js方法validateMerchantNo2();可想而知这个就是ajax方法了。留意span id="merchantError2"这个，这个就是后面ajax处理后根据处理结果动态显示的结果信息。

 

2 现在看下这个ajax方法 validateMerchantNo2

 

<script type="text/javascript">
var xmlHttp;
function createXMLHttpRequest()
{
	if (window.ActiveXObject)
	{
		xmlHttp = new ActiveXObject("Microsoft.XMLHTTP");
	} else if (window.XMLHttpRequest)
	{
		xmlHttp = new XMLHttpRequest();
	}
}
function validateMerchantNo2()
{
	createXMLHttpRequest();
	xmlHttp.onreadystatechange = handleStateChange;
	var merchantNo = document.getElementById("merchantNo2").value;
	var merchantSelect = document.getElementById("merchantSelect").value;
	var url = "credit_validuateMerchantNo2.action?time=" + new Date().getTime()
			+ "&merchantNo=" + merchantNo + "&merchantNoFlag=" + merchantSelect;
	xmlHttp.open("post", url, true);
	xmlHttp.setRequestHeader("content-type",
			"application/x-www-form-urlencoded;charset=utf-8");
	xmlHttp.send(null);
}
function handleStateChange()
{
	if (xmlHttp.readyState == 4)
	{
		if (xmlHttp.status == 200)
		{
			var doc = xmlHttp.responseText;
			var menuNameError = document.getElementById("merchantError2");
			menuNameError.innerHTML = doc;
		}
	}
}

</script>

 

这是一个比较经典的写法，留意主体方法里多了 xmlHttp.setRequestHeader("content-type",
   "application/x-www-form-urlencoded;charset=utf-8");这个，这个就是用于把处理结果通过html字符串返回到jsp页面显示出来的页面申明。最终这个处理结果会在：

   var menuNameError = document.getElementById("merchantError2");
   menuNameError.innerHTML = doc;

这个id为merchantError2的地方显示出来。

 

3 我们看下相应的java处理方法

	public final String validuateMerchantNo2() throws Exception
	{

		ServletActionContext.getResponse().setContentType("text/html;charset=utf-8");
		PrintWriter out = ServletActionContext.getResponse().getWriter();
		StringBuffer validateMsg = null;
		if ("".equals(merchantNo))
		{
			validateMsg = new StringBuffer("<font color='red'>&nbsp;&nbsp;商户编号不能为空！</font>");
		} else
		{
			List<CreditSummonsInfo> creditTest = creditService.queryCreditByNo(merchantNo, merchantNoFlag);
			if (creditTest != null && creditTest.size() > 0)
			{
				validateMsg = new StringBuffer("<font color='green'>&nbsp;&nbsp;ok!</font>");
			} else
			{
				validateMsg = new StringBuffer("<font color='red'>&nbsp;&nbsp;该商户编号暂无数据！</font>");
			}
		}
		out.print(validateMsg.toString());
		return null;
	}

 

这里的List<CreditSummonsInfo> creditTest = creditService.queryCreditByNo(merchantNo, merchantNoFlag);还是通过spring注入的，处理数据库的功能代码

 

最后输出  out.print(validateMsg.toString());
   return null;

就完成了这个过程。