AJAX&JSON01

最新推荐文章于 2024-05-16 12:20:42 发布
最新推荐文章于 2024-05-16 12:20:42 发布
阅读量214 收藏 3
点赞数
分类专栏： JavaWeb
版权声明：本文为博主原创文章，遵循 CC 4.0 BY-SA 版权协议，转载请附上原文出处链接和本声明。
本文链接：https://blog.csdn.net/qq_40660787/article/details/106352388
版权

刘意老师整理

 

 

AJAX

概念： ASynchronous JavaScript And XML    异步的JavaScript 和 XML

异步和同步：客户端和服务器端相互通信的基础上

  • 客户端必须等待服务器端的响应。在等待的期间客户端不能做其他操作。
  • 客户端不需要等待服务器端的响应。在服务器处理请求的过程中，客户端可以进行其他的操作。
  1. Ajax 是一种在无需重新加载整个网页的情况下，能够更新部分网页的技术
  2. 通过在后台与服务器进行少量数据交换，Ajax 可以使网页实现异步更新。这意味着可以在不重新加载整个网页的情况下，对网页的某部分进行更新。
  3. 传统的网页（不使用 Ajax）如果需要更新内容，必须重载整个网页页面。

作用：提升用户的体验

 

实现方式：

1. 原生的JS实现方式（了解）

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

2. JQeury实现方式

$.ajax()

  • 语法：$.ajax({键值对});
//使用$.ajax()发送异步请求
$.ajax({
	url:"ajaxServlet1111" , // 请求路径
	type:"POST" , //请求方式
	//data: "username=jack&age=23",//请求参数
	data:{"username":"jack","age":23},
	success:function (data) {
		alert(data);
	},//响应成功后的回调函数
	error:function () {
		alert("出错啦...")
	},//表示如果请求响应出现错误，会执行的回调函数

	dataType:"text"//设置接受到的响应数据的格式
});

$.get()：发送get请求

语法：$.get(url, [data], [callback], [type])

参数：

  • url：请求路径
  • data：请求参数
  • callback：回调函数
  • type：响应结果的类型
​$.get("ajaxServlet",{"username":"zhangsan"},function(data){
    alert(data)
},"text");

​

$.post()：发送post请求

语法：$.post(url, [data], [callback], [type])

参数：

  • url：请求路径
  • data：请求参数
  • callback：回调函数
  • type：响应结果的类型
$.post("ajaxServlet",{"username":"zhangsan"},function(data){
    alert(data)
},"text");

 

JSON：

概念： JavaScript Object Notation        JavaScript对象表示法

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

语法：

基本规则

  • 数据在名称/值对中：json数据是由键值对构成的
  • 键用引号(单双都行)引起来，也可以不使用引号

值得取值类型：

  1. 数字（整数或浮点数）
  2. 字符串（在双引号中）
  3. 逻辑值（true 或 false）
  4. 数组（在方括号中）    {"persons":[{},{}]}
  5. 对象（在花括号中） {"address":{"province"："陕西"....}}
  6. null
  • 数据由逗号分隔：多个键值对由逗号分隔
  • 花括号保存对象：使用{}定义json 格式
  • 方括号保存数组：[]

获取数据:

json对象.键名

var person = {"name": "张三", age: 23, 'gender': true};

var name = person.name;
alert(name);

json对象["键名"]

var person = {"name": "张三", age: 23, 'gender': true};

var name = person["name"];
alert(name);

数组对象[索引]

var persons = {
    "persons": [
        {"name": "张三", "age": 23, "gender": true},
        {"name": "李四", "age": 24, "gender": true},
        {"name": "王五", "age": 25, "gender": false}
        ]
};
var name1 = persons.persons[2].name;
alert(name1);

遍历

 //1.定义基本格式
var person = {"name": "张三", age: 23, 'gender': true};

var ps = [{"name": "张三", "age": 23, "gender": true},
	{"name": "李四", "age": 24, "gender": true},
	{"name": "王五", "age": 25, "gender": false}];




//获取person对象中所有的键和值
//for in 循环
/* for(var key in person){
	//这样的方式获取不行。因为相当于  person."name"
	//alert(key + ":" + person.key);
	alert(key+":"+person[key]);
}*/

