JSON 和 AJAX 学习总结

系统管理员 2022-12-02 00:48 150阅读 0赞

# JSON和AJAX #

### 文章目录 ###

*  JSON和AJAX
 *   *  一、JSON的介绍
     *  二、JSON在JavaScript中的使用
     *  三、JSON的两个常用方法
     *  四、JSON在Java中的使用
     *  五、AJAX的介绍
     *  六、AJAX的使用
     *  七、案例：校验用户名是否存在

## 一、JSON的介绍 ##

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

## 二、JSON在JavaScript中的使用 ##

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

代码演示：JSON定义的实例

1.  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包![在这里插入图片描述][20200828154702869.png_pic_center]
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.  异步和同步的概念：  
    ![在这里插入图片描述][watermark_type_ZmFuZ3poZW5naGVpdGk_shadow_10_text_aHR0cHM6Ly9ibG9nLmNzZG4ubmV0L3dlaXhpbl80OTM0MzE5MA_size_16_color_FFFFFF_t_70_pic_center]
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);
        }
    }

运行结果：  
![在这里插入图片描述][20200828154841105.png_pic_center]

点击之后出现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) 举例：  
![在这里插入图片描述][20200828155021730.png_pic_center]

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

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

1.  案例要求  
    ![在这里插入图片描述][20200828155030993.png_pic_center]
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);
        }
    }

运行结果：  
![在这里插入图片描述][2020082815511140.png_pic_center]  
![在这里插入图片描述][20200828155113173.png_pic_center]

[20200828154702869.png_pic_center]: /images/20221123/004c5b289e1e4c25a2d798d066eab85b.png
[watermark_type_ZmFuZ3poZW5naGVpdGk_shadow_10_text_aHR0cHM6Ly9ibG9nLmNzZG4ubmV0L3dlaXhpbl80OTM0MzE5MA_size_16_color_FFFFFF_t_70_pic_center]: /images/20221123/c0567e3f7ffb4187b07acf345c7b8b12.png
[20200828154841105.png_pic_center]: /images/20221123/08d6a2165369450aaf28755cb6bfa1a4.png
[20200828155021730.png_pic_center]: /images/20221123/9b8a35aaa5e644819eb060da68173659.png
[20200828155030993.png_pic_center]: /images/20221123/77ff2edf393c446cb3a8883334ff4dcd.png
[2020082815511140.png_pic_center]: /images/20221123/352d0f138b714f62a74485e86334bdb0.png
[20200828155113173.png_pic_center]: /images/20221123/d35d9728ea504a49a8623f69caa838bc.png