JSON 和 AJAX的基本使用，看这篇就够了

JSON和AJAX

MySql的语法看这篇就够了，传送地址：MySql必知必会
Cookie 和 Session 的使用看这篇就够了，传送地址：Cookie 和 Session 的介绍

一、JSON的介绍

1. JSON是一种轻量级的数据交换格式，JSON采用完全独立于语言的文本格式，很多语言都提供了 对JSON的支持(C、JAVA、JavaScript等)，这就使得JSON成为理想的数据交换格式
2. 数据交换指的是客户端和服务器之间数据的传递格式

二、JSON在JavaScript中的使用

1. JSON的定义
   JSON是由键值对组成，并且由大括号包围，每个键由引号引起(不使用引号也可以)，键和值之间 使用冒号进行分割，多组键值对之间由逗号进行分割 (最后一组不加逗号)

代码演示：JSON定义的实例

<script type="text/javascript">
    var jsonObj = {
     
     
        "key1":12,
        "key2":"abc",
        "key3":true,
        "key4":[11,"arr",false],
        //JSON中套JSON
        "key5":{
     
     
            "key5_1":551,
            "key5_2":"key5_2"
        },
        //数组中放JSON
        "key6":[{
     
     
            "key6_1_1":611,
            "key6_1_2":621
        },{
     
     
            "key6_2_1":621,
            "key6_2_2":622
        }]
    };
</script>

2. JSON的访问
   JSON本身是一个对象，JSON中的key可以理解为是对象中的一个属性，JSON中的key的访问与 访问对象的属性一致：JSON对象.key

代码演示：JSON对象的访问

alert(typeof (jsonObj)); //Object
alert(jsonObj.key1); //12
alert(jsonObj.key4); //11,arr,false
//JSON中数组值的遍历
for (var i = 0; i < jsonObj.key4.length; i++) {
    alert(jsonObj.key4[i]);
}
//访问JSON中定义的JSON
alert(jsonObj.key5.key5_1); //551
alert(jsonObj.key6); //[object Object],[object Object]
//取出来的每一个元素都是JSON对象
var key6Element = jsonObj.key6[0];
alert(key6Element.key6_1_1); //611
alert(key6Element.key6_1_2); //621

三、JSON的两个常用方法

1. JSON的存在有两种形式
   (1) 对象的形式存在，称为JSON对象
   此形式常用于操作JSON中的数据
   (2) 字符串的形式存在，称为JSON字符串
   此形式常用于在客户端和服务器之间进行数据的交换

2. JSON的两个方法
   (1) JSON.stringify(JSON对象)：把JSON对象转换成为JSON字符串(类似JAVA中的toString方法)
   (2) JSON.parse(字符串)：把JSON字符串转换成为JSON对象

代码演示：JSON中的两个方法

var stringify = JSON.stringify(jsonObj);
alert(stringify); //JSON对象中的所有内容全部转换为字符串
var jsonObj2 = JSON.parse(stringify);
alert(jsonObj2.key1); //12
alert(jsonObj2.key2); //abc

四、JSON在Java中的使用

1. 需要先导入jar包

2. 创建Gson实例，调用 (1) toJson()方法：将参数转换成JSON字符串
   (2) fromJson()方法：将参数JSON字符串还原

代码演示：JavaBean和JSON的转换

@Test
public void test1(){
    
    
    //Person类中有id和name属性
    Person person = new Person(12, "jay");
    //创建Gson对象实例
    Gson gson = new Gson();
    //toString方法将java对象转换成JSON字符串
    String toJson = gson.toJson(person);
    System.out.println(toJson); //{"id":12,"name":"jay"}
    //fromJson方法将JSON字符串转换成Java对象
    //第一个参数是需要转换的JSON字符串
    //第二个参数是转换回去的Java对象类型
    Person person1 = gson.fromJson(toJson, Person.class);
    System.out.println(person1); //Person{id=12, name='jay'}
}

代码演示：List集合和JSON的转换

@Test
public void test2(){
    
    
    ArrayList<Person> personList = new ArrayList<>();
    personList.add(new Person(1,"Tom"));
    personList.add(new Person(2,"Jerry"));
    //创建Gson对象
    Gson gson = new Gson();
    //把List集合转换成为JSON字符串
    String s = gson.toJson(personList);
    System.out.println(s); //[{"id":1,"name":"Tom"},{"id":2,"name":"Jerry"}]
    /*将JSON字符串还原，如果还原的是集合，第二个参数是Type类型
      首先创建一个类(PersonListType)，此类继承TypeToken<T>，
      T泛型是要转换回去的类型，T是List<Person>或ArrayList<Person>
      则此类为PersonListType extends TypeToken<ArrayList<Person>>
      此类什么都不做，类体是空的 */
    List<Person> list = gson.fromJson(s, new PersonListType().getType());
    System.out.println(list); //[Person{id=1, name='Tom'}, Person{id=2, name='Jerry'}]
}

代码演示：Map集合和JSON的转换

@Test
public void test3(){
    
    
    Map<Integer,Person> personMap = new HashMap<>();
    personMap.put(1, new Person(1, "Dog"));
    personMap.put(2, new Person(2, "Cat"));
    Gson gson = new Gson();
    String JsonString = gson.toJson(personMap);
    System.out.println(JsonString); //{"1":{"id":1,"name":"Dog"},"2":{"id":2,"name":"Cat"}}
    //将JSON字符串转换为集合时，还有一种简便方式：匿名内部类
    Map<Integer,Person> personMap2 =
         gson.fromJson(JsonString, new TypeToken<HashMap<Integer,Person>>(){
    
    }.getType());
    System.out.println(personMap2); //{1=Person{id=1, name='Dog'}, 2=Person{id=2, name='Cat'}}
}

