Ajax 与Json

Posted 2020-09-24 ABO

tags:

篇首语：本文由小常识网(cha138.com)小编为大家整理，主要介绍了Ajax 与Json相关的知识，希望对你有一定的参考价值。

一、Ajax开发步骤:

1.得到XMLHttpRequest对象。

var xmlhttp=null;
if (window.XMLHttpRequest)
{// code for all new browsers
xmlhttp=new XMLHttpRequest();
}
else if (window.ActiveXObject)
{// code for IE5 and IE6
xmlhttp=new ActiveXObject("Microsoft.XMLHTTP");
}

View Code

2.注册回调函数 xmlhttp.onreadystatechange=function(){};

3.open 只是用于设置请求方式以及url,它不发送请求。
4.send 它是用于发送请求的。send(null);null代表没有参数如果有参数可以写成:"username=tom&password=123"。
5.在回调函数中处理数据
5.1.XMLHttpRequest对象有一个属性 readyState，它代表的是XMLHttpRequest对象的状态。
0).代表XMLHttpRequest对象创建
1).open操作
2).send操作
3).接收到了响应数据，但是只有响应头，正文还没有接收。
4).所有http响应接收完成。

5.2.status 由服务器返回的 HTTP 状态代码，如 200 表示成功。

5.3.在回调函数中可以通过以下方式获取服务器返回的数据。1.responseText 2.responseXML

二、Ajax实例1：

<script type="text/javascript">

    //第一步:得到XMLHttpRequest对象.
    var xmlhttp = null;

    if (window.XMLHttpRequest) {
        xmlhttp = new XMLHttpRequest(); //针对于现在的浏览器包括IE7以上版本
    } else if (window.ActiveXObject) {
        //针对于IE5,IE6版本
        xmlhttp = new ActiveXObject("Microsoft.XMLHTTP");
    }
    
    //2.设置回调函数
    xmlhttp.onreadystatechange=function(){
        
        //5.处理响应数据  当信息全部返回，并且是成功
        if(xmlhttp.readyState==4&&xmlhttp.status==200){
            
            alert(xmlhttp.responseText);
        }
    };
    
    //3.open
    xmlhttp.open("GET","http://localhost/day23_3/ajax1");
    
    //4.发送请求 send
    xmlhttp.send(null);
</script>

View Code

三、关于ajax操作中请求参数的设置问题:

1.对于get请求方式，参数设置
直接在url后面拼接例如:"${pageContext.request.contextPath}/ajax2?name=tom"
2.对于post请求方式，参数设置
xmlhttp.open("POST","${pageContext.request.contextPath}/ajax2");
xmlhttp.send("name=tom");
注意:如果是post请求方式，还需要设置一个http请求头。xmlhttp.setRequestHeader("","");
例如: xmlhttp.open("POST","${pageContext.request.contextPath}/ajax2");
xmlhttp.setRequestHeader("content-type","application/x-www-form-urlencoded");
xmlhttp.send("name=tom");

四、Ajax实例2：

版本1： 1.创建一个Product类

package cn.itcast.domain;

public class Product {

    private int id;
    private String name;
    private double price;

    private String type;

    public String getType() {
        return type;
    }

    public void setType(String type) {
        this.type = type;
    }

    public Product() {
        super();
    }

    public Product(int id, String name, double price) {
        super();
        this.id = id;
        this.name = name;
        this.price = price;
    }

    public int getId() {
        return id;
    }

    public void setId(int id) {
        this.id = id;
    }

    public String getName() {
        return name;
    }

    public void setName(String name) {
        this.name = name;
    }

    public double getPrice() {
        return price;
    }

    public void setPrice(double price) {
        this.price = price;
    }

}

View Code

2.创建ajax.jsp

<%@ page language="java" import="java.util.*" pageEncoding="UTF-8"%>


<!DOCTYPE html PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN">
<html>
<head>

<title>ajax开发---显示商品信息</title>

<script type="text/javascript"
    src="${pageContext.request.contextPath}/my.js"></script>

