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

  1. 所在位置
  2. 首页
  3. 经验笔记
  4. 正文

Как передавать 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>
// get方式ajax
<script type="text/javascript">
  function send1() {
  alert("ok");
   var xhr = null;
   var name=document.getElementsByName("name")[0].value;
   var age=document.getElementsByName("age")[0].value;
   if (window.XMLHttpRequest) {
   xhr = new XMLHttpRequest();
    xhr = new ActiveXObject("Microsoft.XMLHttp");
   } else {
    var url = "<c:url value='/XmlServlet?name='/>" + name + "&age=" + age;
   }
   xhr.open("GET", url, true);
   //3 Установка способа доступа
   var txt = xhr.responseText;
   //4 Установка действия после успешного выполнения запроса
   xhr.onreadystatechange = function() {
    if (xhr.readyState == 4) { // 返回
     if (xhr.status == 200) { // 响应代码正常
      alert(txt);
      <!-- 前台以xml的格式向服务器发送数据 -->
     }
    }
   };
   xhr.send(null);
  }
 </script>
// post方式ajax
<script type="text/javascript">
  function send2() {
  alert("222");
   if (window.XMLHttpRequest) { // 高版本
   //1 Создание объекта AJAX
   var xhr = null;
   else { // 低版本
    xhr = new XMLHttpRequest();
   }
    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>
 Имя:
 <input type="text" name="name">
 <br /> Возраст:
 <input type="text" name="age">
 <br />
 <input type="button" value="Подача Get" onclick="send1();" />
 <br />
 <input type="button" value="Подача Post" onclick="send2()" />
 <br />
</body>
</html>

<title>Ajax XML数据处理演示</title>

<%@ 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>
// get方式ajax
<script type="text/javascript">
  function send1() {
  alert("ok");
   var xhr = null;
   var name=document.getElementsByName("name")[0].value;
   var age=document.getElementsByName("age")[0].value;
   if (window.XMLHttpRequest) {
   xhr = new XMLHttpRequest();
    xhr = new ActiveXObject("Microsoft.XMLHttp");
   } else {
    var url = "<c:url value='/XmlServlet?name='/>" + name + "&age=" + age;
   }
   xhr.open("GET", url, true);
   //3 Установка способа доступа
   var txt = xhr.responseText;
   //4 Установка действия после успешного выполнения запроса
   xhr.onreadystatechange = function() {
    if (xhr.readyState == 4) { // 返回
     if (xhr.status == 200) { // 响应代码正常
      alert(txt);
      <!-- 前台以xml的格式向服务器发送数据 -->
     }
    }
   };
   xhr.send(null);
  }
 </script>
// post方式ajax
<script type="text/javascript">
  function send2() {
  alert("222");
   if (window.XMLHttpRequest) { // 高版本
   //1 Создание объекта AJAX
   var xhr = null;
   else { // 低版本
    xhr = new XMLHttpRequest();
   }
    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>
 Имя:
 <input type="text" name="name">
 <br /> Возраст:
 <input type="text" name="age">
 <br />
 <input type="button" value="Подача Get" onclick="send1();" />
 <br />
 <input type="button" value="Подача Post" onclick="send2()" />
 <br />
</body>
</html>

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

Трансляция данных Json с помощью Ajaxосновные моменты использования класса JSONArray от Apache или Alibaba для передачи
Код на переднем конце

<%@ 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 строки, возвращаемой сервером
     //Функция eval() в JavaScript: проверка соответствия строки параметра одному из типов данных в JavaScript и преобразование её в объект соответствующего типа
     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 строки, возвращаемой сервером
     //Функция eval() в JavaScript: проверка соответствия строки параметра одному из типов данных в JavaScript и преобразование её в объект соответствующего типа
     var txt = xhr.responseText;
     //alert(txt);
     //alert(txt);
     var users = eval("(" + txt + ")"); 
     for ( var key in users)//WAY OF TRAVERSING MAP
      alert("Свойство：" + key + ", значение：" + users[key]);
     }
     //for ( var i = 0; i < users.length; i++) {//WAY OF TRAVERSING 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 строки, возвращаемой сервером
     //Функция eval() в JavaScript: проверка соответствия строки параметра одному из типов данных в JavaScript и преобразование её в объект соответствующего типа
     var txt = xhr.responseText;
     //alert(txt);
     //alert(txt);
     var users = eval("(" + txt + ")"); 
     for ( var key in users)//WAY OF TRAVERSING MAP
      alert("Свойство：" + key + ", значение：" + users[key]);
     }
     //for ( var i = 0; i < users.length; i++) {//WAY OF TRAVERSING LIST
      //alert(users[i].id +","+users[i].name+","+users[i].age);
     //}
   };
  };
  //5 Отправка
  xhr.send(null);
 }
</script>
</head>
<body>
 <input type="button" onclick="ask1();" value="запрос данных с сервера (ручное封装 json)" />
 <br />
 <input type="button" onclick="ask2();"
  value="запрос данных с сервера (с использованием библиотеки apache для封装 json)" />
 <input type="button" onclick="ask3()" value="запрос данных с сервера (с использованием библиотеки 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-пакет) для преобразования списка в строку 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-пакет) для преобразования списка в строку 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());
 }
}

Вот весь контент этой статьи, надеюсь, он поможет вам в изучении, также希望大家多多支持呐喊教程。

Заявление: содержимое этой статьи взято из Интернета, авторские права принадлежат соответствующему автору, содержимое предоставлено пользователями Интернета, сайт не имеет права собственности, не был отредактирован вручную, и не несет ответственности за соответствующие юридические последствия. Если вы обнаружите подозрительное нарушение авторских прав, пожалуйста, отправьте письмо по адресу: notice#oldtoolbag.com (во время отправки письма, пожалуйста, замените # на @) для сообщения о нарушении и предоставьте соответствующие доказательства. Если будет установлено, что содержимое нарушает авторские права, сайт немедленно удалят涉嫌侵权的内容。

Основной учебник
Рекомендуем также