E027Web学习笔记-Ajax和JSON

古城微笑少年丶 2024-04-19 12:32 100阅读 0赞

# 一、Ajax #

## 1、Ajax概述 ##

AJAX = Asynchronous JavaScript and XML（异步的 JavaScript 和 XML）；

AJAX 不是新的编程语言，而是一种使用现有标准的新方法；

**AJAX 最大的优点是在不重新加载整个页面的情况下，可以与服务器交换数据并更新部分网页内容；**

AJAX 不需要任何浏览器插件，但需要用户允许JavaScript在浏览器上执行；

## 2、同步和异步（在客户端和服务器相互通信的基础上） ##

### 同步： ###

客户端必须等待服务器的响应，等待期间客户端不能进行其他操作；

### 异步： ###

客户端不需要等待服务器的响应，在服务器处理请求的过程中客户端可以进行其他操作；

## 3、作用 ##

**提升用户体验！**

## **4、两种实现方式** ##

原生JS实现方式（了解）；

JQuery三种实现方式：

①$.ajax()

②$.get()

③$.post()

## 5、JS原生实现 ##

### 代码演示： ###

**HTML：**

<!DOCTYPE html>
    <html lang="en">
    <head>
        <meta charset="UTF-8">
        <title>Title</title>
    </head>
    <body>
        <input type="button" value="发送异步请求" onclick="fun();">
        <input id="btn" type="button" value="这里显示拿到的数据">
    </body>
    <script type="text/javascript">
        function fun() {
            //发送异步请求
            //1、创建核心对象
            var xmlHttp;
            if (window.XMLHttpRequest){
                //  IE7+, Firefox, Chrome, Opera, Safari 浏览器执行代码
                xmlHttp=new XMLHttpRequest();
            }else{
                // IE6, IE5 浏览器执行代码
                xmlHttp=new ActiveXObject("Microsoft.XMLHTTP");
            }
            //2、建立连接
            //参数说明：
            // 2.1、请求方式：get或者post；
            //如果是get，请求参数在url后面拼接，send方法空参，xmlHttp.open("GET","test.txt?username=zibo",true);；
            //如果是get，请求参数在send中定义，xmlHttp.send("username=zibo");；
            // 2.2、请求的URL；
            // 2.3、同步或异步请求，true是异步，false是同步；
            xmlHttp.open("GET","js_ajax?username=zibo",true);
            //3、发送请求
            xmlHttp.send();
    
            //4、接收并处理来自服务器的响应
            //接收方式：xmlHttp.responseText;
            //接收时间：服务器响应成功之后
            xmlHttp.onreadystatechange=function(){
                if (xmlHttp.readyState===4 && xmlHttp.status===200) {
                    document.getElementById("btn").setAttribute("value",xmlHttp.responseText);
                }
            }
        }
    </script>
    </html>

**Servlet：**

package com.zibo;
    
    import javax.servlet.ServletException;
    import javax.servlet.annotation.WebServlet;
    import javax.servlet.http.HttpServlet;
    import javax.servlet.http.HttpServletRequest;
    import javax.servlet.http.HttpServletResponse;
    import java.io.IOException;
    
    @WebServlet("/js_ajax")
    public class AjaxServlet extends HttpServlet {
        @Override
        protected void doGet(HttpServletRequest req, HttpServletResponse resp) throws ServletException, IOException {
            this.doPost(req, resp);
        }
    
        @Override
        protected void doPost(HttpServletRequest req, HttpServletResponse resp) throws ServletException, IOException {
            //1、获取请求参数
            String username = req.getParameter("username");
            //2、打印username
            System.out.println("用户："+username);
            //3、响应
            resp.getWriter().write("hello : " + username);
        }
    }

**文件位置图：**

![watermark_type_ZmFuZ3poZW5naGVpdGk_shadow_10_text_aHR0cHM6Ly9ibG9nLmNzZG4ubmV0L3FxXzI5Njg5MzQz_size_16_color_FFFFFF_t_70][]

### 运行结果： ###

![watermark_type_ZmFuZ3poZW5naGVpdGk_shadow_10_text_aHR0cHM6Ly9ibG9nLmNzZG4ubmV0L3FxXzI5Njg5MzQz_size_16_color_FFFFFF_t_70 1][]

## 6、JQuery实现 ##

### 方式一（$.ajax()） ###

**代码演示：**

<!DOCTYPE html>
    <html lang="en">
    <head>
        <meta charset="UTF-8">
        <script src="jquery-3.4.1.min.js"></script>
        <title>Title</title>
    </head>
    <body>
        <input type="button" value="发送异步请求" onclick="fun();">
    </body>
    <script type="text/javascript">
        function fun() {
            //发送异步请求
            $.ajax({
                url:"js_ajax",//请求路径
                type:"POST",
                // data:"username=zibo&age=23",//写法一，不推荐
                data:{"username":"zibo","age":23},//写法二，推荐
                success:function (data) {
                    alert(data);
                },//执行成功的回调函数！
                error:function () {
                    alert("执行出错的回调函数！");
                },//执行出错的回调函数
                dataType:"text"//设置接收到的相应格式的数据
    
            });
        }
    </script>
    </html>

