AJAX和JSON

这篇具有很好参考价值的文章主要介绍了AJAX和JSON。希望对大家有所帮助。如果存在错误或未考虑完全的地方,请大家不吝赐教,您也可以点击"举报违法"按钮提交疑问。

1、AJAX:

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

  1. 异步通信:AJAX 的核心特性是异步通信,意味着在向服务器发送请求时,页面无需等待服务器的响应。这允许页面继续执行其他操作,同时等待响应。一旦响应可用,就会触发回调函数来处理数据。

  2. JavaScript:AJAX 主要使用JavaScript来实现。通过JavaScript,可以创建HTTP请求(通常是GET或POST请求),并在后台发送这些请求。然后,JavaScript可以解析从服务器返回的响应数据,并将其插入到网页中,实现动态更新。

  3. XML或JSON:虽然最初的名字中包含XML(eXtensible Markup Language),但实际上,现在更常见的是使用JSON(JavaScript Object Notation)作为数据的传输格式。JSON更轻量,易于处理,并且与JavaScript天然兼容。当然,仍然可以使用XML。

  4. 无需页面刷新:AJAX的一个重要优势是它可以在不刷新整个网页的情况下更新部分页面内容。这可以提高用户体验,因为页面可以动态地加载新数据,而不需要重新加载整个页面。

  5. 用途:AJAX广泛用于各种Web应用程序,包括在线邮件客户端、社交媒体网站、购物车更新、实时通讯等。任何需要实时或部分页面更新的情况都可以受益于AJAX技术。

  6. 浏览器支持: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 的重要信息:

  1. 数据格式:JSON 是一种文本格式,它使用易于理解的键值对(key-value pairs)来表示数据。每个键(key)都是一个字符串,每个值(value)可以是字符串、数字、布尔值、数组、对象、null等数据类型。

  2. 易于阅读和编写:JSON 的语法非常简单和直观,使人们可以轻松地阅读和编写。这也有助于人们快速理解数据结构。

  3. 数据结构:JSON 支持复杂的数据结构,包括嵌套对象和数组。这使得它非常适合表示各种类型的数据,从简单的配置文件到复杂的数据集。

  4. 跨平台和语言:JSON 不限于特定的编程语言或平台,几乎所有现代编程语言都有 JSON 的解析和生成库。这意味着可以在不同的应用程序之间轻松交换数据,而无需考虑它们使用的编程语言。

  5. 示例:以下是一个 JSON 示例,表示一个简单的人员信息:

    {
      "name": "John Doe",
      "age": 30,
      "isStudent": false,
      "hobbies": ["reading", "swimming"],
      "address": {
        "street": "123 Main St",
        "city": "Anytown"
      }
    }
    
  6. 用途:JSON 在Web开发中广泛应用,特别是在Web API中用于数据传输。它还用于配置文件、日志文件、NoSQL数据库等各种情况。

  7. 与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)文章来源地址https://www.toymoban.com/news/detail-728884.html


    //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);
    }
}

到了这里,关于AJAX和JSON的文章就介绍完了。如果您还想了解更多内容,请在右上角搜索TOY模板网以前的文章或继续浏览下面的相关文章,希望大家以后多多支持TOY模板网!

本文来自互联网用户投稿,该文观点仅代表作者本人,不代表本站立场。本站仅提供信息存储空间服务,不拥有所有权,不承担相关法律责任。如若转载,请注明出处: 如若内容造成侵权/违法违规/事实不符,请点击违法举报进行投诉反馈,一经查实,立即删除!

领支付宝红包 赞助服务器费用

