java学习笔记——javaweb之JSON 、Ajax

1、JSON

1.1、什么是JSON

JSON (JavaScript Object Notation) 是一种轻量级的数据交换格式。 易于人阅读和编写。同时也易于机器解析和生成。 它基于JavaScript Programming Language, Standard ECMA-262 3rd Edition - December 1999的一个子集。 JSON采用完全独立于语言的文本格式，但是也使用了类似于C语言家族的习惯（包括C, C++, C#, Java, JavaScript, Perl, Python等）。 这些特性使JSON成为理想的数据交换语言。

 

 

 

//    FastJson

1.2、JSON对象定义和基本使用

在标准的json格式中，json对象由在括号括起来，对象中的属性也就是json的key是一个字符串，所以一定要使用双引号引起来。每组key之间使用逗号进行分隔。

 

1.2.1、JSON的定义

Json定义格式：

var 变量名 = {

“key” : value ,                   // Number类型

“key2” : “value” ,             // 字符串类型

“key3” : [] ,                        // 数组类型

“key4” : {},                         // json 对象类型

“key5” : [{},{}]                    // json 数组

};

 

    var jsons = {

            "key1":"abc", // 字符串类型

            "key2":1234,  // Number

            "key3":[1234,"21341","53"], // 数组

            "key4":{                    // json类型

                "key4_1" : 12,

                "key4_2" : "kkk"

            },

            "key5":[{                  // json数组

                "key5_1_1" : 12,

                "key5_1_2" : "abc"

            },{

                "key5_2_1" : 41,

                "key5_2_2" : "bbj"

            }]

    };

 

 

1.2.2、JSON对象的访问

json对象，顾名思义，就知道它是一个对象。里面的key就是对象的属性。我们要访问一个对象的属性，只需要使用【对象名.属性名】的方式访问即可。

 

        <script type="text/javascript">

            // json的定义        

            var jsons = {

                    "key1":"abc", // 字符串类型

                    "key2":1234,  // Number

                    "key3":[1234,"21341","53"], // 数组

                    "key4":{                    // json类型

                        "key4_1" : 12,

                        "key4_2" : "kkk"

                    },

                    "key5":[{                  // json数组

                        "key5_1_1" : 12,

                        "key5_1_2" : "abc"

                    },{

                        "key5_2_1" : 41,

                        "key5_2_2" : "bbj"

                    }]

            };

            // 访问json的属性

            alert(jsons.key1); // "abc"

            // 访问json的数组属性

            alert(jsons.key3[1]); // "21341"

            // 访问json的json属性

            alert(jsons.key4.key4_1);//12

            // 访问json的json数组

            alert(jsons.key5[0].key5_1_2);//"abc"

        </script>

 

 

1.3、JSON中两个常用的方法。

 

JSON对象和字符串对象的互转

 

JSON.stringify( json );         此方法可以把一个json对象转换成为json字符串

 

JSON.parse( jsonString );       此方法可以把一个json字符串转换成为json对象

 

 

<script type="text/javascript">

    // 一个json对象

    var obj = {

        "a" : 12,

        "c" : "str"

    };

    // 把json对象转换成为字符串对象

    var objStr = JSON.stringify(obj);

    //

    alert(objStr);

    // 把json对象的字符串，转换成为 json对象

    var jsonObj = JSON.parse(objStr);

    alert(jsonObj);

</script>

1.4、JSON在java中的使用(****重要)

我们要使用json和java中使用，我们需要使用到一个第三方的包。它就是gson.jar。下载地址：https://download.csdn.net/download/qq_25106373/10575342

Gson 是 Google 提供的用来在 Java 对象和 JSON 数据之间进行映射的 Java 类库。可以将一个 JSON 字符串转成一个 Java 对象，或者反过来。

 

json在java中的操作。常见的有三种情况。

 

1. java对象和json的转换
2. java对象list集合和json的转换
3. map对象和json的转换

 

 

package com.atguigu.gson;

 

import java.util.ArrayList;

import java.util.HashMap;

import java.util.List;

import java.util.Map;

 

import com.google.gson.Gson;

import com.google.gson.reflect.TypeToken;

 

public class GsonTest {

 

    static class Person {

        private int age;

        private String name;

 

        public Person() {

            // TODO Auto-generated constructor stub

        }

 

        public Person(int age, String name) {

            this.age = age;

            this.name = name;

        }

 

        public int getAge() {

            return age;

        }

 

