Ajax 簡單調用

JS調用Ajax

Ajax又名異步刷新，個人理解爲就是局部刷新。進行一下校驗作用個人覺得算是半個原創（站在巨人的肩膀上嘛）

html核心代碼如下：

		<tr>
			<td>辦公名稱:</td>
			<td><s:textfield name="build.name" id="name" onfocus=""
					onblur="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都沒有問題，所以具體問題具體分析。