1. 程式人生 > >Ajax傳送XML資料及解析

Ajax傳送XML資料及解析

Ajax-XML技術:

將前臺資料封裝成XML資料,可以實現傳送更復雜的資料。

流程:前臺將資料拿到以後,封裝成XML資料,向後臺傳送,後臺接收到資料以後,用dom4j技術解析。

    後臺也可向前臺傳送XML資料,也是利用dom樹來解析

前臺:

ajaxXml.jsp

<%@ page language="java" contentType="text/html; charset=UTF-8"
    pageEncoding="UTF-8"%>
<%@ taglib uri="http://java.sun.com/jsp/jstl/core" prefix="c" %>
<!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>登入頁面</title>
	<script type="text/javascript">
		function send1(){
			var name=document.getElementById("nm").value;
			//1.
			var xhr=null;
			if(window.XMLHttpRequest){
				xhr=new XMLHttpRequest();
			}else{
				xhr=new ActiveXObject("Microft.XMLHttp");
			}
			
			//2.
			var url="<c:url value='/XmlServlet?name="+name+"' />";
			xhr.open("GET",url,true);
			
			
			//3.
			xhr.onreadystatechange=function(){
				if(xhr.readyState==4){
					if(xhr.status==200){
						var text=xhr.responseText;
						alert(text);
					}else{
						alert("伺服器響應出錯資訊,錯誤程式碼為:"+xhr.status);
					}
				}
			};
			
			//4.
			xhr.send(null);
		}
		
		function send2(){
			var xhr=null;
			if(window.XMLHttpRequest){
				xhr=new XMLHttpRequest();
			}else{
				xhr=new ActiveXObject("Microft.XMLHttp");
			}
			
			var url="<c:url value='/XmlServlet' />";
			
			xhr.open("post",url,true);
			
			xhr.onreadystatechange=function(){
				if(xhr.readyState==4){
					if(xhr.status==200){//接收後臺傳送的資料
						var xmlDomObj = xhr.responseXML;//★★★這種方式接收到的是一個 XmlDomObject
						//alert(xmlDomObj); //object
						//從XmlDom物件中解析出資料
						var users = xmlDomObj.getElementsByTagName("user");//array
						for(var i=0; i<users.length; i++){
							var id = users[i].getAttribute("id");
							var name=users[i].childNodes[0].firstChild.data;
							var age =users[i].childNodes[1].firstChild.data;
							alert(id+", "+name+", "+age);
						}
						
						
				  }
				}
			}
			
			
			//向後臺傳送xml格式的字串
			var name=document.getElementById("nm").value;
			var age =document.getElementById("ag").value;
			var xml="<user><name>"+name+"</name><age>"+age+"</age></user>";
			
			xhr.setRequestHeader("Content-Type","application/x-www-form-urlencoded");
			
			xhr.send(xml);
		}
	</script>
</head>
<body>
	Name:<input type="text" id="nm" name="name" /><br/>
	Age:<input type="text" id="ag" name="age" /> <br/>
	<!-- send1()和XmlServlet的doGet()不是我們今天的新知識,只是複習,便於我們過渡到新知識點 -->
	<input type="button" onclick="send1();" value="get傳送ajax"><br/><br/>
	
	<input type="button" onclick="send2();" value="ajax以 post傳送xml資料"><br/><br/>
</body>
</html>

後臺:

XmlServlet.java
package cn.hncu.servlet;

import java.io.BufferedReader;
import java.io.IOException;
import java.io.InputStream;
import java.io.InputStreamReader;
import java.io.StringReader;
import java.util.ArrayList;
import java.util.List;

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 org.dom4j.Document;
import org.dom4j.DocumentException;
import org.dom4j.Element;
import org.dom4j.io.SAXReader;

import cn.hncu.domain.User;
@WebServlet("/XmlServlet")
public class XmlServlet extends HttpServlet {
	private static final long serialVersionUID = 1L;

