Ajax 和 Json 学习笔记

素颜马尾好姑娘i 2023-07-03 02:50 2阅读 0赞

# Ajax： #

## ** 1. 概念**： ##

ASynchronous JavaScript And XML   ，异步的JavaScript 和 XML。  
        **1. 异步和同步**：客户端和服务器端相互通信的基础上。  
            \* 客户端必须等待服务器端的响应。在等待的期间客户端不能做其他操作。  
            \* 客户端不需要等待服务器端的响应。在服务器处理请求的过程中，客户端可以进行其他的操作。

Ajax 是一种在无需重新加载整个网页的情况下，能够更新部分网页的技术。   
            通过在后台与服务器进行少量数据交换，Ajax 可以使网页实现异步更新。这意味着可以在不重新加载整个网页的情况下，对网页的某部分进行更新。  
            **传统的网页（不使用 Ajax）如果需要更新内容，必须重载整个网页页面。**

![watermark_type_ZmFuZ3poZW5naGVpdGk_shadow_10_text_aHR0cHM6Ly9ibG9nLmNzZG4ubmV0L3FxXzQwNzYzOTI5_size_16_color_FFFFFF_t_70][]

## 2. 实现方式： ##

1. 原生的JS实现方式（**仅供了解，实际开发并不使用**）

**2. JQeury实现方式（开发使用，重点，有3种写法，根据需求选择）**

1. **$.ajax()函数： **

\* 语法：$.ajax(\{键值对\});  
使用$.ajax()发送异步请求

**2. $.get()函数 ，发送get请求：**

\* 语法：$.get(url, \[data\], \[callback\], \[type\])  
\* 参数：  
\* url：请求路径  
\* data：请求参数，可以不写参数，就写个\{\}也可以请求到数据。  
\* callback：回调函数  
\* type：响应结果的类型

**3. $.post()函数 ，发送get请求：**

\* 语法：$.post(url, \[data\], \[callback\], \[type\])  
\* 参数：  
\* url：请求路径  
\* data：请求参数，可以不写参数，就写个\{\}也可以请求到数据。  
\* callback：回调函数  
\* type：响应结果的类型

如果想用alert（）函数显示出ajax从servlet请求道的数据，可以用这个函数显示：

alert(JSON.stringify(data));

如果直接用alert(data)，会显示 " \[ Object Object\]  " 。

--------------------

# Json： #

## 1. 概念： ##

JavaScript Object Notation        JavaScript对象表示法。

\* json现在多用于存储和交换文本信息的语法  
\* 进行数据的传输  
\* JSON 比 XML 更小、更快，更易解析。

## 2. 语法： ##

**1. 基本规则**  
\* 数据在名称/值对中：json数据是由键值对构成的  
\* 键用引号(单双都行)引起来，也可以不使用引号  
\* 值得取值类型：  
                    1. 数字（整数或浮点数）  
                    2. 字符串（在双引号中）  
                    3. 逻辑值（true 或 false）  
                    4. 数组（在方括号中）    \{"persons":\[\{\},\{\}\]\}  
                    5. 对象（在花括号中） \{"address":\{"province"："陕西"....\}\}  
                    6. null  
\* 数据由逗号分隔：多个键值对由逗号分隔  
\* 花括号保存对象：使用\{ \}定义json 格式  
\* 方括号保存数组：\[ \]

**2. 获取数据:**  
1. json对象.键名  
2. json对象\["键名"\]  
3. 数组对象\[索引\]  
4. 遍历

