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>
<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='/XmlServlet?name='/>"+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='/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>

后台页面

<%@ 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='/XmlServlet?name='/>"+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='/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النقاط الرئيسية باستخدام Apache أو JSONArray من 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>عرض معالجة بيانات Json Ajax</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() في js: هي التحقق من تطابق نص المعامل مع أي نوع بيانات في 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='/JsonServlet2'/>";
  //3 إعداد طريقة الوصول
  xhr.open("POST", url, true);
  //4 إعداد الإجراء بعد الوصول الناجح
  xhr.onreadystatechange = function() {
   if (xhr.readyState == 4) {//العودة
    if (xhr.status == 200) {//كود الرد عادي
     //※※※※※تحليل النص json المرسل من الخلفية
     //وظيفة طريقة eval() في js: هي التحقق من تطابق نص المعامل مع أي نوع بيانات في 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='/JsonServlet2'/>";
  //3 إعداد طريقة الوصول
  xhr.open("POST", url, true);
  //4 إعداد الإجراء بعد الوصول الناجح
  xhr.onreadystatechange = function() {
   if (xhr.readyState == 4) {//العودة
    if (xhr.status == 200) {//كود الرد عادي
     //※※※※※تحليل النص json المرسل من الخلفية
     //وظيفة طريقة eval() في js: هي التحقق من تطابق نص المعامل مع أي نوع بيانات في 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>

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","Zhang San",20));
  users.add(new User("B002","Li Si",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","Zhang San",20));
  users.add(new User("B002","Li Si",30));
  String strJson=com.alibaba.fastjson.JSONArray.toJSONString(users);
  System.out.println(strJson);
  //استخدام أدوات fastjson لتحويل قائمة إلى سلسلة JSON
  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 Xiao",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));
  //استخدام أدوات fastjson لتحويل قائمة إلى سلسلة 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", "Hunan");
  map.put("height", "170");
  map.put("marry", "no");
  map.put("user", new User("A003","Li Xiao",25));
  JSONObject obj = JSONObject.fromObject(map);
  System.out.println(obj.toString());
  out.print(obj.toString());
 }
}

هذا هو نهاية محتويات هذا المقال، نأمل أن تكون قد ساعدتكم في التعلم، ونأمل أن تشجعوا دائمًا دليل التدريب على الصراخ.

بيان: محتويات هذا المقال مستمدة من الإنترنت، ملكية المحتويات للمالك الأصلي، تم إضافة المحتويات من قبل المستخدمين عبر الإنترنت بطرقهم الخاصة، ويحمل هذا الموقع حقوق الملكية، لم يتم تعديل المحتويات بشكل إنساني، ولا يتحمل الموقع أي مسؤولية قانونية مرتبطة بذلك. إذا اكتشفتم محتويات تتضمن حقوق الطبع والنشر، يرجى إرسال بريد إلكتروني إلى: notice#oldtoolbag.com (عند إرسال البريد الإلكتروني، يرجى استبدال #بـ @) لتقديم الشكوى، وقدموا الأدلة ذات الصلة، وسيقوم الموقع بإزالة المحتويات المزعجة فور التحقق منها.

تعليميات الأساس
توصيات لك