AJAX和JSON

蒋一清

已于 2023-09-29 17:54:02 修改

阅读量602

点赞数 4

分类专栏：前端基础文章标签： ajax json okhttp

于 2023-09-28 22:51:14 首次发布

本文链接：https://blog.csdn.net/keleID/article/details/133394497

版权

前端基础专栏收录该内容

3 篇文章 0 订阅

订阅专栏

1、AJAX：

AJAX（Asynchronous JavaScript and XML）是一种用于创建交互式、动态网页的技术。它允许网页在不重新加载整个页面的情况下与服务器进行异步通信，从而改善用户体验。以下是关于AJAX的一些重要信息：

异步通信：AJAX 的核心特性是异步通信，意味着在向服务器发送请求时，页面无需等待服务器的响应。这允许页面继续执行其他操作，同时等待响应。一旦响应可用，就会触发回调函数来处理数据。
JavaScript：AJAX 主要使用JavaScript来实现。通过JavaScript，可以创建HTTP请求（通常是GET或POST请求），并在后台发送这些请求。然后，JavaScript可以解析从服务器返回的响应数据，并将其插入到网页中，实现动态更新。
XML或JSON：虽然最初的名字中包含XML（eXtensible Markup Language），但实际上，现在更常见的是使用JSON（JavaScript Object Notation）作为数据的传输格式。JSON更轻量，易于处理，并且与JavaScript天然兼容。当然，仍然可以使用XML。
无需页面刷新：AJAX的一个重要优势是它可以在不刷新整个网页的情况下更新部分页面内容。这可以提高用户体验，因为页面可以动态地加载新数据，而不需要重新加载整个页面。
用途：AJAX广泛用于各种Web应用程序，包括在线邮件客户端、社交媒体网站、购物车更新、实时通讯等。任何需要实时或部分页面更新的情况都可以受益于AJAX技术。
浏览器支持：AJAX已经成为现代Web开发的标准之一，并且得到了主流浏览器的广泛支持。开发人员可以使用原生JavaScript或AJAX库（如jQuery、Axios等）来简化AJAX请求的编写和处理。

总之，AJAX是一种强大的技术，使Web应用程序更加动态和交互，提高了用户体验，并为开发人员提供了更多的灵活性和控制权，使他们能够实现各种复杂的Web功能。

同步的话：比如你和对象打电话，永远是一个人在讲一个人在听，不可能同时讲话也不可能同时倾听是吧，一个在说话，另一个什么都干只是在那倾听。

客户端必须等待服务器端的响应。在等待的期间客户端不能做其他操作。

异步的话：就是比如你和对象打电话，你对象在讲话，你在打游戏，你没有停下来听，忙着你自己的事情，等她讲完然后去回应她

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

2、AJAX的实现方式

1、基于原生的方式：

客户端：

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>基于js</title>
</head>
<script>
    function fun() {
        //法送异步请求

        //1.创建核心对象
        // 创建 XMLHttpRequest 对象
        const xhttp = new XMLHttpRequest();

        // 定义回调函数
        xhttp.onload = function () {
            // 您可以在这里使用数据
        }

        // 建立连接
        /*
        * 参数:
        *       第一个: 请求方式
        *       如果是get方式,请求参数那在URL后面拼接,如果是post请求,请求参数在sent(String)
        *       第二个: 请求的url
        *       第三个: 同步(ture)或者异步(false)请求
        * */
        xhttp.open("GET", "/web_tomcat/AjaxServletDemo1?username=张三", true);

        //xhttp.open("GET", "/web_tomcat/AjaxServletDemo1?username=张三",false);
        //发送请求
        xhttp.send();//psot的话xhttp.send(String) String是请求的参数


        //接收并且处理来自服务器的响应结果
        /*
        * 获取方式 xhttp.responseText  但是要在服务器相应以后才能或者,不然获取不到数据*/

        //当xhttp对象的就绪状态发生改变的时候会触发事件onreadystatechange 然后执行函数
        xhttp.onreadystatechange = function () {
            //判断readyState是不是4  0: 请求未初始化

            /*1: 服务器连接已建立
            2: 请求已接收
            3: 正在处理请求
            4: 请求已完成且响应已就绪*/

            //判断status响应状态是不是200

            /*200: "OK"
            403: "Forbidden"
            404: "Page not found"*/

            if (this.readyState == 4 && this.status == 200) {
                //都满足,获取结果
                let responseText = this.responseText;
                alert(responseText)
            }
        };


    }

</script>
<body>


<input type="button" value="发送异步请求" onclick="fun()">
<input type="text">
</body>
</html>

