`
zhangyou1010
  • 浏览: 303981 次
  • 性别: Icon_minigender_1
  • 来自: 北京
社区版块
存档分类
最新评论

Ajax 把表单数据以xml文件格式传给服务端

XMLAjaxServletHTMLMicrosoft 
阅读更多
这应该是入门级别的，呵呵。

把页面上select控件上选中的值传给服务端得servlet。

postingXML.html.html的代码如下 
<!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>Insert title here</title>

	<script type="text/javascript">
		var xmlHttp ;
		function createXMLHttpRequest(){
			if(window.ActiveXObject){
				xmlHttp = new ActiveXObject("Microsoft.XMLHTTP");
			} else if(window.XMLHttpRequest){
				xmlHttp = new XMLHttpRequest();
			}
		}
		
		function sendXML(){
			createXMLHttpRequest();
			var url = "PostExamplePets?timeStamp="+ new Date().getTime();
			xmlHttp.open("Post",url,true);
			xmlHttp.onreadystatechange= handleStateChange;
			xmlHttp.setRequestHeader("Content-Type","application/x-www-form-urlencoded;");
			var xmlPets  = getClientPets();
			xmlHttp.send(xmlPets);
			
		}
		
		function getClientPets(){
			var xmlPets ="<pets>";
			
			var option = document.getElementById("petTypes");
			if (option) {
				for (var i = 0 ; i < option.length; i++) {
					if(option[i].selected) {
						xmlPets= xmlPets +"<type>" +option[i].value+"<\/type>";
					}
					
				}
			}
			
			xmlPets= xmlPets +"<\/pets>";
			
			return xmlPets;
			
		}
		
		
		function doRequestUsingGET(){
			createXMLHttpRequest();
			var queryString  = "GetAndPostExample?";
			queryString = queryString + createQueryString()+
			"&timestamp="+ new Date().getTime();
			xmlHttp.onreadystatechange = handleStateChange;
			xmlHttp.open("GET",queryString,true);
			xmlHttp.send(null);
		}
		
		function doRequestUsingPOST(){
			createXMLHttpRequest();
			var url = "GetAndPostExamplePets?timestampe=" + new Date().getTime();
			xmlHttp.open("POST",url,true);
			xmlHttp.onreadystatechange = handleStateChange;
			xmlHttp.setRequestHeader("Content-Type","application/x-www-form-urlencoded;");
			
			var queryString  = createQueryString();
			xmlHttp.send(queryString);
		}
		
		function handleStateChange(){
			if(xmlHttp.readyState == 4){
				if(xmlHttp.status == 200) {
					parseResults();
				}
			}
		}
		
		function parseResults(){
		
			var responseDiv = document.getElementById("serverResponse");
			if (responseDiv.hasChildNodes()){
				responseDiv.removeChild(responseDiv.childNodes[0]);
			}
			
			var responseText = document.createTextNode(xmlHttp.responseText);
			responseDiv.appendChild(responseText);
		}
	</script>
</head>
<body>
		
	<form action="#">
		<h1>please select the pets type in your home:</h1><br/>
		<select id="petTypes" size="6" multiple="true">
			<option value="dog">dog</option>
			<option value="bird">bird</option>
			<option value="pig">pig</option>
			<option value="duck">duck</option>
			<option value="rabbit">rabbit</option>
			<option value="wugui">乌龟</option>
		</select>
		<br/><br/>
			
		<input type="button" value="submit the pets" onclick="sendXML();"><br/><br/>
	</form>
	
	<h2>server response:</h2>
		<div id="serverResponse">
		</div>
</body>
</html>


处理客户端请求的java代码PostExamplePets.java 

package ajaxbook.chap3;

import java.io.BufferedReader;
import java.io.ByteArrayInputStream;
import java.io.IOException;

import javax.servlet.ServletException;
import javax.servlet.http.HttpServlet;
import javax.servlet.http.HttpServletRequest;
import javax.servlet.http.HttpServletResponse;
import javax.xml.parsers.DocumentBuilderFactory;
import javax.xml.parsers.ParserConfigurationException;

import org.w3c.dom.Document;
import org.w3c.dom.NodeList;
import org.xml.sax.SAXException;

public class PostExamplePets extends HttpServlet{
	

	@Override
	protected void doGet(HttpServletRequest req, HttpServletResponse res) throws ServletException, IOException {
		// TODO Auto-generated method stub
	}

	@Override
	protected void doPost(HttpServletRequest req, HttpServletResponse res) throws ServletException, IOException {
		String result = this.getRequestPets(req);
		Document xmlDoc = null;
		
		try {
			
			xmlDoc = DocumentBuilderFactory.newInstance().newDocumentBuilder().
				parse(new ByteArrayInputStream(result.getBytes()));
			
			
		} catch (SAXException e) {
			e.printStackTrace();
		} catch (ParserConfigurationException e) {
			e.printStackTrace();
		}
		
		NodeList selectedPetsType = xmlDoc.getElementsByTagName("type");
		StringBuilder sb = new StringBuilder("selected pet type are : ");
		
		for (int i = 0 ; i < selectedPetsType.getLength() ;i ++ ){
			sb.append(selectedPetsType.item(i).getFirstChild().getNodeValue()).append(" ");
		}
		
		res.setContentType("text/xml");
		res.getWriter().print(sb.toString());
	}
	
	private String getRequestPets(HttpServletRequest req) {
		
		StringBuilder sb = new StringBuilder();
		BufferedReader bufferedReader = null;
		try {
			bufferedReader = req.getReader();
			String line ;
			while((line=bufferedReader.readLine()) != null) {
				sb.append(line);
			}
		} 
		catch (IOException e) {
			e.printStackTrace();
		} finally{
			try {
				bufferedReader.close();
			} catch (IOException e) {
				e.printStackTrace();
			}
		}
		return sb.toString();
	}
	
}


同样，servlet需要在web.xml文件中配置。
分享到：
| Ajax post和get两种提交方式
评论
发表评论

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

相关推荐

    Ajax 和 XML 用于表单的 Ajax

    - **数据交换格式**：在早期的Ajax应用中，XML常被用作数据交换格式，因为它具有良好的结构和严格的语法规则，适合传输和解析结构化的数据。 - **JSON的崛起**：随着Web开发的发展，JSON（JavaScript Object ...

    文件上传到服务端web小项目

    Servlet接收到请求，解析请求体中的文件内容，通常使用多部分表单数据（Multipart Form Data）格式。然后，Servlet将文件保存到服务器磁盘，并返回响应，告知前端上传结果。 5. **文件下载**：文件下载的处理相对...

    jQuery-ajax示例含客户端和服务端源码（可运行

    客户端的jQuery代码可能包含AJAX请求的触发事件，如按钮点击，以及`$.ajax()`调用，设置URL、请求类型和数据格式。 **6. 服务端源码解析** 服务器端源码通常会处理来自客户端的请求，读取请求参数，执行相应操作，...

    文件上传 (服务端+客户端)

    当客户端发送带有文件的数据时，Servlet会接收到一个Part类型的请求体，每个Part代表一个文件或者表单字段。我们可以使用Servlet 3.0及以上版本提供的API来读取Part，例如`Part.getSubmittedFileName()`获取文件名，...

    AJAX 想Struts2后台传送Json数据并向前台返回Json格式的数据

    在Web开发中，AJAX（Asynchronous JavaScript and XML）是一种技术，它允许页面在不刷新整个页面的情况下与服务器交换数据并更新部分网页内容。而Struts2是一个强大的MVC（Model-View-Controller）框架，它广泛应用...

    ajax和JSP实现文件上传

    在Web开发中，文件上传是一项常见的功能，Ajax和JSP的结合使用可以提供无刷新的用户体验，使得用户在上传文件时无需等待整个页面刷新。本文将深入探讨如何利用Ajax和JSP来实现这一功能。 首先，我们需要理解Ajax的...

    unigui_ajax读取本地文件信息

    在这个例子中，服务端通过`ReadAsMultipartAsync`方法接收多部分表单数据，然后读取文件内容并进行后续操作。 总的来说，"unigui_ajax读取本地文件信息"涉及的关键知识点包括：Unigui框架的使用、Ajax技术、...

    AJAX+JSP实现基于WEB的文件上传的进度控制

    AJAX（Asynchronous JavaScript and XML）技术的引入，配合JSP（JavaServer Pages），可以实现在不刷新整个页面的情况下进行异步文件上传，并且能够动态更新上传进度，极大地提升了用户交互体验。下面我们将详细探讨...

    springmvc+ajax带有文本域进行文件上传

    本示例将探讨如何结合Spring MVC和Ajax技术实现一个支持文本域和文件域的表单上传功能，同时利用ajaxfileupload.js插件来优化用户体验。让我们深入研究这个过程。 首先，`SpringMVC_Upload`这个压缩包很可能包含了...

    Ajax表单验证框架

    Ajax表单验证则可以同时在客户端和服务端进行，增强安全性。客户端验证快速响应，服务端验证确保数据安全。 三、Ajax表单验证框架 1. jQuery Validation Plugin：这是一个广泛使用的jQuery插件，提供丰富的验证规则...

    jquery Ajax表单输入检测验证一例

    Ajax全称为Asynchronous JavaScript and XML，允许我们在不刷新整个页面的情况下与服务器进行异步通信。在jQuery中，我们可以使用`.ajax()`方法实现这一功能。例如： ```javascript $.ajax({ type: 'POST', url: ...

    Ajax提交到Asp.net服务端的简单实例

    Ajax（异步JavaScript和XML）是一种在无需刷新整个网页的情况下，能够更新部分网页的技术。它通过在后台与服务器进行少量数据交换，使网页实现异步更新。这种方式可以让网页更加互动，提升用户体验，因为用户不再...

    ajax服务端代码node.js

    `.vscode` 文件夹是 Visual Studio Code 的配置文件，包含项目特定的设置，如调试配置、格式化规则等。对于本项目而言，可能包含了启动配置，使得可以直接在 VSCode 中运行 `node服务.js`。 **六、`node_modules` ...

    php+ajax实现图片文件上传功能实例

    在文件上传场景中，可以使用Ajax结合JavaScript库（如jQuery）来发送请求，监控上传进度，并在上传完成后通过回调函数处理服务器的响应。 #### Flash与PHP 虽然目前Flash技术已逐渐被HTML5替代，但在一些老的项目...

    ajax经典案例(适合初学者参考)

    利用Ajax，我们可以实时检查用户输入的数据，如邮箱格式、手机号码合法性等，而无需提交表单即可获取反馈。 3. **Google搜索提示**： - Google的搜索提示功能是Ajax应用的经典示例。用户在输入框输入关键字时，...

    Ajax实现无刷新添加和删除数据jQueryTest

    Ajax不是一种单一的技术，而是一种综合性的技术组合，它利用JavaScript进行异步数据交互，XML用于数据交换，后来发展到使用JSON等更轻量级的数据格式。Ajax允许在后台与服务器进行通信，用户可以在等待响应的同时...

    SpringMvc整合ajax，jQuery单文件/多文件上传

    在本文中，我们将深入探讨如何将Spring MVC框架与Ajax和jQuery技术相结合，以实现高效、交互式的单文件和多文件上传功能。这个过程涉及到前端与后端的交互，以及对文件上传请求的处理。 首先，我们需要理解Spring ...

    ajax安装程序+jar包

    - 虽然名称中有XML，但实际应用中，Ajax传输的数据格式更多地使用JSON，因为JSON更轻量级且易于解析。 通过上述内容，我们可以看到Ajax技术在Web开发中的重要性，以及它如何与Java和Windows平台的组件结合，提供...

    精通Ajax-基础概念、核心技术与典型案例 数据光盘

    这个技术是由JavaScript库和XML数据交换格式相结合而形成的，尽管它的名字中含有XML，但实际应用中，JSON（JavaScript Object Notation）更为常见，因为JSON与JavaScript更加兼容且易于处理。 ### 一、Ajax的基础...

    利用Ajax+Jquery实现异步进度条效果

    Ajax（Asynchronous JavaScript and XML）是一种在不重新加载整个网页的情况下，能够更新部分网页的技术。它通过在后台与服务器交换数据并局部更新页面，实现了页面的异步更新，从而提升了用户体验。在本例中，Ajax...

Magicbox
Global site tag (gtag.js) - Google Analytics