利用jQuery处理xml返回数据
<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN"><html><head><title>ajaxxml.html</title><meta http-equiv="keywords" content="keyword1,keyword2,keyword3"><meta http-equiv="description" content="this is my page"><meta http-equiv="content-type" content="text/html; charset=UTF-8"><script type="text/javascript" src="js/jquery-1.3.2.min.js"></script><script type="text/javascript" src="js/verifyjqueryxml.js"></script></head><body><h3>用户名输入校验的例子</h3><!-- ajax方式下不需要使用表单进行数据提交，因此不用写表单标签 --><!-- ajax方式不需要name属性，需要一个id属性 --><input name="username" type="text" id="username"><br><input type="button" value="检验" ><!-- 这个div用于存放服务器端返回的信息，开始为空 --><!-- id属性定义是为了利用dom的方式找到某一个节点进行操作 --><div id="result"></div></body></html> package com.zchen.ajax.servlet;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;//返回XML数据public class AJAXXMLServlet extends HttpServlet {private static final long serialVersionUID = 3611240119854641367L;public void doGet(HttpServletRequest request, HttpServletResponse response)throws ServletException, IOException {this.doPost(request, response);}public void doPost(HttpServletRequest request, HttpServletResponse response)throws ServletException, IOException {try {//修改点1：响应的Content-Type必须是text/xmlresponse.setContentType("text/xml;charset=utf-8");PrintWriter out = response.getWriter();String old = request.getParameter("name");//修改点2：返回数据需要拼装成xml格式StringBuilder builder = new StringBuilder();builder.append("<message>");if (old == null || old.length() == 0) {out.println("用户名不能为空");} else {String name = new String(old.getBytes("ISO-8859-1"), "UTF-8");if (name.equals("chenzhen")) {builder.append("用户名[" + name + "]已经存在。").append("</message>");} else {builder.append("用户名[" + name + "]尚未存在。").append("</message>");}out.println(builder.toString());}} catch (Exception e) {e.printStackTrace();}}} 导入jquery库//用户名校验的方法//这个方法是用jquery来进行AJAX的异步数据交互function verify(){//根据属性值查找节点得到的是jquery的对象var jqueryObj = $("#username");//根据查找到底节点获取文本框的值var username = jqueryObj.val();//将文本框的数据发送给服务器的service//javascript当中一个简单的对象的定义方法$.ajax({type: "POST",//http请求方式url: "servlet/AJAXXMLServlet",//服务器端url地址data: "name="+username,//发送给服务器端的数据dataType: "xml",//告诉jquery返回的数据格式success: callback//定义交互完成并且服务器正确返回数值时调用的回调函数});}//回调函数function callback(data){//接受服务器返回的数据//需要将dom的对象转成jquery的对象//首先需要将dom的对象转换成jQuery的对象var jqueryObj = $(data);//获取message节点var message = jqueryObj.children()//获取文本的内容var text = message.text();//将服务器返回的数据动态的现实在页面上//找到保存结果信息的节点var resultObj = $("#result");//动态的改变页面中div节点中的内容resultObj.html(text);}
页:
[1]