AJAX&&JSON 简讲

最新推荐文章于 2025-03-21 11:01:13 发布
置顶 最新推荐文章于 2025-03-21 11:01:13 发布
阅读量181 收藏
点赞数
分类专栏： java 文章标签： ajax json javascript
版权声明：本文为博主原创文章，遵循 CC 4.0 BY-SA 版权协议，转载请附上原文出处链接和本声明。
本文链接：https://blog.youkuaiyun.com/Messchao/article/details/124494959
版权

AJAX&&JSON

AJAX

ajax - ASynchronous JavaScript And XML 异步的JavaScript 和 XML

异步和同步

  • 客户端和服务器端相互通信的基础上

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

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

    • 在这里插入图片描述

    • Ajax是一种在无需重新加载整个页面的情况下，能够更新部分网页的技术

    • 通过在后台与服务器进行少量数据交换，Ajax可以使网页实现异步更新。这意味着可以在不重新加载整个网页的情况下，对网页的某部分进行更新。

    • 提升用户的体验

实现方式

原生的JS实现方式

  • package com.ytzl.servlet;
/**
 * @author 玫瑰到了花期
 * @data 2022/4/21 9:43
 * @love 又偷偷看你了
 * @V: CBWR-K
 */

import javax.servlet.*;
import javax.servlet.http.*;
import javax.servlet.annotation.*;
import java.io.IOException;

@WebServlet("/ajaxServlet")
public class AjaxServlet extends HttpServlet {
    @Override
    protected void doPost(HttpServletRequest request, HttpServletResponse response) throws ServletException, IOException {
        //1.获取请求参数
        String username = request.getParameter("username");
        //处理业务逻辑。耗时
        try {
            Thread.sleep(5000);
        } catch (InterruptedException e) {
            e.printStackTrace();
        }
        //2.打印username
        System.out.println(username);
        //3.响应
        response.getWriter().write("hello\t" + username);
    }

    @Override
    protected void doGet(HttpServletRequest request, HttpServletResponse response) throws ServletException, IOException {
        this.doPost(request, response);
    }
}

  • <!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>将来的我比现在好，这一点我已经有了把握</title>