        public void setAge(int age) {

            this.age = age;

        }

 

        public String getName() {

            return name;

        }

 

        public void setName(String name) {

            this.name = name;

        }

 

        @Override

        public String toString() {

            return "Person [age=" + age + ", name=" + name + "]";

        }

 

    }

 

    // 要把复杂的json字符串转换成为java对象。需要继承TypeToken类。

    // 并把返回的类型当成TypeToken的泛型注入

    static class PersonType extends TypeToken<List<Person>> {

    }

 

    public static void main(String[] args) {

        // json操作，一定要先new一个gson对象。

        Gson gson = new Gson();

        // java对象--json

        Person person = new Person(12, "wzg168");

        // 把对象转成为json字符串

        String personjson = gson.toJson(person);

 

        System.out.println(personjson);

        // 把json字符串转换成为java对象

        Person p = gson.fromJson(personjson, Person.class);

        System.out.println(p);

        System.out.println("------------------------------------------");

        // 2、java对象list集合和json的转换

        List<Person> list = new ArrayList<Person>();

        for (int i = 0; i < 3; i++) {

            list.add(new Person(10 * i, "name-" + i));

        }

        String jsonListString = gson.toJson(list);

        System.out.println(jsonListString);

 

        // 把json数组转换成为List对象

        // List<Person> ps = gson.fromJson(jsonListString, new PersonType().getType());

        // 我们也可以使用匿名内部类

        List<Person> ps = gson.fromJson(jsonListString, new TypeToken<List<Person>>() {

        }.getType());

        System.out.println(ps);

        System.out.println("------------------------------------------");

 

        // 3、map对象和json的转换

        Map<String, Person> mapPerson = new HashMap<String, GsonTest.Person>();

        // 添加person到map中

        mapPerson.put("p1", new Person(1, "person-1"));

        mapPerson.put("p2", new Person(2, "person-2"));

        // 把map转换成为json对象

        String jsonMapString = gson.toJson(mapPerson);

        System.out.println(jsonMapString);

        // 通过使用匿名内部类的方式

        Map<String, Person> map = gson.fromJson(jsonMapString,

                new TypeToken<HashMap<String, Person>>() {}.getType());

        System.out.println(map);

    }

}

2、Ajax学习

2.1、什么是Ajax？

AJAX即“Asynchronous Javascript And XML”（异步JavaScript和XML），是指一种创建交互式网页应用的网页开发技术。

ajax是一种浏览器异步发起请求。局部更新页面的技术。

 

 

2.2、javaScript原生Ajax请求

原生的Ajax请求，

1. 我们首先要创建XMLHttpRequest 对象
2. 调用open方法设置请求参数
3. 调用send方法发送请求
4. 在send方法前绑定onreadystatechange事件，处理请求完成后的操作。

 

 

1）创建一个html页面，发起请求。代码如下：

 

<!DOCTYPE html PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN" "http://www.w3.org/TR/html4/loose.dtd">

<html>

    <head>

        <meta http-equiv="pragma" content="no-cache" />

        <meta http-equiv="cache-control" content="no-cache" />

        <meta http-equiv="Expires" content="0" />

        <meta http-equiv="Content-Type" content="text/html; charset=UTF-8">

        <title>Insert title here</title>

        <script type="text/javascript">

            function ajaxRequest() {

//             1、我们首先要创建XMLHttpRequest

                var xhr = new XMLHttpRequest();

//             2、调用open方法设置请求参数

                xhr.open("GET","ajaxServlet?action=javaScriptAjax&a="+new Date(),true);

//             4、在send方法前绑定onreadystatechange事件，处理请求完成后的操作。

                xhr.onreadystatechange = function() {

                    // 判断请求完成，并且成功

                    if (xhr.readyState == 4 && xhr.status == 200) {

                        document.getElementById("div01").innerHTML = xhr.responseText;

                    }

                }

//             3、调用send方法发送请求

                xhr.send();

            }

        </script>

    </head>

    <body>

        <button onclick="ajaxRequest()">ajax request</button>

        <div id="div01">

        </div>

    </body>

</html>

2）创建一个AjaxServlet程序接收请求

 

package com.atguigu.servlet;

 

import java.io.IOException;

import java.util.Random;

 

import javax.servlet.ServletException;

import javax.servlet.http.HttpServletRequest;

import javax.servlet.http.HttpServletResponse;

 

import com.atguigu.gson.GsonTest;

import com.google.gson.Gson;

 