//获取ps中的所有值
for (var i = 0; i < ps.length; i++) {
	var p = ps[i];
	for(var key in p){
		alert(key+":"+p[key]);
	}
}

 

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

JSON解析器：

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

1. JSON转为Java对象

  1. 导入jackson的相关jar包
  2. 创建Jackson核心对象 ObjectMapper
  3. 调用ObjectMapper的相关方法进行转换
//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);

2. Java对象转换JSON

 

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

转换方法：writeValue(参数1，obj):

参数1：

  • File：将obj对象转换为JSON字符串，并保存到指定的文件中
  • Writer：将obj对象转换为JSON字符串，并将json数据填充到字符输出流中
  • OutputStream：将obj对象转换为JSON字符串，并将json数据填充到字节输出流中
//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);

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

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

注解：

  1. @JsonIgnore：排除属性。

  2. @JsonFormat：属性值得格式化

  • @JsonFormat(pattern = "yyyy-MM-dd")
//@JsonIgnore //忽略该属性
@JsonFormat(pattern = "yyyy-MM-dd")
private Date birthday;
//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);

复杂java对象转换

List：数组

//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);
// [{},{},{}]
System.out.println(json);

Map：对象格式一致

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


案例：校验用户名是否存在

regits.html

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>注册页面</title>
    <script src="js/jquery-3.3.1.min.js"></script>


    <script>
        //在页面加载完成后
        $(function () {
            //给username绑定blur事件
            $("#username").blur(function () {
                //获取username文本输入框的值
                var username = $(this).val();
                //发送ajax请求
                //期望服务器响应回的数据格式：{"userExsit":true,"msg":"此用户名太受欢迎,请更换一个"}
                //                         {"userExsit":false,"msg":"用户名可用"}
                $.get("findUserServlet", {username: username}, function (data) {
                    //判断userExsit键的值是否是true

                    // alert(data);
                    var span = $("#s_username");
                    if (data.userExsit) {
                        //用户名存在
                        span.css("color", "red");
                        span.html(data.msg);
                    } else {
                        //用户名不存在
                        span.css("color", "green");
                        span.html(data.msg);
                    }
                });

            });
        });

    </script>
</head>
<body>


<form>

    <input type="text" id="username" name="username" placeholder="请输入用户名">
    <span id="s_username"></span>
    <br>
    <input type="password" name="password" placeholder="请输入密码"><br>
    <input type="submit" value="注册"><br>

</form>

</body>
</html>

FindUserServlet.java


import com.fasterxml.jackson.databind.ObjectMapper;

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;
import java.util.HashMap;
import java.util.Map;


@WebServlet("/findUserServlet")
public class FindUserServlet extends HttpServlet {
    protected void doPost(HttpServletRequest request, HttpServletResponse response) throws ServletException, IOException {
        //1.获取用户名
        String username = request.getParameter("username");

        //2.调用service层判断用户名是否存在

        //期望服务器响应回的数据格式：{"userExsit":true,"msg":"此用户名太受欢迎,请更换一个"}
        //                         {"userExsit":false,"msg":"用户名可用"}

        //设置响应的数据格式为json
        response.setContentType("application/json;charset=utf-8");
        Map<String, Object> map = new HashMap<String, Object>();

        if ("tom".equals(username)) {
            //存在
            map.put("userExsit", true);
            map.put("msg", "此用户名太受欢迎,请更换一个");
        } else {
            //不存在
            map.put("userExsit", false);
            map.put("msg", "用户名可用");
        }

        //将map转为json，并且传递给客户端
        //将map转为json
        ObjectMapper mapper = new ObjectMapper();
        //并且传递给客户端
        mapper.writeValue(response.getWriter(), map);
    }

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

服务器响应的数据，在客户端使用时，要想当做json数据格式使用。有两种解决方案：

