本文旨在展示如何使用xml进行请求和相应的数据传输，因此并没有使用复杂的xml解析语法，如何解析和构建XML不是本文的重点；此外，程序没有对包含对中文内容的处理，关于中文乱码的问题，我将在接下来的文章中说明。
程序很简单：
填写表单-->客户端构建xml数据，发送请求到服务端-->服务端获取请求数据，解析并构建xml数据，发送响应-->客户端获取响应数据，解析并显示数据
代码如下：
xmldemo.jsp
<%@ page language="java" contentType="text/html; charset=UTF-8"
pageEncoding="UTF-8"%>
<!DOCTYPE html PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN" "http://www.w3.org/TR/html4/loose.dtd">
<html>
<head>
<meta http-equiv="Content-Type" content="text/html; charset=UTF-8">
<title>Ajax with XML</title>
<script type="text/javascript" src="js/xmldemo.js"></script>
</head>
<body>
<table align="center">
<tr>
<td>Name</td>
<td><input type="text" name="name" id="name"/></td>
</tr>
<tr>
<td>City</td>
<td><input type="text" name="city" id="city"/></td>
</tr>
<tr>
<td colspan="2"><input type="button" value="Submit" onclick="callServer()"/></td>
</tr>
</table>
</body>
</html>
因为使用Ajax异步通信，所以无需form
xmldemo.js
// XMLHttpRequest对象定义
var xmlHttp = false;
function createXmlHttpRequest() {
try{
xmlHttp = new ActiveXObject("Msxml2.XMLHTTP");
} catch(e) {
try{
xmlHttp = new ActiveXObject("Microsoft.XMLHTTP");
} catch(e2) {
xmlHttp = false;
}
}
if(!xmlHttp && typeof XMLHttpRequest != "undefined") {
xmlHttp = new XMLHttpRequest();
}
}
function callServer() {
// 获取表单数据
var name = document.getElementById("name").value;
var city = document.getElementById("city").value;
// 构建xml格式数据
var xmlString = "<profile>" +
"<name>" + name + "</name>" +
"<city>" + city + "</city>" +
"</profile>";
// 获取XMLHttpRequest对像
createXmlHttpRequest();
// xmlDemo对应服务端servlet
xmlHttp.open("POST", "xmlDemo", true);
// 指示请求内容为xml格式
xmlHttp.setRequestHeader("Content-type", "text/xml");
// 指定回调函数
xmlHttp.onreadystatechange = updatePage;
// 设定发送的内容
xmlHttp.send(xmlString);
}
// 回调函数定义
function updatePage() {
if(xmlHttp.readyState == 4) {
if(xmlHttp.status == 200) {
// 获取响应数据
xmlDoc = xmlHttp.responseXML;
var nameElement = xmlDoc.getElementsByTagName("name").item(0);
var name = nameElement.firstChild.nodeValue;
var cityElement = xmlDoc.getElementsByTagName("city").item(0);
var city = cityElement.firstChild.nodeValue;
alert("Name ： " + name + "\n" + "City : " + city);
} else {
alert("Error : status code is " + xmlHttp.status);
}
}
}
XmlDemoServlet.java
package com.ajaxdemo.servlet;
import java.io.IOException;
import java.io.PrintWriter;
import javax.servlet.ServletException;
import javax.servlet.annotation.WebServlet;
import javax.servlet.http.HttpServlet;
import javax.servlet.http.HttpServletRequest;
import javax.servlet.http.HttpServletResponse;
import javax.xml.parsers.DocumentBuilder;
import javax.xml.parsers.DocumentBuilderFactory;
import javax.xml.parsers.ParserConfigurationException;
import org.w3c.dom.Document;
import org.w3c.dom.Node;
import org.xml.sax.SAXException;
import com.sun.org.apache.xerces.internal.jaxp.DocumentBuilderFactoryImpl;
/**
* Servlet implementation class XmlDemoServlet
*/
@WebServlet("/xmlDemo")
public class XmlDemoServlet extends HttpServlet {
private static final long serialVersionUID = 1L;
/**
* @see HttpServlet#HttpServlet()
*/
public XmlDemoServlet() {
super();
}
/**
* @see HttpServlet#doPost(HttpServletRequest request, HttpServletResponse response)
*/
protected void doPost(HttpServletRequest request, HttpServletResponse response) throws ServletException, IOException {
processRequest(request, response);
}
private void processRequest(HttpServletRequest req, HttpServletResponse res) throws IOException {
// Document对象
Document doc = null;
DocumentBuilderFactory dbf = new DocumentBuilderFactoryImpl();
try {
DocumentBuilder db = dbf.newDocumentBuilder();
doc = db.parse(req.getInputStream());
} catch (ParserConfigurationException e) {
e.printStackTrace();
} catch (SAXException e) {
e.printStackTrace();
} catch (IOException e) {
e.printStackTrace();
}
// 获取请求参数
Node nameElement = doc.getElementsByTagName("name").item(0);
String name = nameElement.getFirstChild().getNodeValue();
Node cityElement = doc.getElementsByTagName("city").item(0);
String city = cityElement.getFirstChild().getNodeValue();
// System.out.println("# " + name + " " + city + "#");
// 构建响应xml格式数据
String xmlData = "<profile>" +
"<name>" + name + "</name>" +
"<city>" + city + "</city>" +
"</profile>";
// 设置响应格式
res.setContentType("text/xml");
PrintWriter out = res.getWriter();
out.println(xmlData);
out.close();
}
}
这里没有给出xml文件，因为使用了注解方式注册servlet，如下
@WebServlet("/xmlDemo")
很简单的一个程序，当然还不完善，但对于理解如何使用xml格式在请求和响应中传输数据应该足够了。
分享到：
相关推荐
在上述示例中，前端通过Ajax向`/ajaxchina`发送GET请求，后端Java控制器接收到请求并返回数据，前端接收到响应后更新页面内容。 需要注意的是，跨域问题在Ajax请求中很常见。如果前后端不在同一域名下，需要在后端...
在这个"ajax发送xml请求小示例"中，我们将探讨如何使用AJAX来发送XML请求，并解析返回的数据。 一、AJAX基础 1. **创建XMLHttpRequest对象**：在JavaScript中，我们首先需要创建一个XMLHttpRequest对象，它是AJAX...
在本示例中，"blogmvc"可能是一个小型博客应用，展示了如何在Spring MVC中创建RESTful API。Controller类通常会包含处理HTTP请求的方法，比如处理GET、POST、PUT、DELETE等请求。例如，有一个`PostController`，它...
在"JqueryWebServiceTestDemo"这个示例中，可能包含了完整的前端HTML、CSS和JavaScript文件，以及可能的服务端接口文档或示例代码，用于演示如何在实际项目中运用jQuery进行跨域Ajax请求。通过学习和运行这个示例，...
在Ajax中使用XML作为数据传输格式，可以方便地在客户端和服务器之间传递复杂的数据结构。 1. **DWR框架的介绍** DWR通过在服务器端创建Java对象（称为"Endpoints"）来暴露方法供客户端JavaScript调用。这些方法的...
总结，Ajax技术极大地提升了Web应用的交互性和响应速度，通过"ajax_xml运用.doc"文档和"AjaxDemo"项目，我们可以学习到如何结合JavaScript和XML，实现在不刷新页面的情况下，动态地获取和显示数据。这对于我们理解和...
- XML文件：可能包含服务器端生成的示例数据，用于测试Ajax请求和响应处理。 - Server-side脚本（如PHP、Python、Java等）：处理Ajax请求，生成XML响应。 通过分析这些文件，你可以深入学习如何在实际项目中使用...
例如，在一个简单的示例中，我们可以使用一个回调函数来检查就绪状态是否为4，然后进一步检查HTTP状态码是否为200（表示成功），进而处理服务器返回的数据。以下是一个基本的示例： ```javascript function ...
下面我们将详细讨论Ajax的基本使用和XML的解析方式。 1. Ajax基本使用： - 创建XMLHttpRequest对象：在JavaScript中，首先需要创建一个XMLHttpRequest对象，这是Ajax的核心。 - 配置请求：设置HTTP请求的类型...
本示例将深入探讨如何在Spring MVC项目中整合Ajax请求，以提供更流畅的用户体验。 首先，让我们理解Ajax的核心概念。Ajax（Asynchronous JavaScript and XML）允许网页在不刷新整个页面的情况下与服务器交换数据并...
在现代Web开发中，前后端交互是不可或缺的一部分，而AJAX（Asynchronous JavaScript and XML）技术使得这种交互变得更加高效和无缝。本篇文章将探讨如何使用HTML、JavaScript（jQuery库）和Ajax来实现前后端的数据...
在这个示例中，服务器返回的可能是JSON格式的省份、城市和城镇数据。 3. **DOM操作**：Ajax的一个重要应用就是对文档对象模型（DOM）进行操作，更新或改变页面上的元素。在本案例中，JavaScript需要获取用户选择的...
在这个实例中，我们将使用jQuery的$.ajax方法来发起一个异步请求。$.ajax方法接受一个配置对象，该对象包含了许多可选参数，如URL、请求类型（GET或POST）、数据类型（如JSON、HTML等）以及回调函数等。下面是一个...
在本项目中，“Ajax使用示例”提供了一个完整的Ajax应用实例，帮助开发者更好地理解和运用Ajax。 1. **Ajax的基本原理**：Ajax的核心是XMLHttpRequest对象，它允许JavaScript在不刷新整个页面的情况下与服务器进行...
在这个示例中，`$.ajax()`是jQuery提供的核心Ajax函数。我们设置了`url`参数为服务器端处理请求的脚本，通常是一个PHP、Python、Node.js或其他后端语言编写的接口。`type`参数设置请求类型为POST，因为可能涉及到...
XMLAjax可能是关于如何处理XML响应，以及如何在JavaScript中解析和操作XML文档的示例。 Ajax的应用广泛，不仅限于上述示例，还包括实时聊天、动态加载内容、地图应用等。掌握Ajax技术对于提升Web应用程序的性能和...
在JavaScript中，通常使用XMLHttpRequest对象来创建Ajax请求。以下是一个简单的Ajax请求示例： ```javascript var xhr = new XMLHttpRequest(); xhr.open('GET', 'data.json', true); // GET请求，替换为'data.json...
在示例中，可能包含这两种新方法的使用案例，特别是fetch API，它返回一个Promise对象，简化了错误处理和链式调用。 8. **JSONP和WebSockets**：在某些情况下，如绕过同源策略获取数据，可能会使用JSONP（JSON with...
1. 设置请求头编码：在发送Ajax请求时，可以设置`contentType`为`'application/x-www-form-urlencoded; charset=UTF-8'`，确保数据以UTF-8编码发送。 ```javascript $.ajax({ url: 'your-url', type: 'GET', ...