<script type="text/javascript">
    window.onload = function() {
        //得到id=t的文本框
        var p = document.getElementById("p");

        p.onclick = function() {

            //第一步:得到XMLHttpRequest对象.
            var xmlhttp = getXmlHttpRequest();
            //2.设置回调函数
            xmlhttp.onreadystatechange = function() {

                //5.处理响应数据  当信息全部返回，并且是成功
                if (xmlhttp.readyState == 4 && xmlhttp.status == 200) {

                    var msg = xmlhttp.responseText;

                    document.getElementById("d").innerHTML = msg;

                }
            };

            //post请求方式，参数设置
            xmlhttp.open("GET", "${pageContext.request.contextPath}/ajax4");

            xmlhttp.send(null);
        };
    };
</script>

</head>

<body>

    <a href="javascript:void(0)" id="p">显示商品信息</a>

    <div id="d"></div>
</body>
</html>

View Code

3.在AjaxServlet中将List<Product>中的数据，手动拼接成了html代码，写回到浏览器端。

public class AjaxServlet extends HttpServlet {

public void doGet(HttpServletRequest request, HttpServletResponse response)
            throws ServletException, IOException {
        response.setContentType("text/html;charset=utf-8");
        List<Product> ps = new ArrayList<Product>();
        ps.add(new Product(1, "洗衣机", 1800));
        ps.add(new Product(2, "电视机", 3800));
        ps.add(new Product(3, "空调", 5800));

        PrintWriter out = response.getWriter();

        StringBuilder builder = new StringBuilder();

        builder.append("<table border=‘1‘><tr><td>商品编号</td><td>商品名称</td><td>商品价格</td></tr>");
        for (Product p : ps) {
        builder.append("<tr><td>" + p.getId() + "</td><td>" + p.getName()
                    + "</td><td>" + p.getPrice() + "</td></tr>");
        }

        builder.append("</table>");

        out.print(builder.toString());
        out.flush();
        out.close();

    }

    public void doPost(HttpServletRequest request, HttpServletResponse response)
            throws ServletException, IOException {
        doGet(request, response);
    }

}

View Code

版本2： 1.创建一个product.jsp页面，在页面上去组装table,直接将数据返回了。

<%@ page language="java" import="java.util.*" pageEncoding="UTF-8"%>
<%@taglib prefix="c" uri="http://java.sun.com/jsp/jstl/core"%>


<table border=‘1‘>
    <tr>
        <td>商品编号</td>
        <td>商品名称</td>
        <td>商品价格</td>
    </tr>
    <c:forEach items="${ps}" var="p">
        <tr>
            <td>${p.id }</td>
            <td>${p.name }</td>
            <td>${p.price }</td>
        </tr>
    </c:forEach>
</table>

View Code

2.AjaxServlet

public class AjaxServlet extends HttpServlet {

    public void doGet(HttpServletRequest request, HttpServletResponse response)
            throws ServletException, IOException {
        response.setContentType("text/html;charset=utf-8");
        List<Product> ps = new ArrayList<Product>();
        ps.add(new Product(1, "洗衣机", 1800));
        ps.add(new Product(2, "电视机", 3800));
        ps.add(new Product(3, "空调", 5800));

        request.setAttribute("ps", ps);

        request.getRequestDispatcher("/product.jsp").forward(request, response);

    }

    public void doPost(HttpServletRequest request, HttpServletResponse response)
            throws ServletException, IOException {
        doGet(request, response);
    }

}

View Code

版本3：在服务器端得到数据，只将要显示的内容返回，而不返回html代码，而html代码的拼接，在浏览器端完成-引入Json。

1.创建ajax.jsp

<%@ page language="java" import="java.util.*" pageEncoding="UTF-8"%>


<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN">
<html>
<head>

<title>ajax开发---显示商品信息(json)</title>

<script type="text/javascript"
    src="${pageContext.request.contextPath}/my.js"></script>

<script type="text/javascript">
    window.onload = function() {
        //得到id=t的文本框
        var p = document.getElementById("p");

        p.onclick = function() {

            //第一步:得到XMLHttpRequest对象.
            var xmlhttp = getXmlHttpRequest();
            //2.设置回调函数
            xmlhttp.onreadystatechange = function() {

                //5.处理响应数据  当信息全部返回，并且是成功
                if (xmlhttp.readyState == 4 && xmlhttp.status == 200) {

                    var json = eval(xmlhttp.responseText);
                    
                    var msg="<table border=‘1‘><tr><td>商品编号</td><td>商品名称</td><td>商品价格</td></tr>";
                    
                    for(var i=0;i<json.length;i++){
                        msg+="<tr><td>"+json[i].id+"</td><td>"+json[i].name+"</td><td>"+json[i].price+"</td></tr>";
                    }
                    msg+="</table>";
                    
                    document.getElementById("d").innerHTML=msg;
                    
                    
                    
                }
            };

            //post请求方式，参数设置
            xmlhttp.open("GET", "${pageContext.request.contextPath}/ajax5");

            xmlhttp.send(null);
        };
    };
