JSON与Ajax

已于 2023-09-27 17:32:29 修改
阅读量628 收藏 1
点赞数 1
分类专栏： Java 文章标签： ajax json java
于 2021-09-23 21:34:14 首次发布
版权声明：本文为博主原创文章，遵循 CC 4.0 BY-SA 版权协议，转载请附上原文出处链接和本声明。
本文链接：https://blog.csdn.net/m0_52994499/article/details/120440796
版权

文章目录

提示：以下是本篇文章正文内容，下面案例可供参考

一、什么是JSON？

JSON(JavaScript Object Notation, JS 对象标记) 是一种轻量级的数据交换格式。它基于 ECMAScript (W3C制定的JS规范)的一个子集，采用完全独立于编程语言的文本格式来存储和表示数据。简洁和清晰的层次结构使得 JSON 成为理想的数据交换语言。 易于人阅读和编写，同时也易于机器解析和生成，并有效地提升网络传输效率。

1.2 JSON语法

  • [] 表示数组
  • {} 表示对象
  • “” 表示是属性名或字符串类型的值
  • : 表示属性和值之间的间隔符
  • , 表示多个属性的间隔符或者是多个元素的间隔符

二、JSON解析【重点】

要解析的字符串：将字符串解析为Java对象

2.1 在前端页面创建对象

前端代码如下（示例）：

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>Title</title>
</head>
<body>
    
</body>
<script type="application/javascript">
<!--    js创建对象-->
    function User(id,name,age) {
        this.id = id;
        this.name = name;
        this.age = age;
    }

    var user = new User(1,"李白",35)
    document.write(user.id+"---"+user.name+"---"+user.age)
    document.write("<hr>")
</script>

<script type="application/javascript">
<!--    JSON创建对象-->
    var user1 = {
        id:"1001",
        name:"韩信",
        age:"25"
    }
    document.write(user1.id+"---"+user1.name+"---"+user1.age)
    document.write("<hr>")

    //JSON创建对象数组
    var users = [
        {id:"1002",name:"西施",age:"20"},
        {id:"1003",name:"王昭君",age:"21"},
        {id:"1004",name:"大乔",age:"19"}
    ]

    //遍历对象数组
    for (var i = 0;i<users.length;i++){
        document.write(users[i].id+"---"+users[i].name+"---"+users[i].age)
        document.write("<br>")
    }
    document.write("<hr>")

    var data = {
        "users" : [
            {id:"1005",name:"猪八戒",age:"200"},
            {id:"1006",name:"孙悟空",age:"500"},
            {id:"1007",name:"沙和尚",age:"300"}
        ],
        "admins" : [
            {id:"1008",name:"刘备",age:"36"},
            {id:"1009",name:"关羽",age:"75"},
            {id:"1010",name:"张飞",age:"58"}
        ]
    }
    document.write(data.admins[0].id+"---"+data.admins[0].name+"---"+data.admins[0].age)
</script>
</html>

结果如下（示例）：
在这里插入图片描述

2.2 FastJSON解析

Fastjson是阿里巴巴开发的一个Java库，可以将Java对象转换为JSON格式，当然它也可以将JSON字符串转换为Java对象

步骤：

①导入jar包
②创建实体类
③JSON和User对象相互转换

FastJSON提供了toJSONString()和parseObject()方法将Java对象与JSON相互转换：

  • 调用toJSONString方 法即可将对象转换成 JSON 字符串
  • parseObject 方法则反过来将 JSON 字符串转换成对象。

1.导包：
在这里插入图片描述

2.创建实体类,符合JavaBean规范，为了能更好的查看信息，重写一下toString()方法

package com.qfedu.entity;

import java.io.Serializable;

public class User implements Serializable {
    private Integer id;
    private String name;
    private String password;

    public User(){
        
    }
    
    public Integer getId() {
        return id;
    }

    public void setId(Integer id) {
        this.id = id;
    }

    public String getName() {
        return name;
    }

    public void setName(String name) {
        this.name = name;
    }

    public String getPassword() {
        return password;
    }

    public void setPassword(String password) {
        this.password = password;
    }

