Ajax如何傳輸Json和xml數據

DIV+CSS佈局教程網 >> 網頁腳本 >> JavaScript入門知識 >> AJAX入門 >> AJAX基礎知識 >> Ajax如何傳輸Json和xml數據

Ajax如何傳輸Json和xml數據

編輯：AJAX基礎知識

ajax傳輸xml數據：只要把數據封裝成xml格式就可以實現傳輸，前台js用responseXML接收xml參數，後台讀取用流和dom4j來解析

前台頁面

<%@ page language="java" import="java.util.*" pageEncoding="UTF-8"%>
<%@taglib uri="http://java.sun.com/jsp/jstl/core" prefix="c"%>

<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN">
<html>
<head>
<title>Ajax XML數據處理演示</title>
<script type="text/javascript">
  //get方式ajax
  function send1(){
   alert("ok");
   var name=document.getElementsByName("name")[0].value;
   var age=document.getElementsByName("age")[0].value;
   var xhr=null;
   if(window.XMLHttpRequest){
    xhr=new XMLHttpRequest();
   }else{
    xhr=new ActiveXObject("Microsoft.XMLHttp");
   }

   var url="<c:url value='/XmlServlet?name='/>"+name+"&age="+age;
   //3設置訪問方式
   xhr.open("GET", url, true);
   //4設置訪問成功返回後的操作
   xhr.onreadystatechange=function(){
    if(xhr.readyState==4){//返回
     if(xhr.status==200){//響應代碼正常
      var txt=xhr.responseText;
      alert(txt);

     }
    }
   };
   xhr.send(null);
  }
 </script>

<!-- 前台以xml的格式向服務器發送數據 -->
<script type="text/javascript">
  //post方式ajax
  function send2(){
   alert("222");
   //1創建ajax對象
   var xhr = null;
   if(window.XMLHttpRequest){//高版本
    xhr = new XMLHttpRequest();
   }else{//低版本
    xhr = new ActiveXObject("Microsoft.XMLHttp");
   }

   //2請求地址
   var url = "<c:url value='/XmlServlet'/>";

   //3設置訪問方式
   xhr.open("POST", url, true);
   //4設置訪問成功返回後的操作
   xhr.onreadystatechange=function(){
    if(xhr.readyState==4){//返回
     if(xhr.status==200){//響應代碼正常
      var xmlObj=xhr.responseXML;
      var users=xmlObj.getElementsByTagName("user");
      for(var i=0;i<users.length;i++){
       var id=users[i].getAttribute("id");
       var name=users[i].childNodes[0].firstChild.data;//xml中的dom模型中的操作方法，和html中有點小差別
       var age=users[i].childNodes[1].firstChild.data;//不能用childNodes["age"]
       alert(id+","+name+","+age);
      }
     }
    }
   };
   var name=document.getElementsByName("name")[0].value;
   var age=document.getElementsByName("age")[0].value;
   var xml="<user><name>"+name+"</name><age>"+age+"</age></user>";
   xhr.send(xml);
  }
 </script>

</head>
<body>
 Name:
 <input type="text" name="name">
 <br /> Age:
 <input type="text" name="age">
 <br />
 <input type="button" value="Get提交" onclick="send1();" />
 <br />
 <input type="button" value="Post提交" onclick="send2()" />
 <br />
</body>
</html>

後台頁面

<%@ page language="java" import="java.util.*" pageEncoding="UTF-8"%>
<%@taglib uri="http://java.sun.com/jsp/jstl/core" prefix="c"%>

<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN">
<html>
<head>
<title>Ajax XML數據處理演示</title>
<script type="text/javascript">
  //get方式ajax
  function send1(){
   alert("ok");
   var name=document.getElementsByName("name")[0].value;
   var age=document.getElementsByName("age")[0].value;
   var xhr=null;
   if(window.XMLHttpRequest){
    xhr=new XMLHttpRequest();
   }else{
    xhr=new ActiveXObject("Microsoft.XMLHttp");
   }

   var url="<c:url value='/XmlServlet?name='/>"+name+"&age="+age;
   //3設置訪問方式
   xhr.open("GET", url, true);
   //4設置訪問成功返回後的操作
   xhr.onreadystatechange=function(){
    if(xhr.readyState==4){//返回
     if(xhr.status==200){//響應代碼正常
      var txt=xhr.responseText;
      alert(txt);

     }
    }
   };
   xhr.send(null);
  }
 </script>