服务器端：

package com.songzhishu.web.servlet;

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;

/**
 * @BelongsProject: web_tomcat
 * @BelongsPackage: com.songzhishu.web.servlet
 * @Author: 斗痘侠
 * @CreateTime: 2023-09-29  10:06
 * @Description: 异步请求
 * @Version: 1.0
 */
@WebServlet("/AjaxServletDemo1")
public class AjaxServletDemo1 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 {
        req.setCharacterEncoding("utf-8");
        resp.setContentType("text/html;charset=utf-8");
        //获取请求参数
        String username = req.getParameter("username");


        //业务处理
        /*
        * 如果是同步的话,那么这个个时候服务器在正在进行业务处理,那么客户端只能得等待,不能做其他的操作,但是如果是异步请求的话,此时客户端可以
        * 进行其他的操作*/
        //让当前线程睡6秒
        try {
            Thread.sleep(6000);
        } catch (InterruptedException e) {
            e.printStackTrace();
        }
        //打印
        System.out.println(username);

        //响硬
        resp.getWriter().write("你好"+username);
    }
}

这这种方式比骄傲繁琐，细节参考w3school 在线教程

2、基于jQuery的方式；

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>基于js</title>
</head>
<script src="../js/jquery-3.3.1.min.js"></script>
<script>
    function fun() {
        //使用$.ajax的方式发送异步请求
        /*$.ajax({
            /!*
            * url  请求的url
            * type 请求的方式
            * data 携带的参数
            *      "username=张三&age=23"  ----方式一
            *      {
            *       "username":"zhngsan",
            *       "age":23
            *       };                    ----方式二  以json的方式发送请求数据
            * success   回调函数  响应成功后会执行这个这个函数
            * error     回调函数  响应错误会执行这个函数
            *
            * datatype   响应数据的格式  Xml html txt Josn
            * *!/
            url:"/web_tomcat/AjaxServletDemo1",
            type:"POST",
            data:{
                      "username":"张三",
                      "age":23
                },
            success:function (data) {
                alert(data)
            },
            error:function () {
              alert("出错啦")
            }
        });*/

        //使用$.get() 发送请求
        /*
        * $.get(URL,callback);
        *
        * */
        /*$.get("/web_tomcat/AjaxServletDemo1", {
                "username": "张三",
                "age": 23
            }, function (data) {
                alert(data);
            },"text"
        );*/

        //使用$.psot()
        $.post("/web_tomcat/AjaxServletDemo1", {
                "username": "张三",
                "age": 23
            }, function (data) {
                alert(data);
            },"text"
        );

    }

</script>
<body>


<input type="button" value="发送异步请求" onclick="fun()">
<input type="text">
</body>
</html>

3、JSON：

JSON 是一种轻量级的数据交换格式，通常用于在不同应用程序之间传输数据。以下是关于 JSON 的重要信息：

数据格式：JSON 是一种文本格式，它使用易于理解的键值对（key-value pairs）来表示数据。每个键（key）都是一个字符串，每个值（value）可以是字符串、数字、布尔值、数组、对象、null等数据类型。
易于阅读和编写：JSON 的语法非常简单和直观，使人们可以轻松地阅读和编写。这也有助于人们快速理解数据结构。
数据结构：JSON 支持复杂的数据结构，包括嵌套对象和数组。这使得它非常适合表示各种类型的数据，从简单的配置文件到复杂的数据集。
跨平台和语言：JSON 不限于特定的编程语言或平台，几乎所有现代编程语言都有 JSON 的解析和生成库。这意味着可以在不同的应用程序之间轻松交换数据，而无需考虑它们使用的编程语言。

示例：以下是一个 JSON 示例，表示一个简单的人员信息：

{
  "name": "John Doe",
  "age": 30,
  "isStudent": false,
  "hobbies": ["reading", "swimming"],
  "address": {
    "street": "123 Main St",
    "city": "Anytown"
  }
}

用途：JSON 在Web开发中广泛应用，特别是在Web API中用于数据传输。它还用于配置文件、日志文件、NoSQL数据库等各种情况。
与XML的比较：JSON与XML是两种常见的数据交换格式。与XML相比，JSON更轻量、更易于处理，并且更适合在JavaScript中使用，因为它直接映射到JavaScript对象。

总之，JSON是一种通用的数据格式，它在现代应用程序中起着重要作用，简化了数据交换和处理的过程。它的简洁性和易读性使其成为许多应用程序和Web服务的首选数据表示方式。