    @Override
    public String toString() {
        return "User{" +
                "id=" + id +
                ", name='" + name + '\'' +
                ", password='" + password + '\'' +
                '}';
    }
}

3.FastJSON测试类

package com.qfedu.test;

import com.alibaba.fastjson.JSON;
import com.alibaba.fastjson.JSONObject;
import com.alibaba.fastjson.TypeReference;
import com.qfedu.entity.User;
import org.junit.Test;

import java.util.ArrayList;
import java.util.List;

public class FastJsonTest {

    //单个User对象和JSON进行转换
    @Test
    public void test1(){
        //创建对象
        User user = new User();
        user.setId(1001);
        user.setName("米莱迪");
        user.setPassword("123123");
        System.out.println(user);
        System.out.println("==============");

        //User --->  JSON
        String jsonUser = JSON.toJSONString(user);
        System.out.println(jsonUser);
        System.out.println("==============");

        //JSON ---> User
        User user1 = JSON.parseObject(jsonUser, User.class);
        System.out.println(user1);
    }

    //User集合和JSON相互转换
    @Test
    public void test2(){
        //创建对象1
        User user1 = new User();
        user1.setId(1002);
        user1.setName("刘备");
        user1.setPassword("321321");
        //创建对象2
        User user2 = new User();
        user2.setId(1003);
        user2.setName("关羽");
        user2.setPassword("654321");

        //创建集合
        ArrayList<User> users = new ArrayList<>();
        users.add(user1);
        users.add(user2);
        System.out.println(users);
        System.out.println("==============");

        //User集合  ---> JSON
        String jsonUsers = JSON.toJSONString(users);
        System.out.println(jsonUsers);
        System.out.println("==============");

        //JSON  ---> User集合
        List<User> users1 = JSON.parseObject(jsonUsers, new TypeReference<List<User>>(){});
        System.out.println(users1);

    }
}

结果如下（测试1）：
在这里插入图片描述

结果如下（测试2）：

在这里插入图片描述

2.3 Jackson解析

Jackson是一个能够将Java对象序列化为JSON字符串，也能够将JSON字符串反序列化为Java对象的框架

  • 导入jar包
  • 通过方法readValue和writeValue实现；

Json和User对象之间的转换

1.导入jar包
在这里插入图片描述
2.创建Jackson测试类

package com.qfedu.test;

import com.fasterxml.jackson.core.type.TypeReference;
import com.fasterxml.jackson.databind.ObjectMapper;
import com.qfedu.entity.User;
import org.junit.Test;

import java.util.ArrayList;
import java.util.List;

public class JacksonTest {

    //单个User对象和JSON进行转换
    @Test
    public void test1() throws Exception{
        //创建对象
        User user = new User();
        user.setId(1001);
        user.setName("妲己");
        user.setPassword("789456");
        System.out.println(user);
        System.out.println("=======================");

        //User  --->  JSON
        ObjectMapper objectMapper = new ObjectMapper();
        String jasonUser = objectMapper.writeValueAsString(user);
        System.out.println(jasonUser);
        System.out.println("=======================");

        //JSON  ---> User
        User user1 = objectMapper.readValue(jasonUser, User.class);
        System.out.println(user1);
    }

    //User集合和JSON进行转换
    @Test
    public void test2() throws Exception{
        //创建对象1
        User user1 = new User();
        user1.setId(1002);
        user1.setName("兰陵王");
        user1.setPassword("111111");
        //创建对象2
        User user2 = new User();
        user2.setId(1003);
        user2.setName("梦琪");
        user2.setPassword("222222");

        //创建集合
        ArrayList<User> users = new ArrayList<>();
        users.add(user1);
        users.add(user2);
        System.out.println(users);
        System.out.println("=======================");

        //User集合  ---> JSON
        ObjectMapper objectMapper = new ObjectMapper();
        String jsonUsers = objectMapper.writeValueAsString(users);
        System.out.println(jsonUsers);
        System.out.println("=======================");

        //JSON  ---> User集合
        Object listUsers = objectMapper.readValue(jsonUsers, new TypeReference<List<User>>() {});
        System.out.println(listUsers);
    }

}

