JavaWeb零基础入门之JSON和AJAX

完结啦！！！
视频链接：https://www.bilibili.com/video/BV1Y7411K7zz?p=1
参考手册：https://tool.oschina.net/apidocs/apidoc?api=javaEE6
参考手册：https://www.w3school.com.cn/html5/index.asp

一、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的存在有两种形式

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

2. JSON的两个方法

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

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

   //JSON对象中的所有内容全部转换为字符串
   var stringify = JSON.stringify(jsonObj);
   alert(stringify); 
   //把JSON字符串转换成为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字符串还原

3. 代码演示：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'}
   }
   

4. 代码演示：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是List或ArrayList
         则此类为PersonListType extends TypeToken>
         此类什么都不做，类体是空的 */
       List<Person> list = gson.fromJson(s, new PersonListType().getType());
       System.out.println(list); //[Person{id=1, name='Tom'}, Person{id=2, name='Jerry'}]
   }
   

5. 代码演示：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实现方式：

   • $.ajax({键值对}) (多个键值对之间使用逗号隔开，最后一个不加逗号)

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

   <head>
       <meta charset="UTF-8">		    		
       <title>Titletitle>			  		
       <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>
   

   运行结果：

   

   点击之后出现hello！jay

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

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

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

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

6. 举例：

   

7. 注意：

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

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

1. 案例要求

   

2. 细节说明：服务器与客户端传输JSON格式的数据时，有两种方法：

   • 三种发送异步请求的方式中将响应结果的类型设置为”json”
   • 服务器设置MIME类型，jQuery会根据HTTP的MIME类型智能判断响应结果类型：
     response.setContentType(“application/json;charset=utf-8”);

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

   <head>
       <meta charset="UTF-8">
       <title>Titletitle>
       <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="注册">
   

4. 代码演示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);
       }
   }
   

5. 运行结果：

   
   

九、本文需要的jar包

链接: https://pan.baidu.com/s/1BD2BOEN_nJ7mZh-i3NfQnA 密码: cgfg