</script>

</head>

<body>

    <a href="javascript:void(0)" id="p">显示商品信息</a>

    <div id="d"></div>
</body>
</html>

View Code

2.创建AjaxServlet

public class Ajax5Servlet extends HttpServlet {

    public void doGet(HttpServletRequest request, HttpServletResponse response)
            throws ServletException, IOException {
        response.setContentType("text/html;charset=utf-8");
        List<Product> ps = new ArrayList<Product>();
        ps.add(new Product(1, "洗衣机", 1800));
        ps.add(new Product(2, "电视机", 3800));
        ps.add(new Product(3, "空调", 5800));

        // 返回的是json数据
        PrintWriter out = response.getWriter();

        String json = JSONArray.fromObject(ps).toString();
        out.print(json);

        out.flush();
        out.close();
    }

    public void doPost(HttpServletRequest request, HttpServletResponse response)
            throws ServletException, IOException {
        doGet(request, response);
    }

}

View Code

五、Json的使用

1.导包(6个包)

2.将java对象转换成json

2.1.对于数组，List集合，要想转换成json:JSONArray.fromObject(java对象); ["value1","value2"]

2.2 对于javaBean，Map : JSONObject.fromObject(javaBean对象); {name1:value1,name2:value2}

对于json数据，它只有两种格式 1.[值1,值2,...] ------>这就是javascript中的数组 2.{name:value,....} ---->就是javascript中的对象。

但是这两种格式可以嵌套. [{},{},{}] {name:[],name:[]}

3.如果javaBean中有一个属性，不想生成在json中，怎样处理?

sonConfig config = new JsonConfig();
config.setExcludes(new String[] { "type" });
JSONArray.fromObject(ps, config).toString();

View Code

4.实例

public class JsonLibTest {

    // 将数组转换成json
    @Test
    public void fun1() {
        String[] st = { "aaa", "bbb", "ccc" };
        String json = JSONArray.fromObject(st).toString();

        System.out.println(json); // ["aaa","bbb","ccc"]
    }

    // 将List集合转换成json
    @Test
    public void fun2() {
        List<String> list = new ArrayList<String>();
        list.add("111");
        list.add("222");
        list.add("333");

        String json = JSONArray.fromObject(list).toString();

        System.out.println(json); // ["111","222","333"]
    }

    // 将一个javaBean转换成json
    @Test
    public void fun3() {
        Product p = new Product(1, "电冰箱", 1800);
        String json = JSONObject.fromObject(p).toString();

        System.out.println(json); // {"id":1,"name":"电冰箱","price":1800}
    }

    // 如果List<Product>
    @Test
    public void fun4() {
        List<Product> ps = new ArrayList<Product>();
        ps.add(new Product(1, "洗衣机", 1800));
        ps.add(new Product(2, "电视机", 3800));
        ps.add(new Product(3, "空调", 5800));

        JsonConfig config = new JsonConfig();
        config.setExcludes(new String[] { "type" });

        String json = JSONArray.fromObject(ps, config).toString();

        System.out.println(json);
    }

    // map集合转换成json
    @Test
    public void fun5() {
        Map<String, String> map = new HashMap<String, String>();
        map.put("aaa", "1111");
        map.put("bbb", "222");
        System.out.println(JSONObject.fromObject(map).toString());
    }

    // 将json转换成java
    @Test
    public void fun6() {
        Product p = new Product(1, "电冰箱", 1800);
        JSONObject jsonObj = JSONObject.fromObject(p);

        // 将jsonObj在转换成java对象
        Product pp= (Product) JSONObject.toBean(jsonObj,Product.class);
        
        System.out.println(pp);
    }
}

View Code

六、Ajax操作中服务器端返回xml处理