结果如下（测试1）：
在这里插入图片描述

结果如下（测试2）：

在这里插入图片描述

三、Ajax的使用【重点】

3.1 什么是AJAX？

同步和异步是建立在客户端和服务器端相互通信的基础上
同步：客户端必须等待服务器端的响应，在等待的期间客户端不能做其它的操作。
异步：客户端不需要等待服务器的响应，在服务器处理请求的过程中，客户端可以进行其它操作。

AJAX = ASynchronous JavaScript And XML 异步的JavaScript和XML
AJAX是一种用于创建快速动态网页的技术
AJAX是一种在无需重新加载整个网页的情况下，能够更新部分网页的技术，提升用户的体验。
通过在后台与服务器进行少量数据交换，AJAX可以使网页实现异步更新。这意味着可以在不重新加载整个网页的情况下，对网页的某部分进行更新
传统的网页（不使用AJAX）如果需要更新内容，必须重新加载整个网页页面

3.2 AJAX工作原理

在这里插入图片描述

  • AJAX是基于现有的Internet标准，并且联合使用它们：

  • XMLHttpRequest 对象 (异步的与服务器交换数据)

  • JavaScript/DOM (信息显示/交互)

  • CSS (给数据定义样式)

  • XML (作为转换数据的格式)

3.3 原生AJAX

原生js实现：
​ 1.创建XMLHttpRequest对象
​ 2.将状态触发器绑定到一个函数
​ 3.使用open方法建立与服务器的连接
​ 4.向服务器端发送数据
​ 5.在回调函数中对返回数据进行处理
​

方法： open()，send()

属性：
onreadystatechange： 状态回调函数
responseText/responseXML： 服务器的响应字符串
status： 服务器返回的HTTP状态码
statusText： 服务器返回的HTTP状态信息
readyState： 对象状态

客户端向服务器提交数据

案例：
html页面：

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>Title</title>
    <script>

        //定义方法
        function ajax() {

            //发送异步请求
            //1.创建核心对象
            var xmlhttp;
            if (window.XMLHttpRequest) {
                // code for IE7+, Firefox, Chrome, Opera, Safari
                xmlhttp = new XMLHttpRequest();
            } else {
                // code for IE6, IE5
                xmlhttp = new ActiveXObject("Microsoft.XMLHTTP");
            }

            //2. 建立连接
            /*
                参数：
                    1. 请求方式：GET、POST
                           get方式，请求参数在URL后边拼接。send方法为空参
                           post方式，请求参数在send方法中定义
                    2. 请求的URL：
                    3. 同步或异步请求：true（异步）或 false（同步）

             */

            //xmlhttp.open("GET", "ajaxServlet?username=jack", true);
            xmlhttp.open("POST", "AjaxServlet", true);

            //3.发送请求
            //xmlhttp.send(null);
            xmlhttp.setRequestHeader('Content-Type', 'application/x-www-form-urlencoded');
            xmlhttp.send("username=tom");

            //4.接受并处理来自服务器的响应结果
            //获取方式 ：xmlhttp.responseText
            //什么时候获取？当服务器响应成功后再获取

            //当xmlhttp对象的就绪状态改变时，触发事件onreadystatechange。
            xmlhttp.onreadystatechange = function () {
                //判断readyState就绪状态是否为4，判断status响应状态码是否为200
                if (xmlhttp.readyState == 4 && xmlhttp.status == 200) {
                    //获取服务器的响应结果
                    var responseText = xmlhttp.responseText;
                    alert(responseText);
                }
            }

        }

    </script>
</head>
<body>

<input type="button" value="发送异步请求" onclick="ajax()">

請輸入：<input type="text">

</body>
</html>

Servlet代码：

package com.qfedu.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;

@WebServlet("/AjaxServlet")
public class AjaxServlet extends HttpServlet {
    protected void doPost(HttpServletRequest request, HttpServletResponse response) throws ServletException, IOException {
        doGet(request,response);
    }