1、基本规则：

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

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>JSON</title>
</head>
<script>
    //定义基本格式
    var person = {
        "name": "张三", age: 23, 'gender': true
    }
    //alert(person);

    //获取值
    //alert(person.name);
    //alert(person["age"]);


    //嵌套方式  []---->{}
    var persons = [{"name": "张三", "age": 23, "gender": true},
        {"name": "李四", "age": 24, "gender": true},
        {"name": "王五", "age": 25, "gender": false}];
    //alert(persons);
    //alert(persons[1].name)

    //嵌套方式  {}---->[]
    var personss = {
        "person": [
            {"name": "张三", "age": 23, "gender": true},
            {"name": "李四", "age": 24, "gender": true},
            {"name": "王五", "age": 25, "gender": false}
        ]
    }
    //alert(personss)

    //获取值
    //alert(personss.person[2].name)


    //因为定义的方式不同所以获取值的方式也不太一样


    //遍历

    //获取person对象的所有的数据
    for (let personKey in person) {
        alert(personKey + "=" + person[personKey])//键值
    }
    alert("结束")

    //获取persons的所有值
    for (let i = 0; i < persons.length; i++) {
        let person = persons[i];
        for (let personKey in person) {
            alert(personKey + "*" +person[personKey]);
        }
    }

    //获取personss的所有值
    let personk = personss.person;  //数组
    for (let i = 0; i < personk.length; i++){
        let personkElement = personk[i];
        for (let personkElementKey in personkElement) {
            alert(personkElementKey +"-"+personkElement[personkElementKey])

        }
    }


</script>
<body>

</body>
</html>

2、JSON和Java对象的相互转换：

1、JSON解析器：

JSON解析器是一种程序或库，用于将JSON（JavaScript Object Notation）格式的数据解析为程序可以使用的数据结构。这个过程通常涉及将JSON文本转换为相应的数据对象，以便在程序中进行操作、处理和使用。在许多编程语言中，都有内置的JSON解析器或者第三方库，使得开发人员能够轻松地将JSON数据转换为其所在语言支持的数据类型

java中常见的解析器有Jsonlib，Gson，fastjson，jackson，其中Jackson是一个流行的JSON处理库，它提供了高性能的JSON解析和生成功能。它支持JSON与Java对象之间的双向映射。也是spring boot 框架的内置解析器。
   2. Java对象转换JSON
       1. 使用步骤：
           1. 导入jackson的相关jar包
           2. 创建Jackson核心对象 ObjectMapper
           3. 调用ObjectMapper的相关方法进行转换

package com.songzhishu.web.test;

import com.fasterxml.jackson.databind.ObjectMapper;
import com.songzhishu.web.domain.Person;
import org.junit.Test;

import java.io.FileWriter;
import java.io.IOException;

/**
 * @BelongsProject: web_tomcat
 * @BelongsPackage: com.songzhishu.web.test
 * @Author: 斗痘侠
 * @CreateTime: 2023-09-29  14:53
 * @Description: 测试转换
 * @Version: 1.0
 */
public class JacksonTest1 {
    //java对象转换成Json
    @Test
    public void test1() throws IOException {
        //创建对象
        Person person = new Person("张三",23,"女");

        //创建Jsackson的核心对象 objectMapper
        ObjectMapper mapper = new ObjectMapper();

        //转换
        /*      转换的方法:
        *               writerValue(参数1,obj)
        *                   这个方法有很多的重载的方式 通过传递不同的参数
        *                   file  将obj对象转换成为Json字符串并且将Json字符串数据填充到字符流的文件中
        *                   writer 将obj对象转换成为Json字符串并且将Json字符串数据填充到字符输出流中
        *                   outputstream 将obj对象转换成Json字符串,并且将Json数据填充到字节输出流中
        *               writerValueString(obj) 将对象转换成Json字符串
        * */
        String s = mapper.writeValueAsString(person);
        //System.out.println(s);

        //将数据写入到d盘
        //mapper.writeValue(new File("d://a.txt"),person);
        
        //将数据关联到writer中
        mapper.writeValue(new FileWriter("d://b.txt"),person);

    }
}

2. 注解：

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

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

package com.songzhishu.web.test;

import com.fasterxml.jackson.core.JsonProcessingException;
import com.fasterxml.jackson.databind.ObjectMapper;
import com.songzhishu.web.domain.Person;
import org.junit.Test;

import java.io.FileWriter;
import java.io.IOException;
import java.util.ArrayList;
import java.util.Collections;
import java.util.Date;
import java.util.HashMap;

