Ajax传输Json和xml数据步奏详解（附代码）
这次给大家带来Ajax传输Json和xml数据步奏详解（附代码），Ajax传输Json和xml数据的注意事项有哪些，下面就是实战案例，一起来看一下。
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>
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>后台页面
<%@ 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>
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>--------------------------------------------------------------------------------
Ajax传输Json数据的要点利用Apache或者阿里巴巴的JSONArray类进行传输
前台代码
<%@ 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串
//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='/JsonServlet2'/>";
//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='/JsonServlet2'/>";
//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>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包)帮我们把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());
}
}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包)帮我们把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());
}
}相信看了本文案例你已经掌握了方法，更多精彩请关注php中文网其它相关文章！
推荐阅读：
Atas ialah kandungan terperinci Ajax传输Json和xml数据步奏详解（附代码）. Untuk maklumat lanjut, sila ikut artikel berkaitan lain di laman web China PHP!
Alat AI Hot
Undresser.AI Undress
Apl berkuasa AI untuk mencipta foto bogel yang realistik
AI Clothes Remover
Alat AI dalam talian untuk mengeluarkan pakaian daripada foto.
Undress AI Tool
Gambar buka pakaian secara percuma
Clothoff.io
Penyingkiran pakaian AI
AI Hentai Generator
Menjana ai hentai secara percuma.
Artikel Panas
Alat panas
Notepad++7.3.1
Editor kod yang mudah digunakan dan percuma
SublimeText3 versi Cina
Versi Cina, sangat mudah digunakan
Hantar Studio 13.0.1
Persekitaran pembangunan bersepadu PHP yang berkuasa
Dreamweaver CS6
Alat pembangunan web visual
SublimeText3 versi Mac
Perisian penyuntingan kod peringkat Tuhan (SublimeText3)
Topik panas
1376
52
Petua pengoptimuman prestasi untuk menukar tatasusunan PHP kepada JSON
May 04, 2024 pm 06:15 PM
Kaedah pengoptimuman prestasi untuk menukar tatasusunan PHP kepada JSON termasuk: menggunakan sambungan JSON dan fungsi json_encode() menambah pilihan JSON_UNESCAPED_UNICODE untuk mengelakkan aksara melarikan diri menggunakan penimbal untuk meningkatkan prestasi pengekodan JSON; Pustaka pengekodan JSON.
Bagaimanakah anotasi dalam perpustakaan Jackson mengawal pensirilan dan penyahsirilan JSON?
May 06, 2024 pm 10:09 PM
Anotasi dalam perpustakaan Jackson mengawal pensirilan dan penyahserilangan JSON: Pensirilan: @JsonIgnore: Abaikan harta @JsonProperty: Tentukan nama @JsonGetter: Gunakan kaedah get @JsonSetter: Gunakan kaedah yang ditetapkan Deserialization: @JsonIgnoreProperties: Abaikan harta @ JsonProperty: Nyatakan nama @JsonCreator: Gunakan pembina @JsonDeserialize: Logik tersuai
Bagaimana untuk mendapatkan pembolehubah daripada kaedah PHP menggunakan Ajax?
Mar 09, 2024 pm 05:36 PM
Menggunakan Ajax untuk mendapatkan pembolehubah daripada kaedah PHP adalah senario biasa dalam pembangunan web Melalui Ajax, halaman boleh diperoleh secara dinamik tanpa menyegarkan data. Dalam artikel ini, kami akan memperkenalkan cara menggunakan Ajax untuk mendapatkan pembolehubah daripada kaedah PHP, dan memberikan contoh kod khusus. Pertama, kita perlu menulis fail PHP untuk mengendalikan permintaan Ajax dan mengembalikan pembolehubah yang diperlukan. Berikut ialah kod contoh untuk fail PHP mudah getData.php:
PHP dan Ajax: Membina enjin cadangan autolengkap
Jun 02, 2024 pm 08:39 PM
Bina enjin cadangan autolengkap menggunakan PHP dan Ajax: Skrip sisi pelayan: mengendalikan permintaan Ajax dan mengembalikan cadangan (autocomplete.php). Skrip pelanggan: Hantar permintaan Ajax dan cadangan paparan (autocomplete.js). Kes praktikal: Sertakan skrip dalam halaman HTML dan nyatakan pengecam elemen input carian.
Pemahaman mendalam tentang PHP: Kaedah pelaksanaan menukar Unicode JSON kepada bahasa Cina
Mar 05, 2024 pm 02:48 PM
Pemahaman mendalam tentang PHP: Kaedah pelaksanaan menukar JSONUnicode kepada Bahasa Cina Semasa pembangunan, kami sering menghadapi situasi di mana kami perlu memproses data JSON dan pengekodan Unicode dalam JSON akan menyebabkan kami beberapa masalah dalam beberapa senario, terutamanya apabila kami perlu menukar Unicode Apabila pengekodan ditukar kepada aksara Cina. Dalam PHP, terdapat beberapa kaedah yang boleh membantu kami mencapai proses penukaran ini Kaedah biasa akan diperkenalkan di bawah dan contoh kod khusus akan disediakan. Mula-mula, mari kita fahami dulu Un dalam JSON
PHP lwn. Ajax: Penyelesaian untuk mencipta kandungan yang dimuatkan secara dinamik
Jun 06, 2024 pm 01:12 PM
Ajax (JavaScript Asynchronous dan XML) membenarkan menambah kandungan dinamik tanpa memuatkan semula halaman. Menggunakan PHP dan Ajax, anda boleh memuatkan senarai produk secara dinamik: HTML mencipta halaman dengan elemen kontena dan permintaan Ajax menambah data pada elemen selepas memuatkannya. JavaScript menggunakan Ajax untuk menghantar permintaan kepada pelayan melalui XMLHttpRequest untuk mendapatkan data produk dalam format JSON daripada pelayan. PHP menggunakan MySQL untuk menanyakan data produk daripada pangkalan data dan mengekodnya ke dalam format JSON. JavaScript menghuraikan data JSON dan memaparkannya dalam bekas halaman. Mengklik butang mencetuskan permintaan Ajax untuk memuatkan senarai produk.
Tutorial PHP: Cara Menukar Unikod JSON kepada Aksara Cina
Mar 05, 2024 pm 06:36 PM
JSON (JavaScriptObjectNotation) ialah format pertukaran data ringan yang biasa digunakan untuk pertukaran data antara aplikasi web. Semasa memproses data JSON, kami sering menemui aksara Cina yang dikodkan Unikod (seperti "u4e2du6587") dan perlu menukarnya kepada aksara Cina yang boleh dibaca. Dalam PHP, kita boleh mencapai penukaran ini melalui beberapa kaedah mudah. Seterusnya, kami akan memperincikan cara menukar JSONUnico
Petua pantas untuk menukar tatasusunan PHP kepada JSON
May 03, 2024 pm 06:33 PM
Tatasusunan PHP boleh ditukar kepada rentetan JSON melalui fungsi json_encode() (contohnya: $json=json_encode($array);), dan sebaliknya, fungsi json_decode() boleh digunakan untuk menukar daripada JSON kepada tatasusunan ($array= json_decode($json);) . Petua lain termasuk mengelakkan penukaran mendalam, menentukan pilihan tersuai dan menggunakan perpustakaan pihak ketiga.