    protected void doGet(HttpServletRequest request, HttpServletResponse response) throws ServletException, IOException {
        //解决请求和响应乱码
        request.setCharacterEncoding("utf-8");
        response.setContentType("text/html;charset=utf-8");

        //1.获取请求参数
        String username = request.getParameter("username");

        //处理业务逻辑。耗时
        try {
            Thread.sleep(2000);
        } catch (InterruptedException e) {
            e.printStackTrace();
        }

        //2.打印username
        System.out.println(username);

        //3.响应
        response.getWriter().write("服务器响应："+username);
    }
}

结果如下：
在这里插入图片描述

方法描述
open(method,url,async)规定请求的类型、URL 以及是否异步处理请求。method：请求的类型；GET 或 POST；url：文件在服务器上的位置；async：true（异步）或 false（同步），并且XMLHttpRequest 对象如果要用于 AJAX 的话，其 open() 方法的 async 参数必须设置为 true；
send(string)将请求发送到服务器。string：仅用于 POST 请求
  • GET 还是 POST？
  • 与 POST 相比，GET 更简单也更快，并且在大部分情况下都能用。
  • 然而，在以下情况中，请使用 POST 请求：
    • 无法使用缓存文件（更新服务器上的文件或数据库）
    • 向服务器发送大量数据（POST 没有数据量限制）
    • 发送包含未知字符的用户输入时，POST 比 GET 更稳定也更可靠

3.4 相关属性

  • 每当 readyState 改变时，就会触发 onreadystatechange 事件。

  • 在 onreadystatechange 事件中，我们规定当服务器响应已做好被处理的准备时所执行的任务。

  • readyState 属性存有 XMLHttpRequest 的状态信息。

  • 当 readyState 等于 4 且状态为 200 时，表示响应已就绪：

  • 下面是 XMLHttpRequest 对象的三个重要的属性：

属性描述
onreadystatechange存储函数（或函数名），每当 readyState 属性改变时，就会调用该函数。
readyState存有 XMLHttpRequest 的状态。从 0 到 4 发生变化。0: 请求未初始化1: 服务器连接已建立2: 请求已接收3: 请求处理中4: 请求已完成，且响应已就绪
status例：200: “OK” ；404: 未找到页面
响应码描述
100客户必须继续发出请求
101客户要求服务器根据请求转换HTTP协议版本
200交易成功
201提示知道新文件的URL
202接受和处理、但处理未完成
203返回信息不确定或不完整
204请求收到，但返回信息为空
205服务器完成了请求，用户代理必须复位当前已经浏览过的文件
206服务器已经完成了部分用户的GET请求
300请求的资源可在多处得到
301删除请求数据
302在其他地址发现了请求数据
303建议客户访问其他URL或访问方式
304客户端已经执行了GET，但文件未变化
305请求的资源必须从服务器指定的地址得到
306前一版本HTTP中使用的代码，现行版本中不再使用
307申明请求的资源临时性删除
400错误请求，如语法错误
401请求授权失败
402保留有效ChargeTo头响应
403请求不允许
404没有发现文件、查询或URl
405用户在Request-Line字段定义的方法不允许
406根据用户发送的Accept拖，请求资源不可访问
407类似401，用户必须首先在代理服务器上得到授权
408客户端没有在用户指定的饿时间内完成请求
409对当前资源状态，请求不能完成
410服务器上不再有此资源且无进一步的参考地址
411服务器拒绝用户定义的Content-Length属性请求
412一个或多个请求头字段在当前请求中错误
413请求的资源大于服务器允许的大小
414请求的资源URL长于服务器允许的长度
415请求资源不支持请求项目格式
416请求中包含Range请求头字段，在当前请求资源范围内没有range指示值，请求也不包含If-Range请求头字段
417服务器不满足请求Expect头字段指定的期望值，如果是代理服务器，可能是下一级服务器不能满足请求
500服务器产生内部错误
501服务器不支持请求的函数
502服务器暂时不可用，有时是为了防止发生系统过载
503服务器过载或暂停维修
504关口过载，服务器使用另一个关口或服务来响应用户，等待时间设定值较长
505服务器不支持或拒绝支请求头中指定的HTTP版本

