AJAX有关的数据处理

最新推荐文章于 2022-09-04 18:23:13 发布

原创最新推荐文章于 2022-09-04 18:23:13 发布 · 460 阅读

0 ·

CC 4.0 BY-SA版权

文章标签：

#ajax

本文介绍了如何使用AJAX处理XML及JSON数据。包括从前端发送XML格式数据到后台，后台处理并返回XML数据，以及前后端间的JSON数据交互。演示了手动封装JSON数据和使用Apache与FastJson工具进行JSON封装的方法。

大概内容：
1.AJAX处理xml格式的数据
2.AJAX处理JSON封装的数据

AJAX处理xml格式的数据

通过实例演示：如何从前端向后台发送xml格式的数据，然后后台如何处理以及后台怎样向前端发送xml格式的数据并在前端如何处理xml格式的数据。

1.请求页面ajaxXml.jsp

<%@ page language="java" import="java.util.*" pageEncoding="UTF-8"%>
<!-- 导入JSTL标签库 -->
<%@ 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">
        function send(){
            var xhr=null;

            if(window.XMLHttpRequest){//高版本浏览器
                xhr=new XMLHttpRequest();
            }else{//低版本浏览器
                xhr = new ActiveXObject("Microsoft.XMLHttp");
            }
            //通过JSTL标签指定请求提交的路径 
            var url="<c:url value='/XmlServlet'/>";

            xhr.open("post", url, true);//异步

            xhr.onreadystatechange=function(){
                if(xhr.readyState==4){
                    if(xhr.status==200){

                        //2.接收从后台发送过来的xml数据，并解析
                        var xmlDomObj=xhr.responseXML;//xml格式的数据
                        var users=xmlDomObj.getElementsByTagName("user");
                        for(var i=0;i<users.length;i++){
                            alert("到这啦");
                            var id = users[i].getAttribute("id");
                            var nm = users[i].childNodes[0].firstChild.data;
                            var age = users[i].childNodes[1].firstChild.data;
                            alert(id+","+nm+","+age);
                        }
                    }
                }
            };

            //1.前端向后台发送xml格式的数据
            //把页面提交的数据封装成xml格式上传
            var name = document.getElementById("nm").value;
            var age = document.getElementById("ag").value;
            var xml = "<user><name>"+name+"</name> <age>"+age+"</age> </user>";

            xhr.send(xml);//发送xml格式的数据到后台
        }
    </script>
  </head>
  <body>
    <h3>ajax处理xml数据</h3>
    name:<input type="text" name="name" id="nm"/><br/>
    age:<input type="text" name="age" id="ag"/>
    <input type="button" value="发送和接收xml数据" onclick="send();"/>
  </body>
</html>

2.后台处理xml数据的servlet

@SuppressWarnings("serial")
public class XmlServlet 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 {

        /*
         * 1.接收前端ajax发送过来的xml格式的数据，并解析出来
         */
        request.setCharacterEncoding("utf-8");
        InputStream in=request.getInputStream();
        BufferedReader br=new BufferedReader(new InputStreamReader(in));
        String xml="";
        String line=null;
        while((line=br.readLine())!=null){
            xml=xml+line;
        }

        //dom4j解析xml数据，这里需要导入dom4j的包，网上有下载
        SAXReader sax=new SAXReader();

        try {
            Document dom=sax.read(new StringReader(xml));
            Element root=dom.getRootElement();
            String name=root.elementText("name");
            String age=root.elementText("age");
            //在控制台输出信息
            System.out.println(name+";"+age);

        } catch (DocumentException e) {
            e.printStackTrace();
        }


        /*
         * 2.从后台向前端ajax发送xml格式的数据
         */

        //数据原本要从数据库获取，这里简单模拟
        List<User> users = new ArrayList<User>();
        users.add( new User("U001", "Jack", 22));
        users.add( new User("U002", "张三", 23));
        //把List<User>格式的数据转换成 xml格式的字符串
        String res="<users>";
        for(User u: users){
            res +="<user id=\"" + u.getId()+"\"><name>"+u.getName()+"</name><age>"+
                   u.getAge()+"</age></user>";
        }
        res +="</users>";
        //在控制台输出封装的xml格式的数据
        System.out.println(res);

        //一定要设置xml响应格式
        response.setContentType("text/xml;charset=utf-8");
        response.getWriter().print(res);
    }
}

/*
 *公共的JAVABEAN
 */
package cn.hncu.domain;
public class User {

    private String id;
    private String name;
    private Integer age;

    public User(String id, String name, Integer age) {
        super();
        this.id = id;
        this.name = name;
        this.age = age;
    }
    public String getId() {
        return id;
    }
    public void setId(String id) {
        this.id = id;
    }
    public String getName() {
        return name;
    }
    public void setName(String name) {
        this.name = name;
    }
    public Integer getAge() {
        return age;
    }
    public void setAge(Integer age) {
        this.age = age;
    }

    @Override
    public String toString() {
        return "User [id=" + id + ", name=" + name + ", age=" + age + "]";
    }
}

演示结果：
->1.控制台输出（前端提交的数据和后台向前端发送的xml格式的数据）
这里写图片描述

->2.网页弹窗（接收后台发送过来的数据）
这里写图片描述

AJAX处理JSON封装的数据

1.AJAX请求后台数据—后台手动封装JSON数据