	protected void doGet(HttpServletRequest request, HttpServletResponse response) throws ServletException, IOException {
		System.out.println("GET方式請求了一次.......");
		String name=request.getParameter("name");
		String age=request.getParameter("age");
		System.out.println("name= "+name);
		
		response.setContentType("text/html;charset=utf-8");
		response.getWriter().println("來自XmlServlet 的響應.....name= "+name);;
	}
	protected void doPost(HttpServletRequest request, HttpServletResponse response) throws ServletException, IOException {
		//接收前臺傳送符合xml的資料字串讀取出來
		request.setCharacterEncoding("utf-8");
		InputStream in=request.getInputStream();
		BufferedReader br=new BufferedReader(new InputStreamReader(in, "utf-8"));
		String line=null;
		String xml="";
		while((line=br.readLine())!=null){
			xml+=line;
		}
		System.out.println(xml);
		
		//下面用dom4j來解析出xml格式的文件
		SAXReader sax=new SAXReader();
		
		try {
			Document dom=sax.read(new StringReader(xml));
			Element root=dom.getRootElement();
			String name=root.elementText("name");
			String age=root.elementText("age");
			System.out.println("後臺解析xml文件的結果:name= "+name+",  age="+age);
		} catch (DocumentException e) {
			e.printStackTrace();
		}
		
		//以下演示後臺向前臺傳送xml格式的資料
		//按理應該呼叫service和dao到資料庫中查詢,這裡省略了.
		List<User> users=new ArrayList<User>();
		users.add(new User("U001","Tom",19));
		users.add(new User("U002","Mike",22));
		users.add(new User("U003","apple",25));
		users.add(new User("U004","彰武",29));
		String res="<users>";
		for(User u:users){
			res += "<user id=\""+u.getId()+"\"><name>"+u.getName()+"</name><age>"+u.getAge()+"</age></user>"; 
		}
		res+="</users>";
		
		//發給前端
		response.setContentType("text/xml;charset=utf-8");//☆☆☆
		response.getWriter().println(res);
		
	}

}


效果:可以看到後臺將XML資料解析出來,同時,前臺將後臺傳送的XML資料也解析了出來


相關推薦

Ajax傳送XML資料解析

Ajax-XML技術: 將前臺資料封裝成XML資料,可以實現傳送更復雜的資料。 流程:前臺將資料拿到以後,封裝成XML資料,向後臺傳送,後臺接收到資料以後,用dom4j技術解析。     後臺也可向前臺傳送XML資料,也是利用dom樹來解析 前臺: ajaxXml.jsp

Android核心技術-day02-09-生成xml檔案 解析

AndroidManifest.xml 方式一: package com.gaozewen.savexmlinfo; import android.Manifest; import android.os.Bundle; import android.os.Environment;

用postman模擬ajax傳送json資料的筆記

header是這個: 但是你後臺,你知道嗎,用request.getParameter("sysName");是接受不到的, 因為json串在requset的body中。如果不用@RequsetBody註解,那就要寫方法從流中讀取引數。 public static String getRequ

ajax 傳送json資料時為什麼需要設定contentType: "application/json”

1. ajax傳送json資料時設定contentType: "application/json”和不設定時到底有什麼區別? contentType: "application/json”,首先明確一點,這也是一種文字型別(和text/json一樣),表示json格式的字串,如果ajax中設定為該型別,則傳送

(轉)python 全棧開發,Day75(Django與Ajax,檔案上傳,ajax傳送json資料,基於Ajax的檔案上傳,SweetAlert外掛)

昨日內容回顧 基於物件的跨表查詢 正向查詢:關聯屬性在A表中,所以A物件找關聯B表資料,正向查詢 反向查詢:關聯屬性在A表中,所以B物件找A物件,反向查詢 一對多: 按欄位:xx book --

Ajax非同步載入資料Redis快取

    針對網頁分類條目的動態載入,圖為頁面的Head部分。   //categoryListServlet準備分類資料 ProductService service = new ProductService(); List<Category> ca

