Gemeinschaft Lernen Tools-Bibliothek Freizeit
suchen
Deutsch
Heim > Web-Frontend > js-Tutorial > Hauptteil

Detaillierte Erläuterung der Schritte zur Übertragung von Json- und XML-Daten über Ajax (mit Code)

php中世界最好的语言
Freigeben： 2018-04-03 15:13:45
Original
1800 Leute haben es durchsucht

Dieses Mal erkläre ich Ihnen Schritt für Schritt die Ajax-Übertragung von Json- und XML-Daten (mit Code). Werfen wir einen Blick darauf.

Ajax überträgt XML-Daten:

Solange die Daten im XML-Format gekapselt sind, kann die Übertragung realisiert werden. Das Front-End-JS verwendet ResponseXML, um XML-Parameter zu empfangen und den Hintergrund zu lesen verwendet Streams und dom4j zum Parsen von Startseite

Backend-Seite
<%@ 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=&#39;/XmlServlet?name=&#39;/>"+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=&#39;/XmlServlet&#39;/>";
   //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>
Nach dem Login kopieren
Nach dem Login kopieren

---------------- ---------- -------------------------- ---------- ----
<%@ 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=&#39;/XmlServlet?name=&#39;/>"+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=&#39;/XmlServlet&#39;/>";
   //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>
Nach dem Login kopieren
Nach dem Login kopieren

Die Hauptpunkte der Ajax-Übertragung von Json-Daten

Verwenden Sie die JSONArray-Klasse von Apache oder Alibaba für die ÜbertragungFront-End-Code

JsonServlet1.java
<%@ 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=&#39;/JsonServlet1&#39;/>";
  //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=&#39;/JsonServlet2&#39;/>";
  //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=&#39;/JsonServlet2&#39;/>";
  //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>
Nach dem Login kopieren

JsonServlet2.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);
 }
}
Nach dem Login kopieren

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 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());
 }
}
Nach dem Login kopieren

Ich glaube, Sie haben es gemeistert Die Methode nach dem Lesen des Falls in diesem Artikel finden Sie unter PHP Chinesisch Weitere verwandte Artikel online! 
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());
 }
}
Nach dem Login kopieren

Empfohlene Lektüre:

Wie sendet Ajax ein Formular und implementiert den Datei-Upload?


Ajax überträgt Daten im JSON-Format an die Hintergrund. Wie man mit Fehlern umgeht

Das obige ist der detaillierte Inhalt vonDetaillierte Erläuterung der Schritte zur Übertragung von Json- und XML-Daten über Ajax (mit Code). Für weitere Informationen folgen Sie bitte anderen verwandten Artikeln auf der PHP chinesischen Website!

Verwandte Etiketten：
ajax javascript json
Quelle：php.cn
Vorheriger Artikel：Ajax-Upload und Vorschau von Bildern (mit Code) Nächster Artikel：PHP verwendet häufig kleine Funktionen
Erklärung dieser Website
Der Inhalt dieses Artikels wird freiwillig von Internetnutzern beigesteuert und das Urheberrecht liegt beim ursprünglichen Autor. Diese Website übernimmt keine entsprechende rechtliche Verantwortung. Wenn Sie Inhalte finden, bei denen der Verdacht eines Plagiats oder einer Rechtsverletzung besteht, wenden Sie sich bitte an admin@php.cn
Neueste Artikel des Autors
Aktuelle Ausgaben
Reine CSS-Methode zum dynamischen Ändern der Bildquelle beim Klicken ohne Verwendung von JavaScript Ich muss den Quellcode eines Bildes per Mausklick ändern, indem ich nur CSS wie img:active...
Aus 2024-04-06 19:25:49
0
1
505
Streudiagrammpunkte behalten beim Zoomen in d3.js keine Werte bei Dies ist das erste Mal, dass ich d3.js verwende. Bitte haben Sie Geduld. Ich habe es als r...
Aus 2024-04-06 18:16:26
0
1
403
JavaScript-Hover-Ereignisse für herstellerspezifische Pseudoelemente 我有以下htmlinput标签。$("input[type='range']::-webkit-slider-thumb").on('hover',functi...
Aus 2024-04-06 15:35:24
0
1
274
Formular ohne Schaltfläche mit Javascript/Jquery senden Ich versuche, ein Formular ohne Schaltfläche zu senden, indem ich eine JavaScript-Funktion...
Aus 2024-04-06 14:54:03
0
2
421
Passen Sie das Erscheinungsbild von Bootstrap-Akkordeon-Headern mithilfe der CollapseDisplay-Klasse an Ich möchte den Kartentitel eines Panels mit der Klasse Collapseshow formatieren. In diesem...
Aus 2024-04-06 12:53:11
0
1
376
verwandte Themen
Mehr>
Beliebte Empfehlungen
Beliebte Tutorials
Mehr>
Verwandte Tutorials
Beliebte Empfehlungen
Aktuelle Kurse
Neueste Downloads
Mehr>
Web-Effekte
Quellcode der Website
Website-Materialien
Frontend-Vorlage