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

  1. ubicación
  2. página principal
  3. apuntes de experiencia
  4. cuerpo

¿Cómo transmitir datos Json y xml en Ajax?

transmisión de datos XML mediante AJAX:Sólo hay que encapsular los datos en formato XML para poder transmitirlos, el cliente js recibe los parámetros xml con responseXML, y el lado del servidor los lee con flujo y DOM4j para analizar

página del cliente

<%@ 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>Muestra de procesamiento de datos XML con AJAX</title>
<script type="text/javascript">
  //método AJAX por 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;
   //3establece el método de acceso
   xhr.open("GET", url, true);
   //4establece la operación después de que se complete el acceso
   xhr.onreadystatechange=function(){
    if(xhr.readyState==4{//regresa
     if(xhr.status==200){//Código de respuesta normal
      var txt=xhr.responseText;
      alert(txt);
     }
    }
   };
   xhr.send(null);
  }
 </script>
¡-- El lado del cliente envía datos en formato XML al servidor -->
<script type="text/javascript">
  //método AJAX por POST
  function send2(){
   alert("222");
   //1crea el objeto ajax
   var xhr = null;
   if(window.XMLHttpRequest){//versión alta
    xhr = new XMLHttpRequest();
   }else{//versión baja
    xhr = new ActiveXObject("Microsoft.XMLHttp");
   }
   //2dirección de solicitud
   var url = "<c:url value='/XmlServlet'/>";
   //3establece el método de acceso
   xhr.open("POST", url, true);
   //4establece la operación después de que se complete el acceso
   xhr.onreadystatechange=function(){
    if(xhr.readyState==4{//regresa
     if(xhr.status==200){//Código de respuesta 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;//las operaciones en el modelo DOM de xml, y html tienen algunas diferencias
       var age=users[i].childNodes[1].firstChild.data;//no se puede usarchildNodes["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>
 Nombre:
 <input type="text" name="name">
 <br /> Edad:
 <input type="text" name="age">
 <br />
 <input type="button" value="Enviar GET" onclick="send1();" />
 <br />
 <input type="button" value="Enviar POST" onclick="send2()" />
 <br />
</body>
</html>

página de fondo

<%@ 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>Muestra de procesamiento de datos XML con AJAX</title>
<script type="text/javascript">
  //método AJAX por 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;
   //3establece el método de acceso
   xhr.open("GET", url, true);
   //4establece la operación después de que se complete el acceso
   xhr.onreadystatechange=function(){
    if(xhr.readyState==4{//regresa
     if(xhr.status==200){//Código de respuesta normal
      var txt=xhr.responseText;
      alert(txt);
     }
    }
   };
   xhr.send(null);
  }
 </script>
¡-- El lado del cliente envía datos en formato XML al servidor -->
<script type="text/javascript">
  //método AJAX por POST
  function send2(){
   alert("222");
   //1crea el objeto ajax
   var xhr = null;
   if(window.XMLHttpRequest){//versión alta
    xhr = new XMLHttpRequest();
   }else{//versión baja
    xhr = new ActiveXObject("Microsoft.XMLHttp");
   }
   //2dirección de solicitud
   var url = "<c:url value='/XmlServlet'/>";
   //3establece el método de acceso
   xhr.open("POST", url, true);
   //4establece la operación después de que se complete el acceso
   xhr.onreadystatechange=function(){
    if(xhr.readyState==4{//regresa
     if(xhr.status==200){//Código de respuesta 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;//las operaciones en el modelo DOM de xml, y html tienen algunas diferencias
       var age=users[i].childNodes[1].firstChild.data;//no se puede usarchildNodes["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>
 Nombre:
 <input type="text" name="name">
 <br /> Edad:
 <input type="text" name="age">
 <br />
 <input type="button" value="Enviar GET" onclick="send1();" />
 <br />
 <input type="button" value="Enviar POST" onclick="send2()" />
 <br />
</body>
</html>

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

transmisión Ajax de datos Jsonde la parte delantera se utiliza la clase JSONArray de Apache o Alibaba para la transmisión
punto clave del código

<%@ 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>演示 de manejo de datos Json de Ajax</title>
<script type="text/javascript">
 function ask1() {
  //1crea el objeto ajax
  var xhr = null;
  if (window.XMLHttpRequest) {//versión alta
   xhr = new XMLHttpRequest();
  } else {//versión baja
   xhr = new ActiveXObject("Microsoft.XMLHttp");
  }
  //2dirección de solicitud
  var url = "<c:url value='/JsonServlet1'/>";
  //3establece el método de acceso
  xhr.open("POST", url, true);
  //4establece la operación después de que se complete el acceso
  xhr.onreadystatechange = function() {
   if (xhr.readyState == 4) {//regresa
    if (xhr.status == 200) {}}//Código de respuesta normal
     //※※※※※Análisis de la cadena JSON devuelta por el backend
     //La función del método eval() en JavaScript: es verificar qué tipo de datos de cadena de parámetros cumple con JavaScript y convertirlo en el objeto correspondiente del tipo
     var txt = xhr.responseText;
     var users = eval("(" + txt + ")"); //Convertir una cadena de texto con formato JSON que cumpla con el formato en un objeto JSON
     for ( var i = 0; i < users.length; i++) {
      alert(users[i].id + ", + users[i].name + ",
        + users[i].age);
     }
    }
   }
  };
  //5 Enviar
  xhr.send(null);
 }
 function ask2() {
  //1crea el objeto ajax
  var xhr = null;
  if (window.XMLHttpRequest) {//versión alta
   xhr = new XMLHttpRequest();
  } else {//versión baja
   xhr = new ActiveXObject("Microsoft.XMLHttp");
  }
  //2dirección de solicitud
  var url = "<c:url value='/JsonServlet2'/>";
  //3establece el método de acceso
  xhr.open("POST", url, true);
  //4establece la operación después de que se complete el acceso
  xhr.onreadystatechange = function() {
   if (xhr.readyState == 4) {//regresa
    if (xhr.status == 200) {}}//Código de respuesta normal
     //※※※※※Análisis de la cadena JSON devuelta por el backend
     //La función del método eval() en JavaScript: es verificar qué tipo de datos de cadena de parámetros cumple con JavaScript y convertirlo en el objeto correspondiente del tipo
     var txt = xhr.responseText;
     //alert(txt);
     //Convertir una cadena de texto con formato JSON que cumpla con el formato en un objeto JSON
     var users = eval("(" + txt + ")"); 
     for ( var key in users)//el modo de recorrer el mapa
      alert("Atributo:" + key + ", valor:" + users[key]);
     }
     //for ( var i = 0; i < users.length; i++) {//el modo de recorrer la lista
      //alert(users[i].id +",+users[i].name+",+users[i].age);
     //}
   };
  };
  //5 Enviar
  xhr.send(null);
 }
 function ask3() {
  //1crea el objeto ajax
  var xhr = null;
  if (window.XMLHttpRequest) {//versión alta
   xhr = new XMLHttpRequest();
  } else {//versión baja
   xhr = new ActiveXObject("Microsoft.XMLHttp");
  }
  //2dirección de solicitud
  var url = "<c:url value='/JsonServlet2'/>";
  //3establece el método de acceso
  xhr.open("POST", url, true);
  //4establece la operación después de que se complete el acceso
  xhr.onreadystatechange = function() {
   if (xhr.readyState == 4) {//regresa
    if (xhr.status == 200) {}}//Código de respuesta normal
     //※※※※※Análisis de la cadena JSON devuelta por el backend
     //La función del método eval() en JavaScript: es verificar qué tipo de datos de cadena de parámetros cumple con JavaScript y convertirlo en el objeto correspondiente del tipo
     var txt = xhr.responseText;
     //alert(txt);
     //Convertir una cadena de texto con formato JSON que cumpla con el formato en un objeto JSON
     var users = eval("(" + txt + ")"); 
     for ( var key in users)//el modo de recorrer el mapa
      alert("Atributo:" + key + ", valor:" + users[key]);
     }
     //for ( var i = 0; i < users.length; i++) {//el modo de recorrer la lista
      //alert(users[i].id +",+users[i].name+",+users[i].age);
     //}
   };
  };
  //5 Enviar
  xhr.send(null);
 }
</script>
</head>
<body>
 <input type="button" onclick="ask1();" value="Solicitud AJAX de datos de backend (manualmente encapsular JSON)" />
 <br />
 <input type="button" onclick="ask2();"
  value="Solicitud AJAX de datos de backend (usando el herramienta apache para encapsular JSON)" />
 <input type="button" onclick="ask3()" value="Solicitud AJAX de datos de backend (usando el herramienta fastjson para encapsular 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 {
  //Llamar al servicio de backend service.dao.query(), leer la información de la base de datos
  //Para simplificar la comprensión de los puntos de conocimiento, aquí se simula directamente la parte de backend
  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="";
  //Con java, encapsular una cadena de formato 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);
  //Ayudarnos a convertir la lista en una cadena JSON utilizando la herramienta fastjson (solo un paquete 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", "Li Xie",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));
  //Ayudarnos a convertir la lista en una cadena JSON utilizando la herramienta fastjson (solo un paquete 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", "Li Xie",25));
  JSONObject obj = JSONObject.fromObject(map);
  System.out.println(obj.toString());
  out.print(obj.toString());
 }
}

Esto es todo el contenido del artículo, espero que ayude a su aprendizaje y que todos los amigos apoyen el tutorial de clamor.

Declaración: El contenido de este artículo se obtiene de la red, es propiedad del autor original, el contenido se contribuye y carga de manera autónoma por los usuarios de Internet, este sitio no posee los derechos de propiedad, no se ha realizado un procesamiento editorial humano y no asume responsabilidades legales relacionadas. Si encuentra contenido sospechoso de copyright, le invitamos a enviar un correo electrónico a: notice#oldtoolbag.com (al enviar un correo electrónico, por favor reemplace # con @) para denunciar, y proporcione evidencia relevante. Una vez confirmado, este sitio eliminará inmediatamente el contenido sospechoso de infracción.

Tutoriales básicos
Te gustará