public class AjaxServlet extends BaseServlet {

    private static final long serialVersionUID = 1L;

 

    protected void javaScriptAjax(HttpServletRequest request, HttpServletResponse response)

            throws ServletException, IOException {

        System.out.println("ajax请求过来了 a--" + request.getParameter("a"));

        Random random = new Random(System.currentTimeMillis());

        // 使用随机数，可以让客户端看到变化

        response.getWriter().write(

                new Gson().toJson(new GsonTest.Person(random.nextInt(100), "12312")));

    }

 

}

3）在web.xml文件中的配置：

 

  <servlet>

    <servlet-name>AjaxServlet</servlet-name>

    <servlet-class>com.atguigu.servlet.AjaxServlet</servlet-class>

  </servlet>

  <servlet-mapping>

    <servlet-name>AjaxServlet</servlet-name>

    <url-pattern>/ajaxServlet</url-pattern>

  </servlet-mapping>

 

 

1. 测试效果

 

 

通过上面的代码我们发现。编写原生的JavaScript我们自己要写很多的代码。而且还要考虑浏览器兼容问题。所以使用起来非常的不方便。那我们工作之后。怎么处理Ajax请求呢。我们一般会使用JavaScript的框架来解决这个问题，比如说我们前面学到的Jquery框架。它就有很好的Ajax解决方案。

 

2.3、JQuery的Ajax请求(重要****)

 

四个Ajax请求方法

$.ajax方法

$.get方法

$.post方法

$.getJSON方法

 

一个表单序列化方法：serialize()表单序列化方法

 

 

如何使用上面的五个方法：

在JQuery中和Ajax请求有关的方法有四个

$.ajax请求参数

url：                                 请求的地址

type :                         请求的方式             get或post

data :                         请求的参数             string或json

success:                    成功的回调函数

dataType:                  返回的数据类型      常用json或text

 

下面的方法必须遵守参数的顺序

$.get请求和$.post请求

url:请求的URL地址

data:待发送 Key/value 参数。

callback:载入成功时回调函数。

type:返回内容格式，xml, html, script, json, text。

 

 

Jquery的$.getJSON

url:待载入页面的URL地址

data:待发送 Key/value 参数。

callback:载入成功时回调函数。

 

表单的序列化

serialize() 方法可以把一个form表单中所有的表单项。都以字符串name=value&name=value的形式进行拼接，省去我们很多不必要的工作。

 

 

由于$.get、$.post和getJSON这三个方法的底层都是直接或者间接地使用$.ajax()方法来实现的异步请求的调用。所以我们以$.ajax()方法的使用为示例进行展示：

 

 

1）Jquery_Ajax_request.html的代码如下：

 

<!DOCTYPE html PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN" "http://www.w3.org/TR/html4/loose.dtd">