五、AJAX的介绍

1. 异步和同步的概念：
   

2. AJAX的概念：ASynchronous JavaScript And XML (异步的JavaScript和XML)，通过在后台与服务器 进行少量数据交换，Ajax可以使网页实现异步更新。这意味着可以在不重新加载整 个网页的情况下，对网页的某部分进行更新。传统的网页(不使用Ajax)如果需要更 新内容，必须重载整个网页页面。

六、AJAX的使用

1. JavaScript实现方式(只需了解，自行查阅资料)
2. jQuery实现方式：
   (1) $.ajax({键值对}) (多个键值对之间使用逗号隔开，最后一个不加逗号)

代码演示：使用$.ajax()发送异步请求

<head>
    <meta charset="UTF-8">		    		
    <title>Title</title>			  		
    <script src="jquery-1.7.2.js"></script>  
    <script type="text/javascript">
        //定义单击事件执行的方法
        function fun() {
     
     
            //使用$.ajax()发送异步请求
            $.ajax({
     
     
                url:"http://localhost:8080/MyTest/ajaxServlet", //请求路径
                type:"POST", //请求方式，不写默认是get
                //data表示请求参数，有两种书写方式
                data:{
     
     "username":"jay","age":22}, //JSON形式，推荐
                /*第二种：data:"username=jay&age=22"*/
                //success表示响应成功之后自动执行的函数，参数可任意定义，
                //用来接收服务器响应的结果的值
                success:function (result) {
     
     
                    alert(result);
                }, 
                //error表示响应出错时自动执行的函数
                error:function () {
     
     
                    alert("出错了！");
                }, 
                dataType:"text"//设置接收到的响应的格式
            })
        }
    </script>
</head>
<body>
    <input type="button" value="发送异步请求" onclick="fun();">
</body>

@WebServlet("/ajaxServlet")
public class AjaxServlet extends HttpServlet {
    
    
    @Override
    public void doPost(HttpServletRequest request, HttpServletResponse response) throws ServletException, IOException {
    
    
        String username = request.getParameter("username");
        response.getWriter().write("hello!" + username);
    }

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

运行结果：

点击之后出现hello！jay

  (2) $.get()：发送get请求

语法：$.get(url，[data]，[callback]，[type])
参数：url：请求路径
data：请求参数(可选)
callback：响应成功之后执行的函数(可选)
type：响应结果的类型(可选)

  (3) $.post()：发送post请求

语法：$.post(url，[data]，[callback]，[type])
参数：url：请求路径
data：请求参数(可选)
callback：响应成功之后执行的函数(可选)
type：响应结果的类型(可选)
(4) 举例：

注意：1. 可以通过谷歌浏览器的F12，在console中查看错误信息
2. 如果要执行响应出错后的函数，必须使用$.ajax()，而$.get()与$.post()仅有响应成功后的函数

七、案例：校验用户名是否存在

1. 案例要求
   
2. 细节说明：
   服务器与客户端传输JSON格式的数据时，有两种方法：
   (1) 三种发送异步请求的方式中将响应结果的类型设置为”json”
   (2) 服务器设置MIME类型，jQuery会根据HTTP的MIME类型智能判断响应结果类型：
   response.setContentType(“application/json;charset=utf-8”);

代码演示1：创建注册页面

<head>
    <meta charset="UTF-8">
    <title>Title</title>
    <script src="jquery-3.3.1.min.js"></script>
    <script type="text/javascript">
        //页面加载完成事件
        $(function () {
     
     
            //给username绑定失去焦点事件
            $("#u_name").blur(function () {
     
     
                //获取username文本框的值
                var username = $(this).val();
                //发送异步请求，接收的数据格式是{"userExist":boolean,"msg":String}
                $.get("http://localhost:8080/MyTest/registServlet",
                    {
     
     username:username},function (data) {
     
     
                    //获取span标签对象，方便赋值
                    var span = $("#s_pan");
                    //判断用户名是否存在
                    if (data.userExist) {
     
     
                        span.css("color","red");
                        span.html(data.msg);
                    } else {
     
     
                        span.css("color","green");
                        span.html(data.msg);
                    }
                })
            })
        })
    </script>
</head>
<body>
    <input type="text" id="u_name" name="username" placeholder="请输入用户名">
    <span id="s_pan"></span> <br>
    <input type="password" name="password" placeholder="请输入密码"> <br>
    <input type="submit" value="注册">

代码演示2：创建Servlet程序

@WebServlet("/registServlet")
public class registServlet extends HttpServlet {
    
    
    @Override
    protected void doGet(HttpServletRequest request, HttpServletResponse response) throws ServletException, IOException {
    
    
        //设置响应的格式为JSON
        response.setContentType("application/json;charset=utf-8");
        String username = request.getParameter("username");
        //定义一个Map集合，存放响应的JSON数据
        Map<String, Object> HashMap = new HashMap<>();
        //判断用户名是否已经存在(假设此时只存在一个用户名Tom)
        if ("Tom".equals(username)) {
    
    
            HashMap.put("userExist", true);
            HashMap.put("msg", "此用户名太受欢迎,请更换一个");
        } else {
    
    
            HashMap.put("userExist", false);
            HashMap.put("msg", "用户名可用");
        }
        //将Map集合转换为JSON数据并回传给客户端
        Gson gson = new Gson();
        String json = gson.toJson(HashMap);
        response.getWriter().write(json);
    }
}

运行结果：