<%@ 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 ask2(){
            var xhr=null;

            if(window.XMLHttpRequest){
                xhr=new XMLHttpRequest();
            }else{
                xhr=new ActionXObject("Microsoft.XMLHttpRequest");
            }

            var url="<c:url value='/JsonServlet2'/>";

            xhr.open("post", url,true);

            xhr.onreadystatechange=function(){
                if(xhr.readyState==4){
                    if(xhr.status==200){
                        var txt=xhr.responseText;//txt是符合Json格式的字符串
                        alert(txt);
                        /* 校验并解析后台发过来的Json格式的数据
                         * eval是JS中一个功能强大的全局函数
                         */
                        var users=eval(txt);
                        for(var i=0;i<users.length;i++){
                            alert(users[i].id+","+users[i].name+","+users[i].age);
                        }
                    }
                }

            };

            xhr.send(null);
        }
    </script>
  </head>
  <body>
    <h3>ajax处理Json封装的数据演示</h3>
    <input type="button" value="AJAX请求后台数据---后台手动封装Json" onclick="ask2();"/><br/>

    <input type="button" value="AJAX请求后台数据---后台利用Apache工具封装Json" onclick="ask3();"/><br/>

    <input type="button" value="AJAX请求后台数据---后台利用FastJson工具封装Json" onclick="ask4();"/><br/>
  </body>
</html>

//JsonServlet2.java
import java.io.IOException;
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;

@SuppressWarnings("serial")
public class JsonServlet2 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 {
        //数据原本应该从数据库获取，这里简单模拟
        List<User> users = new ArrayList<User>();
        users.add( new User("U001", "Jack", 22));
        users.add( new User("U002", "张三", 23));

        String Json="";
        for(User user:users){
            if(Json.equals("")){//如果是第一个User，则是如下的添加方式
                Json="{id:\""+user.getId()+"\",name:\""+user.getName()+"\",age:"+user.getAge()+"}";
            }else{//如果不是第一个User，则是下面的添加方式
                Json=Json+",{id:\""+user.getId()+"\",name:\""+user.getName()+"\",age:"+user.getAge()+"}";
            }
        }
        Json="["+Json+"]";
        //因为有中文，所以要设置编码方式
        response.setCharacterEncoding("utf-8");
        response.getWriter().print(Json);
    }
}

2.使用一些工具帮我们把数据封装成JSON格式–Apache的工具

–>首先需要导包（可以网上下载）
这里写图片描述
–>代码：相比较与我们手动封装，这种方式的区别就在于通过工具帮我们封装，所以在上面的jsp页面的js代码中添加一个ask3()的函数就可以了

function ask3(){
            var xhr=null;

            if(window.XMLHttpRequest){
                xhr=new XMLHttpRequest();
            }else{
                xhr=new ActionXObject("Microsoft.XMLHttpRequest");
            }

            var url="<c:url value='/JsonServlet3'/>";

            xhr.open("post", url,true);

            xhr.onreadystatechange=function(){
                if(xhr.readyState==4){
                    if(xhr.status==200){
                        var txt=xhr.responseText;//txt是符合Json格式的字符串
                        alert(txt);
                        /*校验并解析后台发过来的Json格式的数据，eval是JS中一个功能强大的全局函数*/
                        var users=eval(txt);
                        for(var i=0;i<users.length;i++){
                            alert(users[i].id+","+users[i].name+","+users[i].age);
                        }
                    }
                }

            };

            xhr.send(null);
        }

/*JsonServlet3.java*/
import java.io.IOException;
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 cn.hncu.domain.User;

@SuppressWarnings("serial")
public class JsonServlet3 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 {
        //后台的原始数据一般是List<User>且来自dao查询,这里模拟一下
        List<User> users = new ArrayList<User>();
        users.add( new User("U001", "Jack", 22));
        users.add( new User("U002", "张三", 23));
        users.add( new User("U003", "Rose", 24));
        /*
         * 使用apache的Json工具帮我们把list封装成Json
         */
        JSONArray Json1=JSONArray.fromObject(users);

        response.setCharacterEncoding("utf-8");
        response.getWriter().print(strJson1);

    }
}

3.使用阿里的fastJson工具帮我们封装

–>首先需要导包：fastjson-1.1.17.jar（可以直接网上下载）
–>代码：也只需要在上面的jsp页面中的JS代码中添加一个ask4()函数就可以了

function ask3(){
            var xhr=null;

            if(window.XMLHttpRequest){
                xhr=new XMLHttpRequest();
            }else{
                xhr=new ActionXObject("Microsoft.XMLHttpRequest");
            }

            var url="<c:url value='/JsonServlet4'/>";

            xhr.open("post", url,true);

            xhr.onreadystatechange=function(){
                if(xhr.readyState==4){
                    if(xhr.status==200){
                        var txt=xhr.responseText;//txt是符合Json格式的字符串
                        alert(txt);
                        /*校验并解析后台发过来的Json格式的数据，eval是JS中一个功能强大的全局函数*/
                        var users=eval(txt);
                        for(var i=0;i<users.length;i++){
                            alert(users[i].id+","+users[i].name+","+users[i].age);
                        }
                    }
                }

            };

            xhr.send(null);
        }

/*JsonServlet4.java*/
import java.io.IOException;
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 com.alibaba.fastjson.JSON;

@SuppressWarnings("serial")
public class JsonServlet4 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 {

        //后台的原始数据一般是List<User>且来自dao查询,这里模拟一下
        List<User> users = new ArrayList<User>();
        users.add( new User("U001", "Jack", 22));
        users.add( new User("U002", "张三", 23));
        users.add( new User("U003", "Rose", 24));
        users.add( new User("U004", "李四", 24));

        //用阿里巴巴的fastjson工具(只有一个jar包)帮我们把list转换Json串
        String strJson = JSON.toJSONString(users);
        //要设置编码
        response.setCharacterEncoding("utf-8");
        response.getWriter().print(strJson);
    }
}