**运行结果：**

![watermark_type_ZmFuZ3poZW5naGVpdGk_shadow_10_text_aHR0cHM6Ly9ibG9nLmNzZG4ubmV0L3FxXzI5Njg5MzQz_size_16_color_FFFFFF_t_70 2][]

### 方式二（$.get()） ###

**代码演示：**

**运行结果：**

![watermark_type_ZmFuZ3poZW5naGVpdGk_shadow_10_text_aHR0cHM6Ly9ibG9nLmNzZG4ubmV0L3FxXzI5Njg5MzQz_size_16_color_FFFFFF_t_70 3][]

### 方式三（$.post()） ###

与$.get()一样，只需要将get更改为post；

# 二、JSON #

## 1、JSON简介 ##

JSON: **J**ava**S**cript **O**bject **N**otation(JavaScript 对象表示法)；

JSON 是存储和交换文本信息的语法。类似 XML；

JSON 比 XML 更小、更快，更易解析；

## 2、语法 ##

①数据在名称/值对中：

1、JSON是由键值对构成的；
    2、键要用引号（单双都行）引起，也可以不引；
    3、取值范围：
    数字（整数或浮点数）
    字符串（在双引号中）
    逻辑值（true 或 false）
    数组（在中括号中）
    对象（在大括号中）
    null，不常用

②数据由逗号分隔

③大括号保存对象

④中括号保存数组

## 3、定义、嵌套和获取值的演示 ##

<!DOCTYPE html>
    <html lang="en">
    <head>
        <meta charset="UTF-8">
        <title>Title</title>
    </head>
    <body>
    
    </body>
    <script type="text/javascript">
        //1、定义基本格式
        var student = {"name":"zibo","age":23,gender:true};
        document.write(student.name + "<br/>");
    
        //2、嵌套：{} -> []
        var students = {
            "student":[
            {"name":"ZiBo","age":23,gender:true},
            {"name":"DongMei","age":23,gender:false},
            {"name":"zibo","age":23,gender:true}
            ]
        };
        document.write(students.student[1].name + "<br/>");
    
        //3、嵌套：[] -> {}
        var stus = [
            {"name":"ZiBo","age":23,gender:true},
            {"name":"DongMei","age":23,gender:false},
            {"name":"zibo","age":23,gender:true}
        ];
        document.write(stus[1].age);
    </script>
    </html>

## 4、JSON解析器 ##

常见解析器：JsonLib，Gson，fastjson，**jackson（Spring MVC内置解析器）**

## 5、Java对象转JSON： ##

### jackson使用步骤： ###

第一步：导入jackson jar包，

![watermark_type_ZmFuZ3poZW5naGVpdGk_shadow_10_text_aHR0cHM6Ly9ibG9nLmNzZG4ubmV0L3FxXzI5Njg5MzQz_size_16_color_FFFFFF_t_70 4][]

下载地址是

[链接：https://pan.baidu.com/s/1-p9vJMNl5NiyOn0enaWtvw  
提取码：twqo ][https_pan.baidu.com_s_1-p9vJMNl5NiyOn0enaWtvw _twqo]

第二步：创建jackson核心对象 ObjectMapper；

第三步：调用ObjectMapper相关方法进行转换；

转换方法：
    write(参数1,obj)
    参数1：
    File：将obj对象转换成JSON字符串，并保存到执行的文件中；
    Writer：将obj对象转换成JSON字符串，并将JSON字符串填充到字符输出流；
    OutputStream：将obj对象转换成JSON字符串，并将JSON字符串填充到字节输出流；
    
    writeValueAsString(obj)：将obj对象转换为JSON字符串；

**代码演示：**

package com.zibo.test;
    
    import com.fasterxml.jackson.core.JsonProcessingException;
    import com.fasterxml.jackson.databind.ObjectMapper;
    import com.zibo.Student;
    import org.junit.Test;
    
    public class JTest {
        @Test
        public void test1() throws Exception {
            //1、创建对象
            Student student = new Student();
            student.setName("zibo");
            student.setAge(23);
            student.setGender(true);
            //2、创建jackson核心对象 ObjectMapper
            ObjectMapper mapper = new ObjectMapper();
            //3、调用ObjectMapper相关方法进行转换
            String json = mapper.writeValueAsString(student);
            System.out.println(json);
        }
    }

**运行结果：**

![20190920133321294.jpg][]

### 注解： ###

1、@JsonIgnore：排除属性；
    2、@JsonFormat：属性值的格式化；

**示例：**

//注意注解是写在实体类中的
    package com.zibo;
    
    import com.fasterxml.jackson.annotation.JsonFormat;
    import com.fasterxml.jackson.annotation.JsonIgnore;
    
    import java.util.Date;
    
    public class Student {
        private String name;
        private int age;
        @JsonIgnore
        private boolean gender;
        @JsonFormat(pattern = "yyyy-MM-dd")
        private Date birthday;
    
        public String getName() {
            return name;
        }
    
        public void setName(String name) {
            this.name = name;
        }
    
        public int getAge() {
            return age;
        }
    
        public void setAge(int age) {
            this.age = age;
        }
    
        public boolean isGender() {
            return gender;
        }
    
        public void setGender(boolean gender) {
            this.gender = gender;
        }
    
        public Date getBirthday() {
            return birthday;
        }
    
        public void setBirthday(Date birthday) {
            this.birthday = birthday;
        }
    }