<!-- 前台以xml的格式向服務器發送數據 -->
<script type="text/javascript">
  //post方式ajax
  function send2(){
   alert("222");
   //1創建ajax對象
   var xhr = null;
   if(window.XMLHttpRequest){//高版本
    xhr = new XMLHttpRequest();
   }else{//低版本
    xhr = new ActiveXObject("Microsoft.XMLHttp");
   }

   //2請求地址
   var url = "<c:url value='/XmlServlet'/>";

   //3設置訪問方式
   xhr.open("POST", url, true);
   //4設置訪問成功返回後的操作
   xhr.onreadystatechange=function(){
    if(xhr.readyState==4){//返回
     if(xhr.status==200){//響應代碼正常
      var xmlObj=xhr.responseXML;
      var users=xmlObj.getElementsByTagName("user");
      for(var i=0;i<users.length;i++){
       var id=users[i].getAttribute("id");
       var name=users[i].childNodes[0].firstChild.data;//xml中的dom模型中的操作方法，和html中有點小差別
       var age=users[i].childNodes[1].firstChild.data;//不能用childNodes["age"]
       alert(id+","+name+","+age);
      }
     }
    }
   };
   var name=document.getElementsByName("name")[0].value;
   var age=document.getElementsByName("age")[0].value;
   var xml="<user><name>"+name+"</name><age>"+age+"</age></user>";
   xhr.send(xml);
  }
 </script>

</head>
<body>
 Name:
 <input type="text" name="name">
 <br /> Age:
 <input type="text" name="age">
 <br />
 <input type="button" value="Get提交" onclick="send1();" />
 <br />
 <input type="button" value="Post提交" onclick="send2()" />
 <br />
</body>
</html>

--------------------------------------------------------------------------------

Ajax傳輸Json數據的要點利用Apache或者阿裡巴巴的JSONArray類進行傳輸
前台代碼

<%@ page language="java" import="java.util.*" pageEncoding="UTF-8"%>
<%@taglib uri="http://java.sun.com/jsp/jstl/core" prefix="c"%>