</head>
<!--01-原生js实现ajax.html-->
<script type="text/javascript">
    //定义方法
    function fun() {
        //发送异步请求
        //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=tom", true);
        //3.发送请求
        xmlhttp.send()
        //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>
<body>
<input type="button" value="发送异步请求" onclick="fun()">
<input type="text">
</body>
</html>

JQuery实现方式

package com.ytzl.servlet;
/**
 * @author 玫瑰到了花期
 * @data 2022/4/21 9:43
 * @love 又偷偷看你了
 * @V: CBWR-K
 */

import javax.servlet.*;
import javax.servlet.http.*;
import javax.servlet.annotation.*;
import java.io.IOException;

@WebServlet("/ajaxServlet")
public class AjaxServlet extends HttpServlet {
    @Override
    protected void doPost(HttpServletRequest request, HttpServletResponse response) throws ServletException, IOException {
        //1.获取请求参数
        String username = request.getParameter("username");
        //2.打印username
        System.out.println(username);
        //3.响应
        response.getWriter().write("hello " + username);
    }

    @Override
    protected void doGet(HttpServletRequest request, HttpServletResponse response) throws ServletException, IOException {
        this.doPost(request, response);
    }
}

  • <!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>将来的我比现在好，这一点我已经有了把握</title>
</head>
<script src="lib/jquery.min.js"></script>
<script type="text/javascript">
    function fun() {
        //使用$.ajax()发送异步请求
        $.ajax({
            url: "ajaxServlet",//请求路径
            type: "post",//请求方式
            // data:"username=jack&age=18",//请求参数
            data: {
                "username": "jack",
                "age": 18,
            },
            success: function (data) {
                alert(data)
            },//响应成功后的回调函数
        })
    }
</script>
<body>
<input type="button" value="发送异步请求" onclick="fun()">
<input type="text">
</body>
</html>
$.ajax()

$.ajax({键值对})

属性说明
url请求路径
type请求方式
data请求参数
success:function(){}响应成功后的回调函数
error:function (){}出错后的回调函数
<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>将来的我比现在好，这一点我已经有了把握</title>
</head>
<script src="lib/jquery.min.js"></script>
<script type="text/javascript">
    function fun() {
        console.log("fun")
        //使用$.ajax()发送异步请求
        $.ajax({
            url: "ajaxServlet ",//请求路径
            type: "post",//请求方式
            // data:"username=jack&age=18",//请求参数
            data: {
                "username": "jack",
                "age": 18,
            },
            success: function (data) {
                console.log(data)
            },//响应成功后的回调函数
            error:function (){
                alert("出错啦")
            },//表示如果请求响应出现错误，会执行的回调函数
            dataType:"text",//设置接受到的响应  
        })
    }
</script>
<body>
<input type="button" value="发送异步请求" onclick="fun()">
<input type="text">
</body>
</html>
$.get()
语法$.get(url,[data],[callback],[type])
属性说明
url请求路径
data请求参数
callback回调函数
type响应结果的类型
$.post()
语法$.post(url,[data],[callback],[type])
属性说明
url请求路径
data请求参数
callback回调函数
type响应结果的类型
<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>将来的我比现在好，这一点我已经有了把握</title>
</head>
<script src="lib/jquery.min.js"></script>
<script type="text/javascript">
    function fun() {
        console.log("fun")
        $.post("ajaxServlet",{username:"rose"},function (data){
            console.log(data)
        },"text")
    }
</script>
<body>
<input type="button" value="发送异步请求" onclick="fun()">
<input type="text">
</body>
</html>

JSON

  • 概念：JavaScript Object Notation JavaScript对象表示法
  • json多用于存储和交换文本信息的语法
  • JSON 比 XML 更小、更快、更易解析

语法

语法基本规则
数据在名称/值对中json数据是由键值对构成的
|值得取值类型：
数字（整数或浮点数）
字符串（在双引号中）
逻辑值（true或false）
数组（在方括号中）{“persons”:[{},{}]}
对象（在花括号中）{“address”:{“province”:“南京”…}}
null
数据由逗号分隔多个键值对由逗号分隔
花括号保存对象使用{}定义json格式
方括号保存数组[]
获取数据：
json对象.键名
json对象[“键名”]
数组对象[索引]
遍历：
<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>Title</title>
</head>
<script src="lib/jquery.min.js"></script>
<script type="text/javascript">
  //1.定义基本数据格式
  var person = {"name":"张三","age":23,'gender':true}
  console.log(person)
  //获取name的值
  var name = person.name
  var age = person["age"]
  console.log(name)
  console.log(age)
  //2.嵌套格式  {}
  var person1 = {"person1":[
          {"name":"张三","age":18,'gender':true},
          {"name":"李四","age":19,'gender':false},
          {"name":"王五","age":20,'gender':true}
      ]
  }
  console.log(person1)
  //获取name的值
  let name1 = person1.person1[2].name;
  console.log(name1)
  //2.嵌套格式 []
  var ps = [
      {"name":"张三","age":18,'gender':true},
      {"name":"李四","age":19,'gender':false},
      {"name":"王五","age":20,'gender':true}
  ]
  //获取值、
  console.log(ps[1].gender)
</script>
<body>

</body>
</html>

遍历

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>Title</title>
</head>
<script src="lib/jquery.min.js"></script>
<script type="text/javascript">
    //1.定义基本数据格式
    var person = {"name":"张三","age":18,'gender':true}
    //1.1.数组式创建
    var ps = [
        {"name":"张三","age":18,'gender':true},
        {"name":"李四","age":19,'gender':false},
        {"name":"王五","age":20,'gender':true}
    ]
    //基本数据格式遍历
    for (var key in person) {
        console.log(key+":"+person[key])
    }
    //数组式遍历
    for (let i = 0; i < ps.length; i++) {
        var p = ps[i]
        for (const pKey in p) {
            console.log(pKey+":"+p[pKey])
        }
    }
</script>
<body>
</body>
</html>

JSON数据和JAVA对象的相互转换

JSON解析器

  • 常见的解析器
    • Jsonlib
    • Gson
    • fastjson
    • jackson

JAVA对象转换JSON

使用步骤
  1. 导入jackson的相关jar包
  2. 创建Jackson核心对象 ObjectMapper
  3. 调用ObjectMapper的相关方法进行转换
转换方法
创建Jackson的核心对象ObjectMapper mapper = new ObjectMapper();
writerValue(参数1,obj)
File将obj对象转换为json字符串，并保存到指定的文件中
Writer将obj对象转换为JSON字符串，并将json数据填充到字符输入流中
OutputStreamobj对象转换为JSON字符串，并将json数据填充到字节输入流中
实例：mapper.writeValue(new FileWriter(“.txt”),obj);
package com.ytzl.doman;

import com.fasterxml.jackson.core.JsonProcessingException;
import com.fasterxml.jackson.databind.ObjectMapper;
import org.junit.Test;

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

/**
 * @author 玫瑰到了花期
 * @data 2022/4/22 14:52
 * @love 又偷偷看你了
 * @V: CBWR-K
 */
public class JacksonTest {
    //java对象转为JSON字符串
    @Test
    public void test1() throws IOException {
        //1.创建Person对象、
        Person p = new Person();
        p.setName("杨柯新");
        p.setAge(18);
        p.setGender("男");

        //2.创建Jackson的核心对象  ObjectMapper
        ObjectMapper mapper = new ObjectMapper();
        /*
        * 转换方法：
        *   writerValue(参数1,obj)
        *       参数1：
        *           File:将obj对象转换为json字符串，并保存到指定的文件中
        *           Writer:将obj对象转换为JSON字符串，并将json数据填充到字符输入流中
        *           OutputStream:obj对象转换为JSON字符串，并将json数据填充到字节输入流中
        *   writerValueAsString(obj):将对象转为json字符串
        * */
        //3.转换
        //writerValueAsString(obj)
        String json = mapper.writeValueAsString(p);
        //{"name":"杨柯新","age":18,"gender":"男"}
        System.out.println(json);

        //writerValue()  将数据写到.txt文件中
        /*mapper.writeValue(new File("C:\\Users\\Administrator\\Desktop\\json.txt"),p);*/

        //writerValue.将数据关联到Writer中
        mapper.writeValue(new FileWriter("C:\\Users\\Administrator\\Desktop\\json.txt"),p);
    }
}
注解
注解说明
@JsonIgnore排除属性
@JsonFormat属性值的格式化
@JsonFormat(pattern = “yyyy-MM-dd”)
储存方式说明
List数组
Map对象格式一致
package com.ytzl.doman;

import com.fasterxml.jackson.core.JsonProcessingException;
import com.fasterxml.jackson.databind.ObjectMapper;
import org.junit.Test;

import java.util.*;

/**
 * @author 玫瑰到了花期
 * @data 2022/4/22 14:52
 * @love 又偷偷看你了
 * @V: CBWR-K
 */
public class JacksonTest2 {
    //java对象转为JSON字符串
    @Test
    public void test1() throws JsonProcessingException {
        //1.创建Person对象、
        Person p = new Person();
        p.setName("杨柯新");
        p.setAge(18);
        p.setGender("男");
        p.setBirthday(new Date());
        Person p1 = new Person();
        p1.setName("杨柯新");
        p1.setAge(18);
        p1.setGender("男");
        p1.setBirthday(new Date());
        Person p2 = new Person();
        p2.setName("杨柯新");
        p2.setAge(18);
        p2.setGender("男");
        p2.setBirthday(new Date());
        Person p3 = new Person();
        p3.setName("杨柯新");
        p3.setAge(18);
        p3.setGender("男");
        p3.setBirthday(new Date());
        //创建List集合
        List<Person> people = new ArrayList<>();
        people.add(p);
        people.add(p1);
        people.add(p2);
        people.add(p3);
        //2.转换
        //[{"name":"杨柯新","age":18,"gender":"男","birthday":"2022-04-22"},{"name":"杨柯新","age":18,"gender":"男","birthday":"2022-04-22"},{"name":"杨柯新","age":18,"gender":"男","birthday":"2022-04-22"},{"name":"杨柯新","age":18,"gender":"男","birthday":"2022-04-22"}]
        ObjectMapper mapper = new ObjectMapper();
        String json = mapper.writeValueAsString(people);
        System.out.println(json);
    }
    @Test
    public void test2() throws JsonProcessingException {
        //1.创建Map对象、
        Map<String,Object> map = new HashMap<>();
        map.put("name","张三");
        map.put("age","18");
        map.put("gender","男");

        //2.转换
        ObjectMapper mapper = new ObjectMapper();
        String json = mapper.writeValueAsString(map);
        //{"gender":"男","name":"张三","age":"18"}
        System.out.println(json);
    }
}

JSON转为JAVA对象

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

import com.fasterxml.jackson.core.JsonProcessingException;
import com.fasterxml.jackson.databind.ObjectMapper;
import org.junit.Test;

import java.io.IOException;
import java.util.*;

/**
 * @author 玫瑰到了花期
 * @data 2022/4/22 14:52
 * @love 又偷偷看你了
 * @V: CBWR-K
 */
public class JacksonTest3 {
    //JSON字符串转换为Java对象
    @Test
    public void test1() throws IOException {
        //1.初始化JSON字符串、
        String json = "{\"gender\":\"男\",\"name\":\"张三\",\"age\":18}";
        //2.创建ObjectMapper对象
        ObjectMapper mapper = new ObjectMapper();
        //3.转换为Java对象 Person对象
        Person person = mapper.readValue(json, Person.class);
        System.out.println(person);
    }
}
JavaScript - 使用 $.ajax 发送 JSON 字符串无法正常工作，但发送 JSON 对象可以正常工作
KkowServer的博客
10-03 132
在使用 $.ajax 方法发送数据时，我们可以选择发送 JSON 字符串或 JSON 对象。然而，有时候我们会遇到一个问题：当我们尝试发送 JSON 字符串时，它可能无法正常工作，而发送 JSON 对象则可以正常工作。方法发送数据时，如果要发送 JSON 数据，最好将 JSON 字符串转换为 JSON 对象，并将其作为参数传递给。现在，服务器将能够正确解析请求的数据，并且我们可以成功发送 JSON 数据。在上面的示例中，我们定义了一个 JSON 字符串作为请求的数据，并将其作为。在上面的示例中，我们使用。
一头扎进Ajax&Json视频教程第三讲A
10-08
在本节视频教程“一头扎进Ajax&Json视频教程第三讲A”中，我们将深入探讨JavaScript中的异步数据传输技术——Ajax（Asynchronous JavaScript and XML）及其与JSON（JavaScript Object Notation）的数据交换格式。...
1. AJAX： 2. JSON
羽扬 -- YYDCYY
09-16 377
内容 1. AJAX： 2. JSON AJAX： 1. 概念： ASynchronous JavaScript And XML 异步的JavaScript 和 XML 1. 异步和同步：客户端和服务器端相互通信的基础上 * 客户端必须等待服务器端的响应。在等待的期间客户端不能做其他操作。 * 客户端不需要等待服务器端的响应。在服务器处理请求的过程中，客户端可以进行其他的操作。 ...
JavaScript $.ajax() 最新用法详解
最新发布
aadnf的博客
03-21 845
通过掌握以上内容，可以高效使用 $.ajax() 处理复杂的前端请求场景，同时结合现代 JavaScript 特性提升代码可读性和可维护性。浏览器开发者工具（F12）的 ​Network 面板。​二、现代回调方式（Promise 风格）​。​三、异步处理与 async/await。​八、jQuery 3.x 的重要变化。​七、替代方法：更简洁的 API。​3. 跨域请求（CORS）​。​1. 发送 JSON 数据。一、基础语法与核心参数。​五、错误处理最佳实践。
Ajax与JSON的一些总结
weixin_33928137的博客
05-15 204
1.1.1 摘要 Ajax技术的核心是XMLHttpRequest对象（简称XHR），可以通过使用XHR对象获取到服务器的数据，然后再通过DOM将数据插入到页面中呈现。虽然名字中包含XML，但Ajax通讯与数据格式无关，所以我们的数据格式可以是XML或JSON等格式。 XMLHttpRequest对象用于在后台与服务器交换数据，具体作用如下： 在不重新加载页面的情况下更新网页 ...
$.ajax 解析json,ajax 处理json数据
weixin_34570507的博客
08-05 588
{% block add_js %}$.ajax({type: "get",dateType: "json",url: "/api/v1/post/recent",//async: false,complete: function () {$("#load").hide();},success: function (msg) {$.each(msg,function (i,n) {$("#writ...
$.ajax()方法从服务器获取json数据几种方式详解
热门推荐
Sun9528的博客
06-10 7万+
对$.ajax()方法从服务器获取json数据的几种方式进行详解
一头扎进Ajax&Json视频教程第四讲
10-08
在IT行业中，Ajax（Asynchronous JavaScript and XML）与Json（JavaScript Object Notation）是Web开发中的重要技术，尤其是在创建交互式、动态网页时。本视频教程的第四讲将深入讲解这两项技术的核心概念和实际应用...
一头扎进Ajax&Json视频教程4
08-01
在本套"一头扎进Ajax&Json视频教程4"中，我们将深入探讨Web开发中的重要技术——Ajax和Json。这两个概念在现代Web应用程序中扮演着不可或缺的角色，它们极大地提升了用户体验，实现了页面无刷新的数据交互。 Ajax，...
深入掌握Ajax&Json技术：视频教程第三讲
根据提供的信息，可以推测“一头扎进Ajax&Json视频教程第三讲”很可能是一系列教学视频中的第三集，专注于讲授Ajax和Json的知识和应用，而“第三讲A”和“第三讲B”是该集的两个部分。视频教程通过实际操作和讲解来...
深入学习Ajax&Json技术，第三讲视频教程
本段内容涉及的知识点将围绕Ajax和JSON这两个互联网开发中的核心技术进行详细的阐述，力求为学习者提供深入浅出的教程内容解读。 首先，我们来解析Ajax（Asynchronous JavaScript and XML）技术。Ajax是一种在无需...
Json & Ajax
勿忘初心的博客
10-16 181
概念： ASynchronous JavaScript And XML 异步的JavaScript 和 XML 1. 异步和同步：客户端和服务器端相互通信的基础上 * 客户端必须等待服务器端的响应。在等待的期间客户端不能做其他操作。 * 客户端不需要等待服务器端的响应。在服务器处理请求的过程中，客户端可以进行其他的操作。(局部刷新页面如百度搜索框，输...
$.ajax()用法——json传值
刘富国的博客
08-01 1206
$.ajax()用法——json传值 引入jar包（jquery.js+json/…+） servlet用json传数据给jsp jquery向servlet发送异步请求，并处理返回的数据 $.ajax({ async:"true",//异步，为false则为同步 type:"post", url:"/ClassServlet", data:"page="+ cu
ajax、json
whatisthespring的博客
06-29 537
ajax，json
Ajax + Json
qq_39178473的博客
01-25 490
一、Ajax AJAX指异步的JavaScript及XML（Asynchronous JavaScript And XML）,AJAX 不是编程语言，而是创建更好更快以及交互性更强的 Web 应用程序的技术。通俗的讲叫异步调用，局部刷新。 计算机中的异步与我们生活的同步是一样的，计算机中的异步表示另一个线程同时执行相关操作。 Ajax 所涉及到的技术是，JavaScript，CSS，html,XM...
Ajax与json
weixin_66939060的博客
04-29 1987
目录 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 怎么进行 json请求
hongmy94的博客
07-03 1074
.ajax请求默认是form表单的格式，这次给到的接口需要的是json的格式，一开始只是将dataType调整为application/json;charset=utf-8，在f12看到的确实是将请求方式改变了，但是参数格式不对劲，应该是个json对象才对。通过查找才知道:application/json;charset=utf-8以及将data进行了JSON.stringify()以后才能得到一个正确的请求。
Ajax和JSON
weixin_44641846的博客
03-03 110
ajax异步提交 介绍 Ajax：ASynchronize JavaScript And Xml 异步的JavaScript和xml 一种在无需加载页面的情况下实现能够部分更新页面数据的技术。 实现方式： 原生Js方式 //1.创建核心对象 var xmlhttp; if(Windows.XmlHttpResponse){ xmlhttp = new XmlHttpResponse(); }else{ xmlhttp = new ActiveObje
AJAX和JSON
weixin_65824274的博客
04-28 1260
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 进行数据交互及相关操作。
评论
添加红包

请填写红包祝福语或标题

个

红包个数最小为10个

元

红包金额最低5元

当前余额3.43元 前往充值 >
需支付：10.00元
成就一亿技术人!
领取后你会自动成为博主和红包主的粉丝 规则
hope_wisdom
发出的红包
实付元
使用余额支付
点击重新获取
扫码支付
钱包余额 0

抵扣说明：

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

余额充值