四、JQuery方式实现

4.1 三种方式实现，导入jquery.js文件

方式一：

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>Title</title>
</head>

<!-- 引入本地jquery.js文件 -->
<!--<script src="js/jquery-1.8.3.min.js"></script>-->
<!--<script src="js/jquery-1.8.3.js"></script>-->

<!-- 引入公共jquery.js文件（建议使用公共的js） -->
<script src="https://ajax.aspnetcdn.com/ajax/jquery/jquery-3.5.1.min.js"></script>
<body>
    <input type="button" value="请求发送参数" onclick="ajax()">
    用户名：<input type="text">
</body>
<script>
    function ajax() {
        //使用$.ajax()发送异步请求
        $.ajax({
            //type: "GET",
            type: "POST",    //请求路径
            url: "AjaxServlet",       //请求方式
            // data: "username=张三",    //请求参数
            data:{"username" : "张三"},
            async: true,    //采用异步的通信方式
            cache: true,       //使用缓存
            success: function(backdata,status,xmlHttpRequest){
                alert( "服务器响应的数据: " + backdata );
                alert( "服务器响应状态: " + status );
                alert( "xmlHttpRequest.readyState: " + xmlHttpRequest.readyState );
                alert( "xmlHttpRequest.status: " + xmlHttpRequest.status );
                alert( "xmlHttpRequest.responseText: " + xmlHttpRequest.responseText );
            },//响应成功后的回调函数
            error:function () {
                alert("出错啦...")
            },//表示如果请求响应出现错误，会执行的回调函数
            dataType:"text"//设置接受到的响应数据的格式
        });
    }
</script>

</html>

结果如下：
在这里插入图片描述

方式二、

function ajax() {
        //jquery的GET方式发送请求
        $.get("AjaxServlet", { username: "John" },
            function(backdata){
                alert("服务器返回的数据: " + backdata);
            },"text");
    }

结果如下：
在这里插入图片描述

方式三：

function ajax() {
        //POST发送异步请求
        $.post("AjaxServlet",{username:"jack"},
            function (data) {
            alert(data);
        },"text");
    }

结果如下：

在这里插入图片描述

小yu别错过
关注
  • 1
    点赞
  • 踩
  • 1
    收藏
    觉得还不错? 一键收藏
  • 打赏
    打赏
  • 0
    评论
