AJAX04
使用jQuery返回实现ajax
package yosemite.test.xml;
import java.io.IOException;
import java.io.PrintWriter;
import javax.servlet.ServletException;
import javax.servlet.http.HttpServlet;
import javax.servlet.http.HttpServletRequest;
import javax.servlet.http.HttpServletResponse;
public class AJAXXMLServer extends HttpServlet {
/**
*
*/
private static final long serialVersionUID = -1775044733979556653L;
@Override
protected void doPost(HttpServletRequest req, HttpServletResponse resp) throws ServletException, IOException {
doGet(req, resp);
}
@Override
protected void doGet(HttpServletRequest req, HttpServletResponse resp) throws ServletException, IOException {
try {
// 修改点1----响应的Content-Type必须是text/xml
resp.setContentType("text/xml;charset=utf-8");
PrintWriter out = resp.getWriter();
// 1.取参数
String old = req.getParameter("name");
String name = new String(old.getBytes("iso8859-1"),"UTF-8");
// 修改点2-----返回的数据需要拼装成xml格式
StringBuilder builder = new StringBuilder();
builder.append("<message>");
// 2.检查参数是否有问题
if (old == null || old.length() == 0) {
builder.append("用户名不能为空").append("</message>");
} else {
// 3.校验操作
if (name.equals("wangxingkui")) {
// 4。和传统应用不同之处。这一步需要将用户感兴趣的数据返回给页面段，而不是将一个新的页面发送给用户
// 写法没有变化，本质发生了改变
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();
}
}
}
<!DOCTYPE html> <html> <head> <title>用户名校验ajax实例4</title> <meta name="keywords" content="keyword1,keyword2,keyword3"> <meta name="description" content="this is my page"> <meta name="content-type" content="text/html; charset=UTF-8"> <script src="//code.jquery.com/jquery-2.1.4.js"></script> <script src="js/verifyjqueryxml.js"></script> </head> <body> 用户名校验的ajax实例，请输入用户名： <br/> <input type="text" id="userName" /> <input type="button" value="校验" onclick="verify()"/> <div id="result"></div> </body> </html>
//定义用户名校验的方法
function verify() {
// 1.获取文本框中的内容
var userName = $("#userName").val();
// 2.将文本框中的数据发送给服务器段的servelt
// 使用jquery的XMLHTTPrequest对象get请求的封装
$.ajax({
type : "GET", // http请求方式
url : "AJAXXMLServer", // 服务器端url地址
data : "name=" + userName, // 发送给服务器端的数据
//dataType : "xml", // 定义返回的数据格式
success : callback
// 定义交互完成，并且服务器正确返回数据时调用的回调函数
});
}
// 回调函数
function callback(data) {
// 3.接收服务器端返回的数据
// 需要将data这个dom对象中的数据解析出来
// 首先需要将dom的对象转换成JQuery的对象
var jqueryObj = $(data);
// 获取message节点
var message = jqueryObj.children();
// 获取文本内容
var text = message.text();
// 4.将服务器段返回的数据动态的显示在页面上
// 找到保存结果信息的节点
var resultObj = $("#result");
// 动态的改变页面中div节点中的内容
resultObj.html(text);
}
function verify2() {
var userName = $("#userName").val();
$.ajax({
type : "GET", // http请求方式
url : "AJAXXMLServer", // 服务器段url地址
data : "name=" + userName, // 发送给服务器段的数据
dataType : "xml", // 告诉JQuery返回的数据格式
success : function callback(data) {
var jqueryObj = $(data);
var message = jqueryObj.children();
var text = message.text();
var resultObj = $("#result");
resultObj.html(text);
}
});
}
<?xml version="1.0" encoding="UTF-8"?> <web-app xmlns:xsi="http://www.w3.org/2001/XMLSchema-instance" xmlns="http://xmlns.jcp.org/xml/ns/javaee" xsi:schemaLocation="http://xmlns.jcp.org/xml/ns/javaee http://xmlns.jcp.org/xml/ns/javaee/web-app_3_1.xsd" id="WebApp_ID" version="3.1"> <display-name>yosemite</display-name> <welcome-file-list> <welcome-file>index.html</welcome-file> <welcome-file>index.htm</welcome-file> <welcome-file>index.jsp</welcome-file> <welcome-file>default.html</welcome-file> <welcome-file>default.htm</welcome-file> <welcome-file>default.jsp</welcome-file> </welcome-file-list> <servlet> <servlet-name>AJAXXMLServer</servlet-name> <servlet-class>yosemite.test.xml.AJAXXMLServer</servlet-class> </servlet> <servlet-mapping> <servlet-name>AJAXXMLServer</servlet-name> <url-pattern>/AJAXXMLServer</url-pattern> </servlet-mapping> </web-app>