### 复杂的Java对象转JSON： ###

List：数组；

Map：与Java对象格式一致；

**代码示例：**

package com.zibo.test;
    
    import com.fasterxml.jackson.annotation.JsonFormat;
    import com.fasterxml.jackson.core.JsonProcessingException;
    import com.fasterxml.jackson.databind.ObjectMapper;
    import com.zibo.Student;
    import org.junit.Test;
    
    import java.util.*;
    
    public class JTest {
        @Test
        public void test1() throws Exception {
            //1、创建对象
            Student student1 = new Student();
            student1.setName("ZiBo");
            student1.setAge(23);
            student1.setGender(true);
            student1.setBirthday(new Date());
            Student student2 = new Student();
            student2.setName("DongMei");
            student2.setAge(23);
            student2.setGender(false);
            student2.setBirthday(new Date());
            Student student3 = new Student();
            student3.setName("zibo1");
            student3.setAge(23);
            student3.setGender(true);
            student3.setBirthday(new Date());
            List<Student> list = new ArrayList<>();
            list.add(student1);
            list.add(student2);
            list.add(student3);
            Map<Integer,Student> map = new HashMap<>();
            map.put(1,student1);
            map.put(2,student2);
            map.put(3,student3);
            //2、创建jackson核心对象 ObjectMapper
            ObjectMapper mapper = new ObjectMapper();
            //3、调用ObjectMapper相关方法进行转换
            String json1 = mapper.writeValueAsString(list);
            String json2 = mapper.writeValueAsString(map);
            System.out.println(json1);
            System.out.println(json2);
        }
    }

**运行结果：**

![watermark_type_ZmFuZ3poZW5naGVpdGk_shadow_10_text_aHR0cHM6Ly9ibG9nLmNzZG4ubmV0L3FxXzI5Njg5MzQz_size_16_color_FFFFFF_t_70 5][]

###  ###

### 6、JSON转Java对象 ###

### 代码示例： ###

[watermark_type_ZmFuZ3poZW5naGVpdGk_shadow_10_text_aHR0cHM6Ly9ibG9nLmNzZG4ubmV0L3FxXzI5Njg5MzQz_size_16_color_FFFFFF_t_70]: https://image.dandelioncloud.cn/pgy_files/images/2024/04/18/c27a8087c44644bd8e0191bd9f745994.jpg
[watermark_type_ZmFuZ3poZW5naGVpdGk_shadow_10_text_aHR0cHM6Ly9ibG9nLmNzZG4ubmV0L3FxXzI5Njg5MzQz_size_16_color_FFFFFF_t_70 1]: https://image.dandelioncloud.cn/pgy_files/images/2024/04/18/429d2a6580034c1e9d72d55887e4692d.jpg
[watermark_type_ZmFuZ3poZW5naGVpdGk_shadow_10_text_aHR0cHM6Ly9ibG9nLmNzZG4ubmV0L3FxXzI5Njg5MzQz_size_16_color_FFFFFF_t_70 2]: https://image.dandelioncloud.cn/pgy_files/images/2024/04/18/9dfe23ebf1c74ac5a3d8e2af03cc614e.jpg
[watermark_type_ZmFuZ3poZW5naGVpdGk_shadow_10_text_aHR0cHM6Ly9ibG9nLmNzZG4ubmV0L3FxXzI5Njg5MzQz_size_16_color_FFFFFF_t_70 3]: https://image.dandelioncloud.cn/pgy_files/images/2024/04/18/2918236e3aa04d16b3929973bb17013a.jpg
[watermark_type_ZmFuZ3poZW5naGVpdGk_shadow_10_text_aHR0cHM6Ly9ibG9nLmNzZG4ubmV0L3FxXzI5Njg5MzQz_size_16_color_FFFFFF_t_70 4]: https://image.dandelioncloud.cn/pgy_files/images/2024/04/18/8e6b899ae3ff44df83e1db849650ffb0.jpg
[https_pan.baidu.com_s_1-p9vJMNl5NiyOn0enaWtvw _twqo]: http://www.java2s.com/Code/Jar/j/Downloadjacksonjar.htm
[20190920133321294.jpg]: https://image.dandelioncloud.cn/pgy_files/images/2024/04/18/7180a06045c94e7f89944cd5c1e8d5c6.jpg
[watermark_type_ZmFuZ3poZW5naGVpdGk_shadow_10_text_aHR0cHM6Ly9ibG9nLmNzZG4ubmV0L3FxXzI5Njg5MzQz_size_16_color_FFFFFF_t_70 5]: https://image.dandelioncloud.cn/pgy_files/images/2024/04/18/836a227f48674322bbdab213fbc600e7.jpg