<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN">
<html>
<head>
<title>Ajax Json數據處理演示</title>
<script type="text/javascript">
 function ask1() {
  //1創建ajax對象
  var xhr = null;
  if (window.XMLHttpRequest) {//高版本
   xhr = new XMLHttpRequest();
  } else {//低版本
   xhr = new ActiveXObject("Microsoft.XMLHttp");
  }

  //2請求地址
  var url = "<c:url value='/JsonServlet1'/>";

  //3設置訪問方式
  xhr.open("POST", url, true);

  //4設置訪問成功返回後的操作
  xhr.onreadystatechange = function() {
   if (xhr.readyState == 4) {//返回
    if (xhr.status == 200) {//響應代碼正常
     //※※※※※解析後台返回的json串
     //js中eval()方法的功能：是校驗參數文本串符合js中哪一種數據類型，並把其轉換成對應類型的對象
     var txt = xhr.responseText;
     var users = eval("(" + txt + ")"); //把符合json格式的文本串 轉換成 json對象
     for ( var i = 0; i < users.length; i++) {
      alert(users[i].id + "," + users[i].name + ","
        + users[i].age);
     }
    }
   }
  };
  //5 發送
  xhr.send(null);
 }

 function ask2() {
  //1創建ajax對象
  var xhr = null;
  if (window.XMLHttpRequest) {//高版本
   xhr = new XMLHttpRequest();
  } else {//低版本
   xhr = new ActiveXObject("Microsoft.XMLHttp");
  }

  //2請求地址
  var url = "<c:url value='/JsonServlet2'/>";

  //3設置訪問方式
  xhr.open("POST", url, true);

  //4設置訪問成功返回後的操作
  xhr.onreadystatechange = function() {
   if (xhr.readyState == 4) {//返回
    if (xhr.status == 200) {//響應代碼正常
     //※※※※※解析後台返回的json串
     //js中eval()方法的功能：是校驗參數文本串符合js中哪一種數據類型，並把其轉換成對應類型的對象
     var txt = xhr.responseText;
     //alert(txt);
     //把符合json格式的文本串 轉換成 json對象
     var users = eval("(" + txt + ")"); 
     for ( var key in users)//map的便利方式
      alert("屬性：" + key + ",值：" + users[key]);
     }
     //for ( var i = 0; i < users.length; i++) {//list的遍歷方式
      //alert(users[i].id +","+users[i].name+","+users[i].age);
     //}
   };
  };
  //5 發送
  xhr.send(null);
 }


 function ask3() {
  //1創建ajax對象
  var xhr = null;
  if (window.XMLHttpRequest) {//高版本
   xhr = new XMLHttpRequest();
  } else {//低版本
   xhr = new ActiveXObject("Microsoft.XMLHttp");
  }

  //2請求地址
  var url = "<c:url value='/JsonServlet2'/>";

  //3設置訪問方式
  xhr.open("POST", url, true);

  //4設置訪問成功返回後的操作
  xhr.onreadystatechange = function() {
   if (xhr.readyState == 4) {//返回
    if (xhr.status == 200) {//響應代碼正常
     //※※※※※解析後台返回的json串
     //js中eval()方法的功能：是校驗參數文本串符合js中哪一種數據類型，並把其轉換成對應類型的對象
     var txt = xhr.responseText;
     //alert(txt);
     //把符合json格式的文本串 轉換成 json對象
     var users = eval("(" + txt + ")"); 
     for ( var key in users)//map的便利方式
      alert("屬性：" + key + ",值：" + users[key]);
     }
     //for ( var i = 0; i < users.length; i++) {//list的遍歷方式
      //alert(users[i].id +","+users[i].name+","+users[i].age);
     //}
   };
  };
  //5 發送
  xhr.send(null);
 }
</script>

</head>
<body>
 <input type="button" onclick="ask1();" value="ajax請求後台數據(手動封裝json方式)" />
 <br />
 <input type="button" onclick="ask2();"
  value="ajax請求後台數據(用apache工具封裝json方式)" />
 <input type="button" onclick="ask3()" value="ajax請求後台數據(用fastjson工具封裝json方式)" />
</body>
</html>

JsonServlet1.java

package cn.hncu.servlet;

import java.io.IOException;
import java.io.PrintWriter;
import java.util.ArrayList;
import java.util.List;

import javax.servlet.ServletException;
import javax.servlet.http.HttpServlet;
import javax.servlet.http.HttpServletRequest;
import javax.servlet.http.HttpServletResponse;

import cn.hncu.domain.User;

public class JsonServlet1 extends HttpServlet {

 public void doGet(HttpServletRequest request, HttpServletResponse response)
   throws ServletException, IOException {
  doPost(request, response);
 }


 public void doPost(HttpServletRequest request, HttpServletResponse response)
   throws ServletException, IOException {
  //調用後台service.dao.query()，到數據庫當中把信息讀取出來
  //為簡化知識點的理解，此處後台部分的功能直接模擬
  response.setContentType("text/html;charset=utf-8");
  PrintWriter out = response.getWriter();
  List<User> users = new ArrayList<User>();
  users.add(new User("A001","Jack",20));
  users.add(new User("A002","Rose",22));
  users.add(new User("B001","張三",20));
  users.add(new User("B002","李四",30));
  String json="";
  //用java封裝出json格式的字符串：[{name:"Jack",age:25}, {...}, {...} ]
  for(User u:users){
   if(json.equals("")){
    json="{name:\""+u.getName()+"\",id:\""+u.getId()+"\",age:"+u.getAge()+"}";
   }else{
    json = json +",{ name:\""+u.getName()+"\",id:\""+u.getId()+"\",age:"+u.getAge()+"}" ;
   }
  }
  json="["+json+"]";
  out.print(json);
 }

}

JsonServlet2.java

package cn.hncu.servlet;

import java.io.IOException;
import java.io.PrintWriter;
import java.util.ArrayList;
import java.util.HashMap;
import java.util.List;
import java.util.Map;

