Ajax 简单调用

JS调用Ajax

Ajax又名异步刷新，个人理解为就是局部刷新。进行一下校验作用个人觉得算是半个原创（站在巨人的肩膀上嘛）

html核心代码如下：

		<tr>
			<td>办公名称:</td>
			<td><s:textfield name="build.name" id="name" οnfοcus=""
					οnblur="checkName()"></s:textfield><span style="color: red" id="spid">*</span>
			</td>
		</tr>

js代码

function checkName() {
	var dna = document.getElementById("name").value;
	var checkdnainfo = $("#spid");
	checkdnainfo.html("");
	if ("" == dna) {
		checkdnainfo.html("请添加名称");
		return false;
	} else
		verifydna();
}
// 加入时间戳
// 即当两次dna一样时，浏览器仍然会去调用后台
function convertURL(url) {
	var timstamp = (new Date()).valueOf();
	if (url.indexOf("?") >= 0) {
		url = url + "&t=" + timstamp;
	} else {
		url = url + "?t=" + timstamp;
	}
	return url;
}
function verifydna() {
	var name = document.getElementById("name").value;
	$.get(convertURL("Admin/Building/check.action?name=" + name), null,
			callback);// 这里才是真正调用后台，后台处理完毕后，调用callback函数
}
function callback(data) {
	var checkdnainfo = $("#spid");
	checkdnainfo.html("");
	if (data == "have") {
		checkdnainfo.html("此名称无法使用");
	} else {
		checkdnainfo.html("可以使用");
	}
}

最后java后台代码如下：

	public void serchBuildingName() throws MyException {
		try {
			Writer writer = ServletActionContext.getResponse().getWriter();
			int size = bs.findByName(name).size();
			if (size == 0) {
				writer.write("not_have");//与JS中对应即可
			} else {
				writer.write("have");
			}
			writer.flush();//强制输出，不要忘记关闭流
			writer.close();
		} catch (IOException e) {
			e.printStackTrace();
		}
	}

大功告成，上结果：

1.

2.

最后关于Ajax的JS调用，网上搜索了一下方法一大堆，个人觉得这样写比较简单，关于兼容性问题，个人用的FF+IE10都没有问题，所以具体问题具体分析。