服務器端
代碼如下:
package com.ljq.test;
import javax.servlet.http.HttpServlet;
import javax.servlet.http.HttpServletRequest;
import javax.servlet.http.HttpServletResponse;
import javax.servlet.ServletException;
import java.io.IOException;
import java.io.PrintWriter;
/**
* 利用jQuery接受和處理xml數據
*
* @author jiqinlin
*
*/
@SuppressWarnings("serial")
public class AjaxXmlServer extends HttpServlet{
protected void doGet(HttpServletRequest request,
HttpServletResponse response) throws ServletException, IOException {
try{
//修改一----響應的Content-Type必須是text/xml
response.setContentType("text/xml;charset=utf-8");
PrintWriter out = response.getWriter();
//1.取參數
String old = request.getParameter("name").trim();
//修改二-----返回的數據需要拼裝成xml格式
StringBuilder builder = new StringBuilder();
builder.append("<message>");
//2.檢查參數是否有問題
if(old == null || "".equals(old)){
builder.append("用戶名不能為空").append("</message>");
} else{
//3.校驗操作
String name = old;
if(name.equals("linjiqin")){
builder.append("用戶名[" + name + "]已經存在，請使用其他用戶名").append("</message>");
} else{
builder.append("用戶名[" + name + "]尚未存在，可以使用該用戶名注冊").append("</message>");
}
out.println(builder.toString());
System.out.println(builder.toString());
}
} catch(Exception e){
e.printStackTrace();
}
}
protected void doPost(HttpServletRequest request,
HttpServletResponse response) throws ServletException, IOException {
doGet(request, response);
}
}
修改web.xml
代碼如下:
<servlet>
<servlet-name>AjaxXmlServer</servlet-name>
<servlet-class>com.ljq.test.AjaxXmlServer</servlet-class>
</servlet>
<servlet-mapping>
<servlet-name>AjaxXmlServer</servlet-name>
<url-pattern>/servlet/ajaxXmlServer</url-pattern>
</servlet-mapping>
請求頁面
代碼如下:
<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN"
"http://www.w3.org/TR/html4/loose.dtd">
<html>
<head>
<script type="text/javascript" src="http://localhost:8083/jqueryprj/js/jquery-1.3.1.js"></script>
<script type="text/javascript" src="http://localhost:8083/jqueryprj/js/verifyjqueryxml.js"></script>
</head>
<body>
<input type="text" id="userName" />
<input type="button" value="校驗" onclick="verify()"/>
<div id="result"></div>
<!--div和span的直觀差異，div中的內容獨占行，span中的內容和前後其他內容相處良好-->
</body>
</html>
js
代碼如下:
function verify(){
var userName = $("#userName").val();
$.ajax({
type: "POST", //http請求方式
url: "servlet/ajaxXmlServer", //服務器端url地址
data: "name=" + userName, //發送給服務器端的數據
dataType: "xml", //告訴JQuery返回的數據格式
success: callback //定義交互完成，並且服務器正確返回數據時調用的回調函數
});
}
//回調函數
function callback(data) {
var jqueryObj = $(data);
//獲取message節點
var message = jqueryObj.children();
//獲取文本內容
var text = message.text();
//4.將服務器段返回的數據動態的顯示在頁面上
$("#result").html(text);
}