ajax用xml传递参数,Ajax如何传输Json和xml数据

这篇文章主要为大家详细介绍了Ajax如何传输Json和xml数据,具有一定的参考学习ajax的价值,对Ajax如何传输Json和xml数据感兴趣的或不熟悉的小伙伴们可以参考一下

ajax传输xml数据:只要把数据封装成xml格式就可以实现传输,前台js用responseXML接收xml参数,后台读取用流和dom4j来解析

前台页面

Ajax XML数据处理演示

//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=""+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);

}

//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 = "";

//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

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=""+name+""+age+"";

xhr.send(xml);

}

Name:


Age:

后台页面

Ajax XML数据处理演示

//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=""+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);

}

//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 = "";

//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

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=""+name+""+age+"";

xhr.send(xml);

}

Name:


Age:

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

Ajax传输Json数据的要点利用Apache或者阿里巴巴的JSONArray类进行传输

前台代码

Ajax Json数据处理演示

function ask1() {

//1创建ajax对象

var xhr = null;

if (window.XMLHttpRequest) {//高版本

xhr = new XMLHttpRequest();

} else {//低版本

xhr = new ActiveXObject("Microsoft.XMLHttp");

}

//2请求地址

var url = "";

//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 = "";

//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 = "";

//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);

}

value="ajax请求后台数据(用apache工具封装json方式)" />

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 users = new ArrayList();

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 users = new ArrayList();

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 map = new HashMap();

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 users = new ArrayList();

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 map = new HashMap();

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中文网。

相关推荐:

评论
添加红包

请填写红包祝福语或标题

红包个数最小为10个

红包金额最低5元

当前余额3.43前往充值 >
需支付:10.00
成就一亿技术人!
领取后你会自动成为博主和红包主的粉丝 规则
hope_wisdom
发出的红包
实付
使用余额支付
点击重新获取
扫码支付
钱包余额 0

抵扣说明:

1.余额是钱包充值的虚拟货币,按照1:1的比例进行支付金额的抵扣。
2.余额无法直接购买下载,可以购买VIP、付费专栏及课程。

余额充值