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

  1. emplacement actuel
  2. accueil
  3. notes d'expérience
  4. corpus

Ajax如何传输Json和xml数据

transmission de données xml via ajax :Il suffit de封装数据为 format xml pour pouvoir le transmettre, l'interface utilisateur utilise responseXML pour recevoir les paramètres xml, et le serveur lit avec le flux et le DOM4j pour analyser

page en avant-plan

<%@ 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">
  //ajax en mode GET
  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;
   //3définir le mode d'accès
   xhr.open("GET", url, true);
   //4définir l'opération après la réussite de l'accès
   xhr.onreadystatechange=function(){
    if(xhr.readyState==4{//retourne
     if(xhr.status==200){//Code de réponse normal
      var txt=xhr.responseText;
      alert(txt);
     }
    }
   };
   xhr.send(null);
  }
 </script>
!-- L'interface utilisateur envoie des données au serveur au format xml -->
<script type="text/javascript">
  //ajax en mode POST
  function send2(){
   alert("222");
   //1créer un objet ajax
   var xhr = null;
   if(window.XMLHttpRequest){//version haute
    xhr = new XMLHttpRequest();
   }else{//version basse
    xhr = new ActiveXObject("Microsoft.XMLHttp");
   }
   //2adresse de la requête
   var url = "<c:url value='/XmlServlet'/>";
   //3définir le mode d'accès
   xhr.open("POST", url, true);
   //4définir l'opération après la réussite de l'accès
   xhr.onreadystatechange=function(){
    if(xhr.readyState==4{//retourne
     if(xhr.status==200){//Code de réponse normal
      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;//les méthodes d'opération du modèle DOM dans xml sont légèrement différentes de celles dans html
       var age=users[i].childNodes[1].firstChild.data;//ne peut pas utiliser 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>
 Nom:
 <input type="text" name="name">
 <br /> Age:
 <input type="text" name="age">
 <br />
 <input type="button" value="Get soumettre" onclick="send1();" />
 <br />
 <input type="button" value="Post soumettre" onclick="send2()" />
 <br />
</body>
</html>

page en arrière-plan

<%@ 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">
  //ajax en mode GET
  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;
   //3définir le mode d'accès
   xhr.open("GET", url, true);
   //4définir l'opération après la réussite de l'accès
   xhr.onreadystatechange=function(){
    if(xhr.readyState==4{//retourne
     if(xhr.status==200){//Code de réponse normal
      var txt=xhr.responseText;
      alert(txt);
     }
    }
   };
   xhr.send(null);
  }
 </script>
!-- L'interface utilisateur envoie des données au serveur au format xml -->
<script type="text/javascript">
  //ajax en mode POST
  function send2(){
   alert("222");
   //1créer un objet ajax
   var xhr = null;
   if(window.XMLHttpRequest){//version haute
    xhr = new XMLHttpRequest();
   }else{//version basse
    xhr = new ActiveXObject("Microsoft.XMLHttp");
   }
   //2adresse de la requête
   var url = "<c:url value='/XmlServlet'/>";
   //3définir le mode d'accès
   xhr.open("POST", url, true);
   //4définir l'opération après la réussite de l'accès
   xhr.onreadystatechange=function(){
    if(xhr.readyState==4{//retourne
     if(xhr.status==200){//Code de réponse normal
      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;//les méthodes d'opération du modèle DOM dans xml sont légèrement différentes de celles dans html
       var age=users[i].childNodes[1].firstChild.data;//ne peut pas utiliser 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>
 Nom:
 <input type="text" name="name">
 <br /> Age:
 <input type="text" name="age">
 <br />
 <input type="button" value="Get soumettre" onclick="send1();" />
 <br />
 <input type="button" value="Post soumettre" onclick="send2()" />
 <br />
</body>
</html>

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

transmission Ajax Json donnéesles points saillants utilisent les classes JSONArray d'Apache ou d'Alibaba pour la transmission
code frontal

<%@ 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() {
  //1créer un objet ajax
  var xhr = null;
  if (window.XMLHttpRequest) {//version haute
   xhr = new XMLHttpRequest();
  } else {//version basse
   xhr = new ActiveXObject("Microsoft.XMLHttp");
  }
  //2adresse de la requête
  var url = "<c:url value='/JsonServlet1'/>";
  //3définir le mode d'accès
  xhr.open("POST", url, true);
  //4définir l'opération après la réussite de l'accès
  xhr.onreadystatechange = function() {
   if (xhr.readyState == 4) {//retourne
    if (xhr.status == 200) {}}//Code de réponse normal
     //※※※※※Analyser la chaîne JSON renvoyée par le backend
     //La fonction eval() en JavaScript : c'est de vérifier quel type de données de paramètres de texte correspond à JavaScript et de le convertir en objet correspondant
     var txt = xhr.responseText;
     var users = eval("(" + txt + ")"); //Convertir une chaîne de caractères au format JSON conforme en objet JSON
     for ( var i = 0; i < users.length; i++) {
      alert(users[i].id + "," + users[i].name + ","
        + users[i].age);
     }
    }
   }
  };
  //5 Envoyer
  xhr.send(null);
 }
 function ask2() {
  //1créer un objet ajax
  var xhr = null;
  if (window.XMLHttpRequest) {//version haute
   xhr = new XMLHttpRequest();
  } else {//version basse
   xhr = new ActiveXObject("Microsoft.XMLHttp");
  }
  //2adresse de la requête
  var url = "<c:url value='/JsonServlet2'/>";
  //3définir le mode d'accès
  xhr.open("POST", url, true);
  //4définir l'opération après la réussite de l'accès
  xhr.onreadystatechange = function() {
   if (xhr.readyState == 4) {//retourne
    if (xhr.status == 200) {}}//Code de réponse normal
     //※※※※※Analyser la chaîne JSON renvoyée par le backend
     //La fonction eval() en JavaScript : c'est de vérifier quel type de données de paramètres de texte correspond à JavaScript et de le convertir en objet correspondant
     var txt = xhr.responseText;
     //alert(txt);
     //Convertir une chaîne de caractères au format JSON conforme en objet JSON
     var users = eval("(" + txt + ")"); 
     for ( var key in users)//façon de parcourir une map
      alert("Propriété :" + key + ",valeur :" + users[key]);
     }
     //for ( var i = 0; i < users.length; i++) {//façon de parcourir la liste
      //alert(users[i].id +","+users[i].name+","+users[i].age);
     //}
   };
  };
  //5 Envoyer
  xhr.send(null);
 }
 function ask3() {
  //1créer un objet ajax
  var xhr = null;
  if (window.XMLHttpRequest) {//version haute
   xhr = new XMLHttpRequest();
  } else {//version basse
   xhr = new ActiveXObject("Microsoft.XMLHttp");
  }
  //2adresse de la requête
  var url = "<c:url value='/JsonServlet2'/>";
  //3définir le mode d'accès
  xhr.open("POST", url, true);
  //4définir l'opération après la réussite de l'accès
  xhr.onreadystatechange = function() {
   if (xhr.readyState == 4) {//retourne
    if (xhr.status == 200) {}}//Code de réponse normal
     //※※※※※Analyser la chaîne JSON renvoyée par le backend
     //La fonction eval() en JavaScript : c'est de vérifier quel type de données de paramètres de texte correspond à JavaScript et de le convertir en objet correspondant
     var txt = xhr.responseText;
     //alert(txt);
     //Convertir une chaîne de caractères au format JSON conforme en objet JSON
     var users = eval("(" + txt + ")"); 
     for ( var key in users)//façon de parcourir une map
      alert("Propriété :" + key + ",valeur :" + users[key]);
     }
     //for ( var i = 0; i < users.length; i++) {//façon de parcourir la liste
      //alert(users[i].id +","+users[i].name+","+users[i].age);
     //}
   };
  };
  //5 Envoyer
  xhr.send(null);
 }
</script>
</head>
<body>
 <input type="button" onclick="ask1();" value="Requête AJAX de données backend (encapsulation manuelle JSON)" />
 <br />
 <input type="button" onclick="ask2();"
  value="Requête AJAX de données backend (utilisation de l'outil apache pour encapsuler JSON)" />
 <input type="button" onclick="ask3()" value="Requête AJAX de données backend (utilisation de l'outil fastjson pour encapsuler 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 {
  //Appel du service.dao.query() en arrière-plan pour lire les informations dans la base de données
  //Pour simplifier la compréhension des points de connaissance, la partie backend de cette fonction est directement simulée
  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","Zhang San",20));
  users.add(new User("B002","Li Si",30));
  String json="";
  //Utiliser Java pour encapsuler une chaîne de caractères au format 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","Zhang San",20));
  users.add(new User("B002","Li Si",30));
  String strJson=com.alibaba.fastjson.JSONArray.toJSONString(users);
  System.out.println(strJson);
  //Aidez-nous à convertir la liste en chaîne JSON en utilisant l'outil fastjson (un seul fichier 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","Xiao Li",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","Zhang San",20));
  users.add(new User("B002","Li Si",30));
  //Aidez-nous à convertir la liste en chaîne JSON en utilisant l'outil fastjson (un seul fichier 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","Xiao Li",25));
  JSONObject obj = JSONObject.fromObject(map);
  System.out.println(obj.toString());
  out.print(obj.toString());
 }
}

Voici la totalité du contenu de cet article, j'espère qu'il vous sera utile dans vos études, et j'espère que vous soutiendrez également le tutoriel de cri.

Déclaration : Le contenu de cet article est tiré d'Internet, propriété de l'auteur original, partagé par les utilisateurs d'Internet et téléchargé par eux-mêmes. Ce site ne détient pas de droits de propriété, n'a pas été édité par l'homme, et n'assume aucune responsabilité juridique connexe. Si vous trouvez du contenu suspect de violation de droits d'auteur, vous êtes invité à envoyer un e-mail à : notice#oldtoolbag.com (veuillez remplacer # par @ lors de l'envoi d'un e-mail pour signaler une violation, et fournir des preuves pertinentes. Une fois vérifié, ce site supprimera immédiatement le contenu suspect de violation de droits d'auteur.)

教程基础
猜你喜欢