  1. $.get(type):将最后一个参数type指定为"json"
  2. 在服务器端设置MIME类型
    response.setContentType("application/json;charset=utf-8");
无区新手
关注
  • 0
    点赞
  • 踩
  • 3
    收藏
    觉得还不错? 一键收藏
  • 0
    评论
专栏目录
AJAX&JSON
qq_53124400的博客
01-14 296
AJAX 概念 Asynchronous JavaScript And XML :异步的JavaScript 和 XML 异步和同步： Ajax是一种在无需重新加载整个网页的情况下，能够更新部分网页的技术，通过在后台与服务器进行少量的数据交换，Ajax可以使网页实现异步更新。这意味着可以不重新加载整个网页的情况下，对网页的某部分进行更新。传统的网页如果需要更新内容，必须重新加载整个网页页面。 实现方式 原生的JS实现方式(了解) JQeury实现方式 ...
AJAX & JSON
qq_45404224的博客
11-04 80
文章目录今日内容AJAX：JSON：案例： 今日内容 1. AJAX： 2. JSON AJAX： 1. 概念： ASynchronous JavaScript And XML 异步的JavaScript 和 XML 1. 异步和同步：客户端和服务器端相互通信的基础上 * 客户端必须等待服务器端的响应。在等待的期间客户端不能做其他操作。 * 客户端不需要等待服务器端的响应。在服务器处理...
AJAX和JSON详解
热门推荐
write less , do more
05-08 1万+
AJAX和JSON详解
ajax中的参数dataType json和contentType applicationjson区别
weixin_49796046的博客
09-20 1703
ajax中的参数dataType: "json"和contentType: "application/json"区别
ajax与json
梦想是很难很难的，所以先勇敢一点
04-19 1102
当json数据的value为null时，转换成对象，获取该对象的value，使用==与null（null是代表空，不是字符串）比较，结果为false;在Java对象转换JSON对象时，get开头的所有方法会被转换。它把对象转换成json串的方式，把所有的属性包括为null的全部输出；尤其是日期，你输入一个yyyy-MM-dd类型日期，它会输出，日历类型，一年中的哪个月，一个月的哪天等等，总之不是我想要的。
Ajax技术详解（二）JSON 详解
长夜漫漫，无心睡眠
05-11 1851
一.JSON 简介 1.介绍 JSON(JavaScript Object Notation) 是一种基于字符串的轻量级的数据交换格式。易于人阅 读和编写，同时也易于机器解析和生成。JSON 是 JavaScript 数据类型的子集。 2.为什么要使用 JSON 在 JSON 未出现之前在 Ajax 中对于数据传递方式，会使用 XML 作为主要数据格式来传输数据。直到 JSON 出现后逐渐放弃使用 XML 作为数据传输格式。JSON 比 XML 更小、更快，更易解析。 二.JSON
ajax写法和json的知识点
m0_59176231的博客
04-23 583
ajax的使用，json的使用
Ajax&Json视频教程
06-28
Ajax（异步JavaScript和XML）和JSON（JavaScript Object Notation）是Web开发中的关键技术，用于构建动态、交互性强的网页应用。本视频教程将深入探讨这两项技术的原理、使用方法以及它们在现代Web开发中的重要性。 ...
Ajax&Json笔记
03-28
在Ajax应用中，JSON经常被用作数据交换格式，因为它能直接被JavaScript解析，不需要额外的解析库。当一个Ajax请求发送到服务器时，服务器端处理请求并返回JSON格式的数据。JavaScript的XMLHttpRequest对象接收到这些...
Ajax&Json&XML.html
02-04
Ajax&Json&XML常用基本操作 JSON数据和Java对象的相互转换 常见的解析器：Jsonlib，Gson，fastjson，jackson JSON转为Java对象 1. 导入jackson的相关jar包 2. 创建Jackson核心对象 ObjectMapper 3.调用...
day22_Ajax&Json教案_docx1
08-04
总结，Ajax 通过异步通信提升了网页的交互性，而 JSON 则提供了高效的结构化数据交换方式。结合 jQuery 等库，可以更便捷地实现 Ajax 功能。同时，了解如何使用 Jackson 等工具处理 JSON 数据是开发中的重要技能。
Ajax&Json基础学习和redis基础学习.zip
07-09
JSON由于其结构与JavaScript对象相似，成为了Ajax通信中数据传输的首选格式，因为它可以方便地在JavaScript中序列化和反序列化。 在JSON的学习中，你需要了解其基本语法，如键值对、数组、字符串、数字、布尔值和...
ajax的post请求数据为json格式相关设置
个人笔记
02-09 2375
平时用request封装axios习惯了突然用ajax传参时一直出问题，原来是配置设置错了。
ajax前后端数据传输的编码格式，Ajax提交json格式的数据、Ajax提交文件数据、Ajax实现弹窗的二次确认、批量增加数据、分页的原理及推导、分页类的使用
m0_69962105的博客
11-21 404
2、默认的编码格式：urlencoded，需要修改contentType类型：json格式的。2、数据传输形式：title=' '&print=' '&publish=' '1、默认情况下，Ajax提交的数据后端还是在request.POST中接受的。注意：对于符合urlencoded格式的数据后端都是在request.POST中接收数据的。文件数据通过request.FILES方式接收数据，不能使用request.POST。1、默认的编码格式是：urlencoded。1、get请求方式没有编码方式。
Ajax 使用& Json
莱克博尔德的博客
04-12 1266
一、ajax 1. Ajax 简介 A JAX = Asynchronous JavaScript and XML（异步的 JavaScript 和 XML）。 A JAX 是与服务器交换数据并更新部分网页的艺术，在不重新加载整个页面的情况下。 1.2 Ajax所包含的技术 ajax并非一种新的技术，而是几种原有技术的结合体。它由下列技术组合而成。 1.使用CSS和XHTML来表示。 2.使用DOM模型来交互和动态显示。 3.使用XMLHttpRequest来和服务器进行异步通信。 4.使
使用 $.ajax 发送json数据示例代码（GET、POST区别）
zcc的博客
04-30 9814
一、GET、POST请求区别： 1、GET请求的数据会附在URL之后（就是把数据放置在HTTP协议头中），以?分割URL和传输数据，参数之间以&相连，如：login.action?name=hyddd&password=idontknow&verify=%E4%BD%A0%E5%A5%BD。如果数据是英文字母/数字，原样发送，如果是空格，转换为+，如果是中文/其他字符，则直接把字符串用BASE64加密，得出如：%E4%BD%A0%E5%A5%BD，其中％XX中的XX为该符号以16进
Go最新AJAX请求（GET、POST、响应JSON）_ajax post json，2024年阿里Golang岗面试必问
最新发布
2401_84923269的博客
05-16 406
既有适合小白学习的零基础资料，也有适合3年以上经验的小伙伴深入学习提升的进阶课程，涵盖了95%以上Go语言开发知识点，真正体系化！由于文件比较多，这里只是将部分目录截图出来，全套包含大厂面经、学习笔记、源码讲义、实战项目、大纲路线、讲解视频，并且后续会持续更新如果你需要这些资料，可以戳这里获取 点击发送请求 ``` 在浏览器中打开后如下，再写一个服务端js（server.js），/server是路径 输入http://127.0.0.1:8000/server访问请求后响应得到预置
Ajax中发送get、post请求以及服务端响应json数据
katherin_wanzi的博客
06-07 1166
1.发送get请求 get.html代码： <!DOCTYPE html> <html lang="en"> <head> <meta charset="UTF-8"> <meta name="viewport" content="width=device-width, initial-scale=1.0"> <meta http-equiv="X-UA-Compatible" content="ie=edge"&gt
JavaWeb之JSP&EL表达式&JSTL标签01
无区新手的博客
04-26 3570
刘意老师整理 JSP 概念： Java Server Pages： java服务器端页面 可以理解为：一个特殊的页面，其中既可以指定定义html标签，又可以定义java代码 用于简化书写！！！ 原理 JSP本质上就是一个Servlet JSP的脚本：JSP定义Java代码的方式 <% 代码 %>：定义的java代码，在service方法中。service...
Ajax与JSON详解：核心技术与应用场景
"本文介绍了Ajax和Json的基本概念，包括Ajax的工作原理和Json的特性，并强调了它们在Web开发中的重要性。Ajax是一种利用JavaScript与服务器进行异步数据交换的技术，而Json是一种轻量级的数据交换格式，常用于Ajax...
评论
添加红包

请填写红包祝福语或标题

个

红包个数最小为10个

元

红包金额最低5元

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

抵扣说明：

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

余额充值