专栏目录
JQuery处理json与ajax返回JSON实例代码
10-26
json数据是一种经型的实时数据交互的数据存储方法，使用到最多的应该是ajax与json配合使用了，下面我来给大家介绍jquery处理json数据方法
Ajax中的json实现及使用jQuery实现Ajax
2202_75384458的博客
12-13 1050
JS对象标记) 是一种轻量级的数据交换格式。JSON 指的是 JavaScript 对象表示法（JavaScript Object Notation）JSON 是存储和交换文本信息的语法。类似 XML。JSON 比 XML 更小、更快，更易解析。JSON 是轻量级的文本数据交换格式JSON 独立于语言 *JSON 具有自我描述性，更易理解JSON 语法是 JavaScript 对象表示法的子集：数据在键/值对中，键/值对可以嵌套数据由逗号分隔花括号保存对象，对象可以包含多个键/值对。
【速成之路】网页编程必会的Ajax——JSON
m0_61684063的博客
05-22 1584
JSONJSON概述JSON的使用 JSON概述   JSON( JavaScriptObject Notation, JavaScript 对象表示方法)是一种轻量级的数据交换格式，是基于ECMA Script(欧洲计算机协会制定的JS规范)的一个子集，采用完全独立于编程语言的文本格式来存储和表示数据。简洁和清晰的层次结构使得JSON成为理....
学习AJAX必知必会（2）~Ajax基本使用，设置请求行、请求体、请求头，服务端响应JSON数据
伟庭的博客
01-22 1777
学习AJAX必知必会（2）~Ajax基本使用，设置请求行、请求体、请求头，服务端响应JSON数据
Ajax与json
weixin_66939060的博客
04-29 1477
目录 1.Ajax 2.json 3.Ajax+json 一、神奇的Ajax 1.要用Ajax先来了解为什么使用Ajax? 1.1:无刷新：不刷新整个页面，只刷新局部 （无刷新的好处：只更新部分页面，有效利用带框，提高用户体验） 2.那Ajax是什么？ Ajax:一种只刷新局部页面的技术 Ajax中有几个方法：今天我们最要就说两个：1.$.ajax() 2.$.post() $.ajax():通过HTTP请求加载远程数据 $.post()：通过远程HTTP POS...
Ajax基础（应用场景｜jquery实现Ajax｜注意事项｜Ajax发送json数据｜Ajax携带文件数据）
Mchen的博客
11-20 2150
AJAX翻译成中文就是“异步Javascript和XML”。即使用Javascript语言与服务器进行异步交互也是用XML进行数据传输（当然，传输的数据不只是XML，目前更多的使用Json数据）。（XML应用于Web开发的许多方面，常用于简化数据的存储和共享）AJAX不是什么新的编程语言，而是一种使用现有标准的新方法AJAX最大的优点就是不需要重新加载整个页面的情况下，可以与服务器交换数据并更新网页内容（简单来说就是，在网页前端刚输入完数据，后端其实已经验证完数据了，不需要等点击提交了）
AJAX和JSON详解
热门推荐
write less , do more
05-08 1万+
AJAX和JSON详解
使用Ajax请求Json
tianxingege_的博客
07-12 2121
第一种方法 //创建请求对象 var request = new XMLHttpRequest(); //配置请求参数，请求方式，请求地址 request.open("get", "..js/aap.json", true); //请求处理函数 request.onreadystatechange = function() { if (request.readyState == 4
AJAX和JSON
weixin_65824274的博客
04-28 1060
AJAX（ASynchronous JavaScript And XML）异步的JavaScript 和 XML；由Jesse James Garrett 在他的文章AJAX：A New Approoch to Web Applications中首次提出。ajax（Web数据交互方式）_百度百科使用XHTML+CSS 来看表示信息。使用 JavaScript 操作 D OM 进行动态显示及交互。使用 XML 和 XSLT 进行数据交互及相关操作。
Ajax和Json
m0_62063669的博客
08-02 892
Asynchronous(异步)JavascriptAndXML简称AJAX，它不是一种新技术，只是老技术[js]采用新用法[引用了XMLHttpRequest对象]。Json语法规则(Json语法是JavaScript对象表示语法的子集) 数据在名称/值对中 数据由逗号分隔 花括号保存对象 方括号保存数组 Json名称/值对 Json数据格式为：名称/值对，"firstName":"John" 相
Ajax和JSON的基本用法
m0_52226803的博客
03-09 665
会将原来的页面销毁掉，重新生成另一张页面，但是在原来的页面中有不需要刷新的页面，我们想要的效果只是小部分区域进行显示刷新出来的内容，这时就要用到Ajax。结果：当send执行没有结束，没有收到响应，不会执行console.log("请求已经发送");解决：中途导入的jar包和依赖没有被out出来，最后允许的目录在Out,如果jar添加了，out没有，那么此时需要手动添加。注意：ajax请求返回的不再与展现相关，而是纯纯的数据，浏览器接受后要考虑如何展示。解决：tomcat选择的时候选错了。
json与AJAX电子书
06-11
json与ajax基础讲述，很适合初学json的人，自学的推荐用书
jQuery高级编程之js对象、json与ajax用法实例分析
10-16
主要介绍了jQuery高级编程之js对象、json与ajax用法,结合实例形式分析了js对象的创建、使用,json格式数据转换及ajax交互等相关操作技巧,需要的朋友可以参考下
简单了解Ajax
pythontxt的博客
04-19 1063
Ajax，全称 Asynchronous JavaScript and XML（异步的 JavaScript 和 XML），是一种用于创建更好更快以及交互性更强的网页应用的技术。它允许网页在不重新加载整个页面的情况下，与服务器交换数据并更新部分网页内容。这意味着，用户可以在不中断当前操作的情况下，获取新的数据或提交表单，从而提供了更流畅的用户体验。异步的JavaScript它可以异步地向服务器发送请求，在等待响应的过程中，不会阻塞当前页面，在这种情况下，浏览器可以做自己的事情。
AJAX——图书管理案例
weixin_48719464的博客
04-20 688
自己的图书数据：给自己起个外号，并告诉服务器，默认会有三本书，基于这三本书做数据的增删改查。
2024-04-22(AJAX)
cxr的博客
04-22 965
使用浏览器的XMLHttpRequest对象和服务器进行通信浏览器网页中，使用Ajax技术（XMLHttpRequest对象）发起获取服务器数据的请求，服务器将数据给前端，前端拿到数据后，展示到网页。事件委托，会把一个或者一组元素的事件委托到它的父层或者更外层元素上，真正绑定事件的是外层元素，而不是目标元素。当事件响应到目标元素上时，会通过事件冒泡机制从而触发它的外层元素的绑定事件上，然后在外层元素上去执行函数。
【Ajax-异步刷新技术】什么是Ajax之续章 !
m0_74187147的博客
04-23 1086
同步请求：客户端向服务器端发送一个请求后，必须等待请求的处理结果返回来以后，才可以向服务器发送下一个请求。翻译：想服务器发送的上一个请求还没有结束，就不能继续向服务器发送新的请求；异步请求：客户端向服务器发送请求后，不论服务器的响应结果是否返回，都可以继续向服务器发送新的请求。异步请求的性能会比同步请求更好。
AJAX——案例_天气预报
weixin_48719464的博客
04-22 289
my-axios.js代码。index.css代码。index.html代码。reset.css代码。search.js代码。index.js代码。
AJAX——Promise-链式调用
最新发布
weixin_48719464的博客
04-23 585
概念：依靠then()方法会返回一个新生成的Promise对象特性，继续串联下一环任务，知道结束细节：then()回调函数中的返回值，会影响新生成的Promise对象最终状态和结果好处：通过链式调用，解决回调函数嵌套问题。
json 与ajax 请求
05-28
JSON（JavaScript Object Notation）和 AJAX（Asynchronous JavaScript and XML）都是用于在客户端和服务器之间传递数据的技术。 JSON 是一种轻量级的数据交换格式，它使用键值对和数组来表示数据。JSON 格式通常用于在客户端和服务器之间传递结构化的数据。在 AJAX 中，JSON 格式通常用于在客户端和服务器之间传递数据。 AJAX 是一种异步请求数据的技术，它可以在不刷新整个页面的情况下向服务器请求数据并更新页面的部分内容。在 AJAX 中，可以使用 JSON 格式向服务器发送数据，并使用 JSON 格式接收服务器返回的响应数据。 使用 AJAX 发送 JSON 格式数据的请求通常使用 POST 方法，数据放在请求的主体中。在客户端代码中，可以使用 JSON.stringify() 方法将数据转换为 JSON 字符串，并将其放在请求的主体中。在服务器端代码中，可以使用 JSON.parse() 方法将 JSON 格式的字符串转换为对象，以便对其进行处理。

“相关推荐”对你有帮助么？

  • 非常没帮助
  • 没帮助
  • 一般
  • 有帮助
  • 非常有帮助
提交
评论
添加红包

请填写红包祝福语或标题

个

红包个数最小为10个

元

红包金额最低5元

当前余额3.43元 前往充值 >
需支付：10.00元
成就一亿技术人!
领取后你会自动成为博主和红包主的粉丝 规则
hope_wisdom
发出的红包

打赏作者

小yu别错过

你的鼓励将是我创作的最大动力

¥1 ¥2 ¥4 ¥6 ¥10 ¥20
扫码支付：¥1
获取中
扫码支付

您的余额不足，请更换扫码支付或充值

打赏作者

实付元
使用余额支付
点击重新获取
扫码支付
钱包余额 0

抵扣说明：

1.余额是钱包充值的虚拟货币，按照1:1的比例进行支付金额的抵扣。
2.余额无法直接购买下载，可以购买VIP、付费专栏及课程。

余额充值