//Person为自己已经定义的Java对象，有name,age,gender,birthday4个属性，及getter和setter方法。
    
    <script>
            var person = {"name":"Tom","age":20,"gender":"true"};
            var name = person.name;
            document.write("name : "+name+"<br/>");
            var age = person["age"];
            document.write("age : "+age+"<br/>"+"<hr/>");
    
    
            var persons = {
                    "persons":[
                        {"name":"Tom","age":20,"gender":"true"},
                        {"name":"Tony","age":21,"gender":"true"},
                        {"name":"Tina","age":22,"gender":"false"}
                    ]
                };
            var name1 = persons.persons[2].name;
            document.write("name : "+name1+"<br/>");
            var gender = persons.persons[2].gender;
            document.write("gender : "+gender+"<br/>"+"<hr/>");
    
            var ps = [
                {"name":"Tom","age":20,"gender":"true"},
                {"name":"Tony","age":21,"gender":"true"},
                {"name":"Tina","age":22,"gender":"false"}
            ];
            var gender1 = ps[2].gender;
            document.write("gender : "+gender1+"<br/>"+"<br/>"+"<br/>"+"<br/>");
    
    
    
            //遍历方法
            for (var key in person)
            {
                document.write(key+" : "+person[key]+"<br/>");
            }
    
            document.write("<hr/>")
    
            for (var i=0;i<ps.length;i++)
            {
                var p = ps[i];
                for (var key in p)
                {
                    document.write(key+" : "+p[key]+"<br/>");
                }
            }
    
    
    
        </script>

### 3. JSON数据和Java对象的相互转换 ###

![watermark_type_ZmFuZ3poZW5naGVpdGk_shadow_10_text_aHR0cHM6Ly9ibG9nLmNzZG4ubmV0L3FxXzQwNzYzOTI5_size_16_color_FFFFFF_t_70 1][]

**\* JSON解析器：**  
\* 常见的解析器：Jsonlib，Gson，fastjson，jackson