Ajax讀取XML資料

最早的Ajax推出的時候實際上只給出了兩類資料 文字資料:最初只是虛妄簡單的返回一些處理標記(後來功能得到了擴充) XML資料:是為了攜帶更多的資料返回, 假設有如下的XML資料 <?xml version="1.

Jquery Ajax 讀取XML 資料

<%@ Page Language="C#" AutoEventWireup="true" CodeFile="Default.aspx.cs" Inherits="JqueryAjax_Default" %> <!DOCTYPE html PUBLIC

串列埠接收一幀資料解析

3. 下位機中的資料接收和協議解析    下位機接收資料也有兩種方式,一、等待接收,處理器一直查詢串列埠狀態,來判斷是否接收到資料。二、中斷接收。兩種方法的優缺點在此前的一篇關於串列埠通訊的文章中詳細討論過。得出的結論是採用中斷接收的方法比較好。    資料包的解析過程可以設定到不同的位置。如果協議比較簡單,

操作xml資料——Dom解析(備忘)

一、概述: 用xml儲存資料,一般只適用於單機且資料量不大,安全級別低的情況。常用的xml解析技術,有DOM和SAX。 DOM技術 SAX技術 基於xml文件樹結構的解析; 適用於多次訪問的xml文件。 比較消耗資源。 基於事件的解析; 適用於大資料量的xm

前臺使用$.ajax()傳送json資料,伺服器響應後返回json資料例項(struts2+json+action)

最近在做ping++,用到了服務端接收前端的json並且響應後發回json格式資料到前端的功能。現在就把我寫的例子貼在這裡,供大家參考。 //首先,貼上前端的程式碼: <%

[C++]類xml資料格式解析

#include <stdio.h> #include <iostream.h> #include <fstream.h> #include <iomanip.h> #include <assert.h> #inc

ajax 請求後臺資料(使用FormData物件提交表單上傳圖片)

js <script type="text/javascript"> $(function(){ $('#submit').click

使用原生JS發送AJAX請求(XML,JSON解析

status quest chan ldoc text nbsp 字符 tco send mybutton.addEventListener(‘click‘, (e) => { let request = new XMLHttpRequest() r

JavaWeb筆記-23-ajax傳送請求的三則示例(傳送get、傳送post、響應xml、)

一、傳送get請求案例 <script type="text/javascript"> //建立XMLHttpRequest物件的函式 function createXMLHttpRequest() { try { return new

django_forms元件__作業之用ajax傳送資料驗證註冊

forms元件 -forms是什麼? 就是一個類,可以校驗欄位(前臺傳過來的欄位) -怎麼用: -校驗欄位功能: -先寫一個類,繼承Form from django.shortcuts

xml之SAX解析以及資料結構存入java物件

引用來自於:https://www.cnblogs.com/Qian123/p/5231303.html    https://blog.csdn.net/qq_36935755/article/details/77106322?utm_source=copy 

使用原生的NSXmlParser解析xml資料

xml檔案地址: http://d1xzuxjlafny7l.cloudfront.net/downloads/Party.xml 下面是本人使用原聲NSXmlParser對xml資料進行的解析。 這裡有篇有一篇很不錯的教程,使用GDataXml庫對xml資料進行的解析,而且還有對xml資料

ajax傳送請求成功,伺服器也響應成功,但是前臺就是接不到資料

      ajax傳送請求成功,伺服器也響應成功,但是前臺就是接不到資料,除錯了半天原來是在除錯介面過程print_r()其中一步,和最後返回的值一起發回前臺,導致最後返回的資料不是json格式,無法獲取資料;以下是程式碼: <?php requi

XListView解析資料PullToRefresh解析資料 多條目載入

package com.example.week3.Fragment; import android.os.AsyncTask; import android.os.Bundle; import android.support.annotation.NonNull; import and