XMHttpRequest.resposneXML;----->得到的是一个Document对象.

操作：可以自己将xml文件中的内容取出来，写回到浏览器端。也可以请求转发到一个xml文件，将这个文件信息写回到浏览器端.

注意response.setContextType("text/xml;charset=utf-8");

问题:如果没有xml文件，我们的数据是从数据库查找到，想要将其以xml格式返回怎样处理?可以使用xml插件处理 xstream，它可以在java对象与xml之间做转换.

xstream使用:

1.导包 2个.

2.将java对象转换成xml

XStream xs=new XStream();
String xml=xs.toXML(java对象);

View Code

问题:生成的xml中的名称是类的全名?

两种方式:
1.编码实现  xs.alias("person", Person.class);
2.使用注解(Annotation)
   @XStreamAlias(别名) 对类和变量设置别名
   @XStreamAsAttribute  设置变量生成属性
   @XStreamOmitField  设置变量 不生成到XML
   @XStreamImplicit(itemFieldName = “hobbies”) 设置集合类型变量 别名
   使注解生效 
   xStream.autodetectAnnotations(true);

View Code

实例：1.创建ajax.jsp

<%@ page language="java" import="java.util.*" pageEncoding="UTF-8"%>


<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN">
<html>
<head>

<title>ajax开发---xml返回</title>

<script type="text/javascript"
    src="${pageContext.request.contextPath}/my.js"></script>

<script type="text/javascript">
    window.onload = function() {
        //得到id=t的文本框
        var btn = document.getElementById("btn");

        btn.onclick = function() {

            //第一步:得到XMLHttpRequest对象.
            var xmlhttp = getXmlHttpRequest();
            //2.设置回调函数
            xmlhttp.onreadystatechange = function() {

                //5.处理响应数据  当信息全部返回，并且是成功
                if (xmlhttp.readyState == 4 && xmlhttp.status == 200) {

                    var xml = xmlhttp.responseXML;
                    
                    var div=document.getElementById("content");
                    
                    var persons=xml.getElementsByTagName("person");
                    
                    for(var i=0;i<persons.length;i++){
                        
                        var id=persons[i].getElementsByTagName("id")[0].innerHTML;

                        var name=persons[i].getElementsByTagName("name")[0].innerHTML;

                        var age=persons[i].getElementsByTagName("age")[0].innerHTML;
                        
                        div.innerHTML+="id:"+id+"&nbsp;name:"+name+"&nbsp;age:"+age+"<br>";
                        
                    }
                    
                }
            };

            //post请求方式，参数设置
            xmlhttp.open("GET", "${pageContext.request.contextPath}/ajax7");

            xmlhttp.send(null);
        };
    };
</script>

</head>

<body>
    <input type="button" value="接收xml" id="btn">
    
    <div id="content">
    </div>
</body>
</html>

View Code

2.创建AjaxServlet

public class Ajax7Servlet extends HttpServlet {

    public void doGet(HttpServletRequest request, HttpServletResponse response)
            throws ServletException, IOException {

        response.setContentType("text/xml;charset=utf-8");

        List<Person> ps = new ArrayList<Person>();
        ps.add(new Person(1, "tom", 20));
        ps.add(new Person(2, "fox", 30));

        XStream xs = new XStream();

        xs.autodetectAnnotations(true);
        String xml = xs.toXML(ps);

        response.getWriter().write(xml);
        response.getWriter().close();

    }

    public void doPost(HttpServletRequest request, HttpServletResponse response)
            throws ServletException, IOException {
        doGet(request, response);
    }

}

View Code

以上是关于Ajax 与Json的主要内容，如果未能解决你的问题，请参考以下文章

html PHP代码片段： - AJAX基本示例：此代码演示了使用PHP和JavaScript实现的基本AJAX功能。

代码适用于与单个 html 文件不同的堆栈片段

简述什么是ajaxjavascriptjsonJquery?

AJAX相关JS代码片段和部分浏览器模型

jRaty jQuery 插件似乎不适用于 AJAX/JSON

解决未能加载文件或程序集“Newtonsoft.Json ...."或它的某一个依赖项。找到的程序集清单定义与程序集引用不匹配。 (异常来自 HRESULT:0x80131040)(代码片段