<html>

    <head>

        <meta http-equiv="pragma" content="no-cache" />

        <meta http-equiv="cache-control" content="no-cache" />

        <meta http-equiv="Expires" content="0" />

        <meta http-equiv="Content-Type" content="text/html; charset=UTF-8">

        <title>Insert title here</title>

        <script type="text/javascript" src="script/jquery-1.7.2.js"></script>

        <script type="text/javascript">

            $(function(){

                // ajax请求

                $("#ajaxBtn").click(function(){

                    $.ajax({

                        url : "ajaxServlet", // 请求地址

                        error:function(){   // 请求失败回调

                            alert("请求失败");

                        },

                        success:function(data){ // 请求成功回调

                            alert( data );

                        },

                        type:"POST",              // 请求的方式

                        dataType:"json",          // 返回的数据类型为json对象

                        data:{                     // 请求的参数

                            action:"jqueryAjax",

                            a:12,

                            date: new Date()

                        }

                    });

                });

 

                // ajax--get请求

                $("#getBtn").click(function(){

                    $.get(

                        "ajaxServlet",{

                            action:"jqueryGet",

                            a:12,

                            date:new Date()

                        },function(data){alert(data);},"json"

                    );

                });

               

                // ajax--post请求

                $("#postBtn").click(function(){

                    // post请求

                    $.post(

                        "ajaxServlet", // 请求路径

                        {               // 请求参数

                            action:"jqueryPost",

                            a:12,

                            date:new Date()

                        },

                        function(data){ alert( data ) },  // 成功的回调函数

                        "text"                         // 返回的数据类型

                    );

                });

 

                // ajax--getJson请求

                $("#getJsonBtn").click(function(){

                    // 调用

                    $.getJSON(

                        "ajaxServlet",        // 请求路径

                        {                   // 请求参数

                            action:"jqueryGetJSON",

                            a:12,

                            date:new Date()

                        },

                        function(data){ alert( data ) }  // 成功的回调函数      

                    );

                });

 

                // ajax请求

                $("#submit").click(function(){

                    // 把参数序列化

                    var data = $("#form01").serialize();

                    alert(data);

                });

               

            });

        </script>

    </head>

    <body>

        <div>

            <button id="ajaxBtn">$.ajax请求</button>

            <button id="getBtn">$.get请求</button>

            <button id="postBtn">$.post请求</button>

            <button id="getJsonBtn">$.getJSON请求</button>

        </div>

        <br/><br/>

        <form id="form01" >

            用户名：<input name="username" type="text" /><br/>

            密码：<input name="password" type="password" /><br/>

            下拉单选：<select name="single">

                <option value="Single">Single</option>

                <option value="Single2">Single2</option>

            </select><br/>

            下拉多选：

            <select name="multiple" multiple="multiple">

               <option selected="selected" value="Multiple">Multiple</option>

               <option value="Multiple2">Multiple2</option>

               <option selected="selected" value="Multiple3">Multiple3</option>

            </select><br/>

            复选：

            <input type="checkbox" name="check" value="check1"/> check1

            <input type="checkbox" name="check" value="check2" checked="checked"/> check2<br/>

            单选：

            <input type="radio" name="radio" value="radio1" checked="checked"/> radio1

            <input type="radio" name="radio" value="radio2"/> radio2<br/>

            <input id="submit" type="submit" />

        </form>           

    </body>

</html>

 

 

2)AjaxServlet的代码如下：

package com.atguigu.servlet;

 

import java.io.IOException;

import java.util.Random;

 

import javax.servlet.ServletException;

import javax.servlet.http.HttpServletRequest;

import javax.servlet.http.HttpServletResponse;

 

import com.atguigu.gson.GsonTest;

import com.google.gson.Gson;

 

public class AjaxServlet extends BaseServlet {

    private static final long serialVersionUID = 1L;

 

    protected void javaScriptAjax(HttpServletRequest request, HttpServletResponse response)

            throws ServletException, IOException {

        System.out.println("ajax请求过来了 a--" + request.getParameter("a"));

        Random random = new Random(System.currentTimeMillis());

        // 使用随机数，可以让客户端看到变化

        response.getWriter().write(

                new Gson().toJson(new GsonTest.Person(random.nextInt(100), "12312")));

    }

   

    protected void jqueryAjax(HttpServletRequest request, HttpServletResponse response)

            throws ServletException, IOException {

        System.out.println("jqueryAjax请求过来了 a--" + request.getParameter("a"));

        Random random = new Random(System.currentTimeMillis());

        // 使用随机数，可以让客户端看到变化

        response.getWriter().write(

                new Gson().toJson(new GsonTest.Person(random.nextInt(100), "12312")));

    }

   

    protected void jqueryGet(HttpServletRequest request, HttpServletResponse response)

            throws ServletException, IOException {

        System.out.println("jqueryGet请求过来了 a--" + request.getParameter("a"));

        Random random = new Random(System.currentTimeMillis());

        // 使用随机数，可以让客户端看到变化

        response.getWriter().write(

                new Gson().toJson(new GsonTest.Person(random.nextInt(100), "12312")));

    }

   

    protected void jqueryPost(HttpServletRequest request, HttpServletResponse response)

            throws ServletException, IOException {

        System.out.println("jqueryPost请求过来了 a--" + request.getParameter("a"));

        Random random = new Random(System.currentTimeMillis());

        // 使用随机数，可以让客户端看到变化

        response.getWriter().write(

                new Gson().toJson(new GsonTest.Person(random.nextInt(100), "12312")));

    }

   

    protected void jqueryGetJSON(HttpServletRequest request, HttpServletResponse response)

            throws ServletException, IOException {

        System.out.println("jqueryGetJSON请求过来了 a--" + request.getParameter("a"));

        Random random = new Random(System.currentTimeMillis());

        // 使用随机数，可以让客户端看到变化

        response.getWriter().write(

                new Gson().toJson(new GsonTest.Person(random.nextInt(100), "12312")));

    }

 

}

通常Ajax可以在用户注册是验证用户名是否存在，修改参数后作出相应动作等功能。。。