利用jQuery处理xml返回数据

kingge08

浏览: 246078 次
性别:
来自: 北京

最近访客更多访客>>

jiviang

747017186

shareal

keguan_li

博主相关

博客

微博

相册

留言

关于我

文章分类

社区版块

存档分类

博客分类：

Ajax

XML jQuery Ajax Servlet JavaScript

<!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="检验" onclick="verify()">
		<!-- 这个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/xml
			response.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);
}

分享到：

解决缓存问题 | AJAX应用的步骤和注意事项

2010-12-13 14:49
浏览 1450
评论(0)
分类:Web前端
查看更多

发表评论

您还没有登录,请您登录后再发表评论

最近访客更多访客>>

博主相关

文章分类

社区版块

存档分类

最新评论

利用jQuery处理xml返回数据

评论

发表评论

相关推荐

最近访客 更多访客>>

博主相关

文章分类

社区版块

存档分类

最新评论

利用jQuery处理xml返回数据

评论

发表评论

相关推荐

解决中文乱码问题

解决缓存问题

AJAX应用的步骤和注意事项

利用XMLHttpRequest对象接受与处理XML数据

用XMLHTTPRequest对象来进行AJAX的异步数据交互实现用户名校验的方法

使用JQuery和JavaScript实现的一个用户名验证

最近访客更多访客>>