这里以jackson为例：（使用jackson需要导包，相关的jar包下载地址：[https://download.csdn.net/download/qq\_40763929/12127606][https_download.csdn.net_download_qq_40763929_12127606]）

**1. JSON转为Java对象**  
1. 导入jackson的相关jar包  
2. 创建Jackson核心对象 ObjectMapper  
3. 调用ObjectMapper的相关方法进行转换

**2. Java对象转换JSON**  
使用步骤：  
1. 导入jackson的相关jar包  
2. 创建Jackson核心对象 ObjectMapper  
3. 调用ObjectMapper的相关方法进行转换

**1. 转换方法：**

writeValue(参数1，obj):
    
    参数1：
    File：将obj对象转换为JSON字符串，并保存到指定的文件中
    Writer：将obj对象转换为JSON字符串，并将json数据填充到字符输出流中
    OutputStream：将obj对象转换为JSON字符串，并将json数据填充到字节输出流中
    
    
    例如：
     ObjectMapper mapper = new ObjectMapper();
    mapper.writeValue(response.getWriter(),Object);//Object自己改

writeValueAsString(obj):将对象转为json字符串

**2. 注解：**  
1. @JsonIgnore：排除属性。  
2. @JsonFormat：属性值得格式化  
\* @JsonFormat(pattern = "yyyy-MM-dd")

**3. 复杂java对象转换**  
1. List：数组  
2. Map：对象格式一致

package cn.itcast.test;
    
    import cn.itcast.domain.Person;
    import com.fasterxml.jackson.databind.ObjectMapper;
    import org.junit.Test;
    
    import java.io.FileWriter;
    import java.util.*;
    
    public class JacksonTest {
    
    
        //Java对象转为JSON字符串
        @Test
        public void test1() throws Exception {
            //1.创建Person对象
            Person p  = new Person();
            p.setName("张三");
            p.setAge(23);
            p.setGender("男");
    
            //2.创建Jackson的核心对象  ObjectMapper
            ObjectMapper mapper = new ObjectMapper();
            //3.转换
            /*
    
                转换方法：
                    writeValue(参数1，obj):
                        参数1：
                            File：将obj对象转换为JSON字符串，并保存到指定的文件中
                            Writer：将obj对象转换为JSON字符串，并将json数据填充到字符输出流中
                            OutputStream：将obj对象转换为JSON字符串，并将json数据填充到字节输出流中
                    writeValueAsString(obj):将对象转为json字符串
    
             */
            String json = mapper.writeValueAsString(p);
            //{"name":"张三","age":23,"gender":"男"}
            //System.out.println(json);//{"name":"张三","age":23,"gender":"男"}
    
    
    
            //writeValue，将数据写到d://a.txt文件中
            //mapper.writeValue(new File("d://a.txt"),p);
    
            //writeValue.将数据关联到Writer中
            mapper.writeValue(new FileWriter("d://b.txt"),p);
        }
    
    
        @Test
        public void test2() throws Exception {
            //1.创建Person对象
            Person p = new Person();
            p.setName("张三");
            p.setAge(23);
            p.setGender("男");
            p.setBirthday(new Date());
    
    
    
            //2.转换
            ObjectMapper mapper = new ObjectMapper();
            String json = mapper.writeValueAsString(p);
    
            System.out.println(json);//{"name":"张三","age":23,"gender":"男","birthday":1530958029263}
                                    //{"name":"张三","age":23,"gender":"男","birthday":"2018-07-07"}
        }
    
    
    
        @Test
        public void test3() throws Exception {
            //1.创建Person对象
            Person p = new Person();
            p.setName("张三");
            p.setAge(23);
            p.setGender("男");
            p.setBirthday(new Date());
    
            Person p1 = new Person();
            p1.setName("张三");
            p1.setAge(23);
            p1.setGender("男");
            p1.setBirthday(new Date());
    
            Person p2 = new Person();
            p2.setName("张三");
            p2.setAge(23);
            p2.setGender("男");
            p2.setBirthday(new Date());
    
    
            //创建List集合
            List<Person> ps = new ArrayList<Person>();
            ps.add(p);
            ps.add(p1);
            ps.add(p2);
    
    
            //2.转换
            ObjectMapper mapper = new ObjectMapper();
            String json = mapper.writeValueAsString(ps);
            // [{},{},{}]
            //[{"name":"张三","age":23,"gender":"男","birthday":"2018-07-07"},{"name":"张三","age":23,"gender":"男","birthday":"2018-07-07"},{"name":"张三","age":23,"gender":"男","birthday":"2018-07-07"}]
            System.out.println(json);
        }
    
        @Test
        public void test4() throws Exception {
            //1.创建map对象
            Map<String,Object> map = new HashMap<String,Object>();
            map.put("name","张三");
            map.put("age",23);
            map.put("gender","男");
    
    
            //2.转换
            ObjectMapper mapper = new ObjectMapper();
            String json = mapper.writeValueAsString(map);
            //{"name":"张三","age":23,"gender":"男"}
            System.out.println(json);//{"gender":"男","name":"张三","age":23}
        }
    
        //演示 JSON字符串转为Java对象
        @Test
        public void test5() throws Exception {
           //1.初始化JSON字符串
            String json = "{\"gender\":\"男\",\"name\":\"张三\",\"age\":23}";
    
            //2.创建ObjectMapper对象
            ObjectMapper mapper = new ObjectMapper();
            //3.转换为Java对象 Person对象
            Person person = mapper.readValue(json, Person.class);
    
            System.out.println(person);
        }
    
    }

[watermark_type_ZmFuZ3poZW5naGVpdGk_shadow_10_text_aHR0cHM6Ly9ibG9nLmNzZG4ubmV0L3FxXzQwNzYzOTI5_size_16_color_FFFFFF_t_70]: https://img-blog.csdnimg.cn/20200131202755925.bmp?x-oss-process=image/watermark,type_ZmFuZ3poZW5naGVpdGk,shadow_10,text_aHR0cHM6Ly9ibG9nLmNzZG4ubmV0L3FxXzQwNzYzOTI5,size_16,color_FFFFFF,t_70
[watermark_type_ZmFuZ3poZW5naGVpdGk_shadow_10_text_aHR0cHM6Ly9ibG9nLmNzZG4ubmV0L3FxXzQwNzYzOTI5_size_16_color_FFFFFF_t_70 1]: https://img-blog.csdnimg.cn/20200131205630920.bmp?x-oss-process=image/watermark,type_ZmFuZ3poZW5naGVpdGk,shadow_10,text_aHR0cHM6Ly9ibG9nLmNzZG4ubmV0L3FxXzQwNzYzOTI5,size_16,color_FFFFFF,t_70
[https_download.csdn.net_download_qq_40763929_12127606]: https://download.csdn.net/download/qq_40763929/12127606