相关文章

  • ajax & axios & json

    目录 一、ajax 1. 概念 2. 实现方式    (1)原生的JS实现方式(了解)       (2) JQeury实现方式 二、axios  1. axios 介绍 2. axios特点 3. 官方文档 4. axios使用 (1) axios的基本使用(发送get/post请求) (2)axios基本使用-获取数据 (3)axios基本使用-传参 (4)axios基本使用-发布

    2024年02月15日
    浏览(35)
  • Ajax 获取 JSON数据

    Ajax 全称“Asynchronous JavaScript and XML”,译为“异步 JavaScript 和 XML”,程序员们习惯称之为“阿贾克斯”,通过 Ajax 我们可以异步在服务器与客户端之间传递数据。在 Ajax 中,普遍使用 JSON 作为传输数据的格式。 一般情况下,我们可以通过 JavaScript 来发送 Ajax 请求,并接收响

    2023年04月12日
    浏览(38)
  • AJAX和JSON

            AJAX(Asynchronous JavaScript and XML)是一种用于创建交互式、动态网页的技术。它允许网页在不重新加载整个页面的情况下与服务器进行异步通信,从而改善用户体验。以下是关于AJAX的一些重要信息: 异步通信 :AJAX 的核心特性是异步通信,意味着在向服务器发送请

    2024年02月07日
    浏览(35)
  • AJAX与JSON

    AJAX(Asynchronous JavaScript And XML):异步的 JavaScript 和 XML 本身不是一种新技术,而是多个技术综合。用于快速创建动态网页的技术 一般的网页如果需要更新内容,必需重新加载个页面。 而 Ajax 通过浏览器与服务器进行少量数据交换,就可以使网页实现异步更新。也就是在不重新

    2024年02月07日
    浏览(32)
  • JSON和AJAX

    AJAX(Asynchronous JavaScript and XML)是一种无需重新加载整个页面就能更新部分网页的技术。它使用JavaScript的XMLHttpRequest对象来发送异步请求,并获取服务器响应。AJAX可以用于在不刷新页面的情况下更新网页内容、与服务器交换数据并更新部分网页,提高用户体验。 JSON(JavaScr

    2024年01月24日
    浏览(33)
  • JavaWeb学习|JSON与AJAX

    所有知识点都来自互联网,进行总结和梳理,侵权必删。 引用来源:尚硅谷最新版JavaWeb全套教程,java web零基础入门完整版 JSON (JavaScript Object Notation) 是一种轻量级的数据交换格式。易于人阅读和编写。同时也易于机器解析和生成。JSON采用完全独立于语言的文本格式,而且很

    2024年02月22日
    浏览(46)
  • AJAX异步请求&JSON数据格式

    目录 前言 1.AJAX的实现方式 1.1原生的js实现方式 1.2JQuery实现方式 2.1语法 3.JSON数据和Java对象的相互转换 3.1将JSON转换为Java对象 3.2将Java对象转换为JSON AJAX:ASynchronous JavaScript And XML    异步的JavaScript 和 XML。 Ajax 是一种在无需重新加载整个网页的情况下,能够更新部分网页的技

    2024年02月16日
    浏览(42)
  • 异步请求(Ajax,axios,json)

    同步/异步请求 表单(前端)向后端发送请求,属于同步请求 同步 : 发一个请求, 给一个回应, 会用回应的内容 覆盖 掉浏览器中内容,这样会打断前端其他的正常操作,在现在的前端中,显得不太友好。 异步 : 不同步 前端正常输入时,可以同时与后端进行交互,后端响应的数据

    2024年02月12日
    浏览(53)
  • AJAX与JSON数据交互处理

    Ajax即 A synchronous  J avascript  A nd  X ML(异步JavaScript和XML)在 2005年被Jesse James Garrett提出的新术语,用来描述一种使用现有技术集合的‘新’方法,包括: 或 XHTML, CSS, JavaScript, DOM, XML, XSLT, 以及最重要的XMLHttpRequest。 [3]  使用Ajax技术网页应用能够快速地将增量更新呈现在

    2024年02月09日
    浏览(47)
  • jackson库收发json格式数据和ajax发送json格式的数据

    一、jackson库收发json格式数据   jackson库是maven仓库中用来实现组织json数据功能的库。 json格式  json格式一个组织数据的字符文本格式,它用键值对的方式存贮数据,json数据都是有一对对键值对组成的,键只能是字符串,用双引号包括;值可以是字符串,数字,布尔表达式

    2024年02月13日
    浏览(46)

觉得文章有用就打赏一下文章作者

支付宝扫一扫打赏

博客赞助

微信扫一扫打赏

请作者喝杯咖啡吧~博客赞助

支付宝扫一扫领取红包,优惠每天领

二维码1

领取红包

二维码2

领红包