/**
 * @BelongsProject: web_tomcat
 * @BelongsPackage: com.songzhishu.web.test
 * @Author: 斗痘侠
 * @CreateTime: 2023-09-29  14:53
 * @Description: 测试转换
 * @Version: 1.0
 */
public class JacksonTest1 {
    //java对象转换成Json
    @Test
    public void test1() throws IOException {
        //创建对象
        Person person = new Person("张三", 23, "女", new Date());

        //创建Jsackson的核心对象 objectMapper
        ObjectMapper mapper = new ObjectMapper();

        //转换
        /*      转换的方法:
         *               writerValue(参数1,obj)
         *                   这个方法有很多的重载的方式 通过传递不同的参数
         *                   file  将obj对象转换成为Json字符串并且将Json字符串数据填充到字符流的文件中
         *                   writer 将obj对象转换成为Json字符串并且将Json字符串数据填充到字符输出流中
         *                   outputstream 将obj对象转换成Json字符串,并且将Json数据填充到字节输出流中
         *               writerValueString(obj) 将对象转换成Json字符串
         * */
        String s = mapper.writeValueAsString(person);
        //System.out.println(s);

        //将数据写入到d盘
        //mapper.writeValue(new File("d://a.txt"),person);

        //将数据关联到writer中
        mapper.writeValue(new FileWriter("d://b.txt"), person);

    }


    @Test
    public void test2() throws JsonProcessingException {
        Person person = new Person("张三", 23, "女", new Date());

        //转换
        ObjectMapper mapper = new ObjectMapper();
        String s = mapper.writeValueAsString(person);
        System.out.println(s);

        /*
        直接输出的样式{"name":"张三","age":23,"gender":"女","brithday":1695973073829} 日期有点太难看了 咋办

        要么我就不转换日期  要么我改变输出的格式

        第一种在生日的属性上 加上一个注解     @JsonIgnore  //忽略该字端
        输出 {"name":"张三","age":23,"gender":"女"}

        但是这种注解的方式不太友好，就是不能因为不好看就不要这数据吧

        第二种 格式转换  @JsonFormat(pattern = "yyyy-MM-dd")
        {"name":"张三","age":23,"gender":"女","brithday":"2023-09-29"}

        */
    }


    //复杂格式的转换
    @Test
    public void test3() throws JsonProcessingException {
        Person person1 = new Person("张三", 23, "女", new Date());
        Person person2 = new Person("李四", 24, "男", new Date());
        Person person3 = new Person("王五", 25, "男", new Date());

        //集合
        ArrayList<Person> list = new ArrayList<>();
        Collections.addAll(list,person1,person2,person3);

        //创建对象
        ObjectMapper mapper = new ObjectMapper();
        String s = mapper.writeValueAsString(list);
        System.out.println(s);


    }

    //map集合
    @Test
    public void test4() throws JsonProcessingException {
        //创建map
        HashMap<String, Object> hashMap = new HashMap<>();
        hashMap.put("name","李四");
        hashMap.put("age",24);
        hashMap.put("gender","女");

        //创建对象
        ObjectMapper mapper = new ObjectMapper();
        String s = mapper.writeValueAsString(hashMap);
        System.out.println(s);

    }

}

3、 JSON转为Java对象

       1. 导入jackson的相关jar包
       2. 创建Jackson核心对象 ObjectMapper
       3. 调用ObjectMapper的相关方法进行转换
           1. readValue(json字符串数据,Class)


    //json字符串转换成java对象
    @Test
    public  void  test5() throws IOException {
        //初始化json字符串

        String Json="{\"gender\":\"女\",\"name\":\"李四\",\"age\":24}";

        //创建对象
        ObjectMapper mapper = new ObjectMapper();
        Person person = mapper.readValue(Json, Person.class);
        System.out.println(person);
    }
}

蒋一清

关注

4
点赞
踩
1

收藏

觉得还不错? 一键收藏
0
评论
AJAX和JSON

当然，仍然可以使用XML。然后，JavaScript可以解析从服务器返回的响应数据，并将其插入到网页中，实现动态更新。总之，AJAX是一种强大的技术，使Web应用程序更加动态和交互，提高了用户体验，并为开发人员提供了更多的灵活性和控制权，使他们能够实现各种复杂的Web功能。：比如你和对象打电话，永远是一个人在讲一个人在听，不可能同时讲话也不可能同时倾听是吧，一个在说话，另一个什么都干只是在那倾听。就是比如你和对象打电话，你对象在讲话，你在打游戏，你没有停下来听，忙着你自己的事情，等她讲完然后去回应她。
复制链接

扫一扫

专栏目录