import javax.servlet.ServletException;
import javax.servlet.http.HttpServlet;
import javax.servlet.http.HttpServletRequest;
import javax.servlet.http.HttpServletResponse;

import cn.hncu.domain.User;

import net.sf.json.JSONArray;
import net.sf.json.JSONObject;

public class JsonServlet2 extends HttpServlet {

 public void doPost(HttpServletRequest request, HttpServletResponse response)
   throws ServletException, IOException {

  response.setContentType("text/html;charset=utf-8");
  PrintWriter out = response.getWriter();
  List<User> users = new ArrayList<User>();
  users.add(new User("A001","Jack",20));
  users.add(new User("A002","Rose",22));
  users.add(new User("B001","張三",20));
  users.add(new User("B002","李四",30));
  String strJson=com.alibaba.fastjson.JSONArray.toJSONString(users);
  System.out.println(strJson);
  //用fastjson工具(只有一個jar包)幫我們把list轉換成json串
  Map<String, Object> map = new HashMap<String, Object>();
  map.put("addr", "湖南");
  map.put("height", "170");
  map.put("marry", "no");
  map.put("user", new User("A003","小李",25));
  String strMap=com.alibaba.fastjson.JSONArray.toJSONString(map);

  out.print(strMap.toString());
 }

}

JsonServlet3.java

package cn.hncu.servlet;

import java.io.IOException;
import java.io.PrintWriter;
import java.util.ArrayList;
import java.util.HashMap;
import java.util.List;
import java.util.Map;

import javax.servlet.ServletException;
import javax.servlet.http.HttpServlet;
import javax.servlet.http.HttpServletRequest;
import javax.servlet.http.HttpServletResponse;

import net.sf.json.JSONArray;
import net.sf.json.JSONObject;
import cn.hncu.domain.User;

public class JsonServlet3 extends HttpServlet {

 public void doPost(HttpServletRequest request, HttpServletResponse response)
   throws ServletException, IOException {

  response.setContentType("text/html;charset=utf-8");
  PrintWriter out = response.getWriter();
  List<User> users = new ArrayList<User>();
  users.add(new User("A001","Jack",20));
  users.add(new User("A002","Rose",22));
  users.add(new User("B001","張三",20));
  users.add(new User("B002","李四",30));
  //用fastjson工具(只有一個jar包)幫我們把list轉換成json串
  JSONArray json=JSONArray.fromObject(users);
  String strJson=json.toString();
  System.out.println(strJson);

  Map<String, Object> map = new HashMap<String, Object>();
  map.put("addr", "湖南");
  map.put("height", "170");
  map.put("marry", "no");
  map.put("user", new User("A003","小李",25));
  JSONObject obj = JSONObject.fromObject(map);
  System.out.println(obj.toString());

  out.print(obj.toString());
 }

}

以上就是本文的全部內容，希望對大家的學習有所幫助，也希望大家多多支持。

上一頁:Ajax 上傳圖片並預覽的簡單實現
下一頁:基於Ajax表單提交及後台處理簡單的應用

AJAX基礎知識

ajax動態為a標簽href賦值不執行跳轉的原因分析及解決: 由於一中考評系統要加入一個新的功能“調查問卷”，我想沿用別人做好的調查問卷，用別人的有一個好處就是：
jquery訪問servlet並返回數據到頁面的方法: 本文實例講述了jquery訪問servlet並返回數據到頁面的方法。分享給大家供大家參考。具體實現方
ajax視頻課件在線觀看地址: ajax視頻課件：http://www.elearning.gov.cn/inde ... Scri

AJAX基礎知識 AJAX詳解

小編推薦

有史以來最簡單的AJAX回調庫非常實用的ajax用戶注冊模塊 AJax 學習筆記一(XMLHTTPRequest對象) 用AJAX技術實現在自己Blog上聚合並顯示朋友Blog的最新文章如何成為AJAX高手 ajax+php中文亂碼解決辦法 Ajax實現靜態刷新頁面過程帶加載旋轉圖片 Ajax工作原理深入理解 AJAX：開發者新的技術天地介紹 163 AJAX Tab

DIV CSS 佈局教程網

相關文章