<!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);
}
分享到：
相关推荐
XML数据处理与展示 服务端返回的XML数据，通过Ajax请求的`success`回调函数接收。在jQuery中，可以使用DOM操作方法或jQuery的XML解析方法来处理返回的XML数据。 - `$(data)`方法将返回的XML DOM对象转换为jQuery...
在上面的代码中，`dataType: "xml"`告诉jQuery我们期望返回的是XML数据。当请求成功时，`success`回调函数会被调用，其中`xml`参数就是返回的XML文档对象。 解析XML数据通常涉及遍历XML节点。jQuery提供了与DOM操作...
为了利用jQuery处理XML，我们需要理解如何通过Ajax技术与服务器进行异步通信。 **1. jQuery的`$.ajax()`方法** `$.ajax()`是jQuery的核心方法，用于执行异步HTTP（Ajax）请求。在处理XML时，我们可以设置`dataType...
对于学习者来说，这是一个很好的实践案例，可以帮助理解Web开发中的前后端交互、XML数据处理和无刷新技术。当然，如果要应用于实际生产环境，通常会将数据存储改为数据库，以提高数据管理的稳定性和效率。
1. jQuery处理XML格式返回数据的方法 - jQuery提供了多种方法来处理服务器返回的数据，其中$.ajax() 和 $.get() 是两种常用的用于异步请求的方法。 - 在此示例中，作者推荐使用$.ajax()方法，因为相较于$.get()...
其次，我们可以利用jQuery的便利性来解析XML。jQuery的`find`方法可以很容易地定位到XML文档中的特定节点。例如： ```javascript $(request.responseXML).find("marker").each(function() { var marker = $(this);...
jQuery提供了多种方法来解析XML数据，其中最常用的是通过`$.ajax()`或`$.get()`、`$.post()`等异步请求方法获取XML数据后，利用jQuery的DOM操作能力进行数据的解析与展示。具体步骤如下： 1. **发送HTTP请求**：...
2. **处理响应**：在 `success` 回调函数中，我们可以接收到服务器返回的数据，然后使用 jQuery 解析 XML 数据（如果返回的是 XML 格式）。例如，使用 `.find()`、`.text()` 和 `.attr()` 等方法遍历 XML 节点，构建...
开发者还可以利用jQuery的各种插件和扩展来进一步增强XML数据的处理能力。 总结，本文详细介绍了如何使用jQuery通过Ajax请求获取服务器端返回的XML数据，并解析这些数据以更新页面内容。同时，也提到了XML数据格式...
在解析XML时，可以利用jQuery的DOM操作方法；而对于JSON，jQuery会自动处理并将其转换为JavaScript对象，使得数据访问变得直接而简单。避免使用`eval()`进行JSON解析，以确保应用程序的安全性。
随着jQuery库的普及，利用jQuery来解析XML文件变得简单易行。本文将详细介绍如何使用jQuery来解析XML文件，并通过一个具体例子进行说明。 首先，我们需要了解XML文件的基本结构。XML（Extensible Markup Language，...
本项目的核心是利用WebService获取XML格式的数据，然后通过工具将其转换为JSON（JavaScript Object Notation）格式，以便与JQuery库配合，实现前端的自动补全功能。下面将详细解释这一过程中的关键知识点。 首先，`...
总结起来，这个示例展示了如何利用jQuery在客户端发起Ajax请求，Servlet在服务器端处理请求并返回XML响应，然后jQuery解析并处理这些响应。这个过程对于实现动态、无刷新的Web应用非常有用，尤其是在需要与服务器...
本示例中，“jquery ajax xml 实现select联动”指的是利用jQuery的Ajax功能从XML文件中获取数据，动态更新HTML中的元素，实现两个或多个下拉列表之间的联动效果。这种功能在多级分类选择、地区选择等场景中十分常见...
在jQuery中创建XML，我们可以利用`$.parseXML()`函数。这个函数接收一个字符串作为参数，返回一个解析后的XML文档对象。以下是一个简单的示例： ```javascript var xmlString = "<root><element>Value</element></...
`jsonp.php`可能是服务器端的PHP脚本，用于响应JSONP请求并返回数据。`css`和`images`目录可能包含了样式表和图像资源，用于美化和增强页面效果。 总结来说，jQuery为开发者提供了强大的工具来动态获取和处理数据，...
在网页开发中，jQuery是一个非常流行的JavaScript库，它极大地简化了DOM操作、事件处理和Ajax交互等...在本例中，我们学习了如何利用它们从后台获取数据，并动态生成下拉选择框，这对于数据驱动的交互式页面尤为实用。