English | 简体中文 | 繁體中文 | Русский язык | Français | Español | Português | Deutsch | 日本語 | 한국어 | Italiano | بالعربية

  1. Posizione attuale
  2. Pagina iniziale
  3. Note di esperienza
  4. Corpo del testo

Ajax如何传输Json和xml数据

Trasmissione dati xml tramite ajax:Basta avvolgere i dati in formato xml per poterli trasmettere, il frontend js riceve i parametri xml tramite responseXML, il backend li legge tramite stream e dom4j

Pagina frontend

<%@ 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>Dimostrazione di elaborazione dati XML con Ajax</title>
<script type="text/javascript">
  //Modalità 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 Impostare il metodo di accesso
   xhr.open("GET", url, true);
   //4 Impostare l'operazione da eseguire dopo che l'accesso è stato completato con successo
   xhr.onreadystatechange=function(){
    if(xhr.readyState==4){//Ritorno
     if(xhr.status==200){//Codice di risposta normale
      var txt=xhr.responseText;
      alert(txt);
     }
    }
   };
   xhr.send(null);
  }
 </script>
<!-- Invia dati in formato xml al server -->
<script type="text/javascript">
  //Modalità post ajax
  function send2(){
   alert("222");
   //1 Creare l'oggetto AJAX
   var xhr = null;
   if(window.XMLHttpRequest){//Versione alta
    xhr = new XMLHttpRequest();
   }else{//Versione bassa
    xhr = new ActiveXObject("Microsoft.XMLHttp");
   }
   //2 Indirizzo della richiesta
   var url = "<c:url value='/XmlServlet'/>";
   //3 Impostare il metodo di accesso
   xhr.open("POST", url, true);
   //4 Impostare l'operazione da eseguire dopo che l'accesso è stato completato con successo
   xhr.onreadystatechange=function(){
    if(xhr.readyState==4){//Ritorno
     if(xhr.status==200){//Codice di risposta normale
      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;//Operazione del modello DOM in xml, con alcune differenze rispetto a html
       var age=users[i].childNodes[1].firstChild.data;//Non può usarechildNodes["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>
 Nome:
 <input type="text" name="name">
 <br /> Età:
 <input type="text" name="age">
 <br />
 <input type="button" value="Invio Get" onclick="send1();" />
 <br />
 <input type="button" value="Invio Post" onclick="send2()" />
 <br />
</body>
</html>

Pagina di backend

<%@ 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>Dimostrazione di elaborazione dati XML con Ajax</title>
<script type="text/javascript">
  //Modalità 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 Impostare il metodo di accesso
   xhr.open("GET", url, true);
   //4 Impostare l'operazione da eseguire dopo che l'accesso è stato completato con successo
   xhr.onreadystatechange=function(){
    if(xhr.readyState==4){//Ritorno
     if(xhr.status==200){//Codice di risposta normale
      var txt=xhr.responseText;
      alert(txt);
     }
    }
   };
   xhr.send(null);
  }
 </script>
<!-- Invia dati in formato xml al server -->
<script type="text/javascript">
  //Modalità post ajax
  function send2(){
   alert("222");
   //1 Creare l'oggetto AJAX
   var xhr = null;
   if(window.XMLHttpRequest){//Versione alta
    xhr = new XMLHttpRequest();
   }else{//Versione bassa
    xhr = new ActiveXObject("Microsoft.XMLHttp");
   }
   //2 Indirizzo della richiesta
   var url = "<c:url value='/XmlServlet'/>";
   //3 Impostare il metodo di accesso
   xhr.open("POST", url, true);
   //4 Impostare l'operazione da eseguire dopo che l'accesso è stato completato con successo
   xhr.onreadystatechange=function(){
    if(xhr.readyState==4){//Ritorno
     if(xhr.status==200){//Codice di risposta normale
      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;//Operazione del modello DOM in xml, con alcune differenze rispetto a html
       var age=users[i].childNodes[1].firstChild.data;//Non può usarechildNodes["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>
 Nome:
 <input type="text" name="name">
 <br /> Età:
 <input type="text" name="age">
 <br />
 <input type="button" value="Invio Get" onclick="send1();" />
 <br />
 <input type="button" value="Invio Post" onclick="send2()" />
 <br />
</body>
</html>

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

Trasmissione dati JSON tramite Ajaxutilizza la classe JSONArray di Apache o di Alibaba per la trasmissione
Codice frontend

<%@ 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>Dimostrazione di elaborazione dati JSON Ajax</title>
<script type="text/javascript">
 function ask1() {
  //1 Creare l'oggetto AJAX
  var xhr = null;
  if (window.XMLHttpRequest) {//Versioni superiori
   xhr = new XMLHttpRequest();
  } else {//Versioni inferiori
   xhr = new ActiveXObject("Microsoft.XMLHttp");
  }
  //2 Indirizzo della richiesta
  var url = "<c:url value='/JsonServlet1'/>";
  //3 Impostare il metodo di accesso
  xhr.open("POST", url, true);
  //4 Impostare l'operazione da eseguire dopo che l'accesso è stato completato con successo
  xhr.onreadystatechange = function() {
   if (xhr.readyState == 4) {//Restituzione
    if (xhr.status == 200) {//Il codice di risposta è normale
     //※※※※※Analizzare la stringa JSON restituita dal server
     //La funzione eval() nel JavaScript: verifica quale tipo di dati corrisponde alla stringa di parametri e lo trasforma in un oggetto di tipo corrispondente
     var txt = xhr.responseText;
     var users = eval("(" + txt + ")"); //Convertire una stringa di testo che soddisfa lo standard JSON in un oggetto JSON
     for ( var i = 0; i < users.length; i++) {
      alert(users[i].id + "," + users[i].name + ","
        + users[i].age);
     }
    }
   }
  };
  //5 Invio
  xhr.send(null);
 }
 function ask2() {
  //1 Creare l'oggetto AJAX
  var xhr = null;
  if (window.XMLHttpRequest) {//Versioni superiori
   xhr = new XMLHttpRequest();
  } else {//Versioni inferiori
   xhr = new ActiveXObject("Microsoft.XMLHttp");
  }
  //2 Indirizzo della richiesta
  var url = "<c:url value='/JsonServlet2'/>";
  //3 Impostare il metodo di accesso
  xhr.open("POST", url, true);
  //4 Impostare l'operazione da eseguire dopo che l'accesso è stato completato con successo
  xhr.onreadystatechange = function() {
   if (xhr.readyState == 4) {//Restituzione
    if (xhr.status == 200) {//Il codice di risposta è normale
     //※※※※※Analizzare la stringa JSON restituita dal server
     //La funzione eval() nel JavaScript: verifica quale tipo di dati corrisponde alla stringa di parametri e lo trasforma in un oggetto di tipo corrispondente
     var txt = xhr.responseText;
     //alert(txt);
     //Convertire una stringa di testo che soddisfa lo standard JSON in un oggetto JSON
     var users = eval("(" + txt + ")"); 
     for ( var key in users)//modalità di scorrimento della mappa
      alert("Proprietà：" + key + ",Valore：" + users[key]);
     }
     //for ( var i = 0; i < users.length; i++) {//modalità di scorrimento della lista
      //alert(users[i].id +","+users[i].name+","+users[i].age);
     //}
   };
  };
  //5 Invio
  xhr.send(null);
 }
 function ask3() {
  //1 Creare l'oggetto AJAX
  var xhr = null;
  if (window.XMLHttpRequest) {//Versioni superiori
   xhr = new XMLHttpRequest();
  } else {//Versioni inferiori
   xhr = new ActiveXObject("Microsoft.XMLHttp");
  }
  //2 Indirizzo della richiesta
  var url = "<c:url value='/JsonServlet2'/>";
  //3 Impostare il metodo di accesso
  xhr.open("POST", url, true);
  //4 Impostare l'operazione da eseguire dopo che l'accesso è stato completato con successo
  xhr.onreadystatechange = function() {
   if (xhr.readyState == 4) {//Restituzione
    if (xhr.status == 200) {//Il codice di risposta è normale
     //※※※※※Analizzare la stringa JSON restituita dal server
     //La funzione eval() nel JavaScript: verifica quale tipo di dati corrisponde alla stringa di parametri e lo trasforma in un oggetto di tipo corrispondente
     var txt = xhr.responseText;
     //alert(txt);
     //Convertire una stringa di testo che soddisfa lo standard JSON in un oggetto JSON
     var users = eval("(" + txt + ")"); 
     for ( var key in users)//modalità di scorrimento della mappa
      alert("Proprietà：" + key + ",Valore：" + users[key]);
     }
     //for ( var i = 0; i < users.length; i++) {//modalità di scorrimento della lista
      //alert(users[i].id +","+users[i].name+","+users[i].age);
     //}
   };
  };
  //5 Invio
  xhr.send(null);
 }
</script>
</head>
<body>
 <input type="button" onclick="ask1();" value="richiesta dati backend in AJAX ( impacchettamento JSON manuale)" />
 <br />
 <input type="button" onclick="ask2();"
  value="richiesta dati backend in AJAX (utilizzando lo strumento apache per impacchettare JSON)" />
 <input type="button" onclick="ask3()" value="richiesta dati backend in AJAX (utilizzando lo strumento fastjson per impacchettare 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"," ZhangSan",20));
  users.add(new User("B002"," LiSi",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"," ZhangSan",20));
  users.add(new User("B002"," LiSi",30));
  String strJson=com.alibaba.fastjson.JSONArray.toJSONString(users);
  System.out.println(strJson);
  //Convertiamo la lista in una stringa JSON utilizzando lo strumento fastjson (un solo pacchetto jar)
  Map<String, Object> map = new HashMap<String, Object>();
  map.put("addr", "Hunan");
  map.put("height", "170");
  map.put("marry", "no");
  map.put("user", new User("A003"," XiaoLi",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"," ZhangSan",20));
  users.add(new User("B002"," LiSi",30));
  //Convertiamo la lista in una stringa JSON utilizzando lo strumento fastjson (un solo pacchetto jar)
  JSONArray json=JSONArray.fromObject(users);
  String strJson=json.toString();
  System.out.println(strJson);
  Map<String, Object> map = new HashMap<String, Object>();
  map.put("addr", "Hunan");
  map.put("height", "170");
  map.put("marry", "no");
  map.put("user", new User("A003"," XiaoLi",25));
  JSONObject obj = JSONObject.fromObject(map);
  System.out.println(obj.toString());
  out.print(obj.toString());
 }
}

Questo è tutto il contenuto dell'articolo, speriamo che sia utile per la vostra apprendimento e che sosteniate fortemente la guida urla.

Dichiarazione: il contenuto di questo articolo è stato tratto da Internet, il copyright è di proprietà del rispettivo autore, il contenuto è stato contribuito e caricato autonomamente dagli utenti di Internet, questo sito non detiene il diritto di proprietà, non è stato editato manualmente e non assume alcuna responsabilità legale connessa. Se trovi contenuti sospetti di violazione del copyright, è possibile inviare una e-mail a: notice#oldtoolbag.com (al momento dell'invio dell'e-mail, sostituisci # con @) per segnalare il problema e fornire prove pertinenti. Una volta verificata, questo sito rimuoverà immediatamente i contenuti sospetti di violazione del copyright.

教程基础
猜你喜欢