SSM整合之后，用ajax异步提交验证用户名。

SSM整合之后，用ajax异步提交验证用户名。

这个是jsp前台的代码，html代码就不写了，比较简单。后台的controller用的都是注解的形式

<script type="text/javascript">
var xmlHttp;
//创建XMLHttpRequest对象
function createXMLHttpRequest() {
if (window.ActiveXObject) {//是不是IE
xmlHttp = new ActiveXObject("Microsoft.XMLHTTP");
} else if (window.XMLHttpRequest) {
xmlHttp = new XMLHttpRequest();
}
}
function validate() {
//创建xmlHttpRequest对象
createXMLHttpRequest();
//使用DOM，取HTML标签的账户--根据id值是userNm的标签对象
var userNm = document.getElementById("username").value;
if (userNm == "") {
document.getElementById("td1").innerHTML = "用户名不能为空";
return;
}
var url = "checkName.action?ajax=ajax&userNm=" + escape(userNm);
//向服务器端的LoginServlet发送异步GET请求
xmlHttp.open("GET", url, true);//1
//当状态有变化的时候，调用callback方法
xmlHttp.onreadystatechange = callback;
xmlHttp.send(null);
}
function callback() {
//当客户端完全接收完服务器的响应后，并且状态为200，也就是正常
if (xmlHttp.readyState == 4) {
if (xmlHttp.status == 200) {
//使用responseXML属性，接收服务器端返回的的XML文件 ，使用DOM解析XML
backData = xmlHttp.responseText;
//var backData = xmlHttp.responseXML.getElementsByTagName("response")  [0].firstChild.firstChild.data; //后台传入XML时使用这个
setMessage(backData);
}
}
}
function setMessage(backDate) {
//使用DOM得到id值为userNmDiv的域，用来显示提示信息
var userNmDiv = document.getElementById("td1");
if (backDate == "true") {
userNmDiv.innerHTML = "有此用户";
} else {
userNmDiv.innerHTML = "无此用户";
}
</script>

这个是UserController，后台代码，传的是一个txt，也可以往前台传一个xml，不过写法不同，

往前台传txt
@RequestMapping("/checkName")
public void checkName(HttpServletRequest request,
HttpServletResponse response) {

String userNm = request.getParameter("userNm");
String ajax = request.getParameter("ajax");

if (ajax != null || ajax != "") {
try {
Boolean cn = us.checkUserName(userNm);
response.setContentType("text/html;charset=utf-8");
PrintWriter out;
out = response.getWriter();
out.print(cn);
out.flush();
out.close();
} catch (IOException e) {
e.printStackTrace();
}

传xml

@RequestMapping("/checkName")
public void checkName(HttpServletRequest request,
HttpServletResponse response) {
response.setContentType("application/xml;charset=utf-8");//定义输出文本的格式
String userNm = request.getParameter("userNm");
String ajax = request.getParameter("ajax");

if (ajax != null || ajax != "") {
try {
PrintWriter out = response.getWriter();
response.setHeader("Cache-Control","no-cache");
out.print("<?xml version='1.0' encoding='"+"utf-8"+"' ?>");
out.print("<response>");
out.print("<backData>"+ Boolean.toString(rv)+ "</backData>");
out.print("<backData2>你好</backData2>");
out.print("</response>");
out.flush();
out.close();

} catch (Exception e) {
e.printStackTrace();
}
}

下面是jQuery的写法

前台代码

function validate2() {

var userNm = $("#userNm2").val();
if (userNm == "")
return;

$.ajax({
url : "LoginServlet?ajax=ajax&userNm=" + escape(userNm),
async : true,
type: "GET",
datatype:"xml",//datatype:"json"
success : function(xml){
//json写法
//var obj = eval ("(" + xml + ")");
//setMessage(obj.response[0].backData);
$(xml).find("response").each(function(i)
{
setMessage($(this).children("backData").text());
});
//setMessage(xml.getElementsByTagName("response")[0].firstChild.firstChild.data);
}
});

后台

if (ajax != null || ajax != ""){
LoginService ls = new LoginServiceImp();
String userNm = request.getParameter("userNm");
boolean rv = ls.checkUserNm(userNm);
'{ "response" :[ '{ "backData" : "true" , "backData2"：你好 } ,{ "backData" : "false" , "backData2"：你好1 }']}'

<?xml version='1.0' encoding='"+"utf-8"+"' ?>
<response>
<backData>true</backData>
</response>
}

jQuery的后台可能有错误，没有运行