JSON和AJAX
发布日期:2021-07-27 04:56:04 浏览次数:7 分类:技术文章

本文共 7443 字,大约阅读时间需要 24 分钟。

一、Json

1.1 概述

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

主要应用就是,将前端传来的字符串转为java类对象,或者将java类对象转为字符串。

1.2 语法和值

【[ ] 】 表示数组

【{ } 】 表示对象
【""】【’’】 表示是属性名或字符串类型的值
【:】 表示属性和值之间的分隔符
【,】表示多个属性的间隔符或者是多个元素的间隔符

数字(整数或浮点数)

字符串(在双引号或单引号中)
逻辑值(true 或 false)
数组(在中括号中)
对象(在大括号中)
null

1.3 html中演示

    
Json语法

1.4 后端Json解析

需要使用jar包工具类:

(1)FastJson ,由阿里巴巴提供【常用】
(2)Jackson,国外的解析工具【难用】

创建对象一个Person类,包含姓名、年龄和地址。

FastJson解析

ublic class ObjectToJson {
public static void main(String[] args) {
fastjson1(); fastjson2(); } /** * 将java对象转为Json格式字符串 * (1)阿里的工具fastjson * 注意事项:1.如果不需要某个属性,可以在Person类中的某一个【属性】上面加上注解@JSONField(serialize = false) * 2.构造方法中写入【JSON.toJSONString(p1, SerializerFeature.PrettyFormat)】,美化格式输出 * 3.构造方法写入【JSON.toJSONString(p1, SerializerFeature.WriteMapNullValue)】,属性为空也打印 * 4.构造方法中写入【JSON.toJSONString(p1, SerializerFeature.WriteNullStringAsEmpty)】,属性为空以【""】打印 * 5.关闭循环检测SerializerFeature.DisableCircularReferenceDetect,默认是开启的 * 应对的情况是:A类中有一个属性是要创建B类对象,B类中有一个属性是创建A类对象,这样会发生死循环 * 但是,当使用List集合,两次添加同一个对象的时候,会发生错误 {"$ref":"$[0]"},这里可以展示关闭 */ public static void fastjson1() {
Person p1 = new Person("张三", 27, null); String jsonP1 = JSON.toJSONString(p1, SerializerFeature.WriteNullStringAsEmpty); System.out.println(jsonP1); Person p2 = new Person("李四", 22, "上海"); Person p3 = new Person("王五", 25, "广州"); List
persons = new ArrayList<>(); persons.add(p1); persons.add(p2); persons.add(p3); persons.add(p1); String jsonPersons = JSON.toJSONString(persons, SerializerFeature.WriteMapNullValue, SerializerFeature.DisableCircularReferenceDetect); System.out.println(jsonPersons); } /** * 使用json字符串转为java对象,注意字符串的书写格式 */ public static void fastjson2() {
String str = "{\"name\":\"张三\",\"age\":20, \"address\":\"北京\"}"; Person person = JSON.parseObject(str, Person.class); System.out.println(person.toString()); }}

JackSon解析【了解】

public class JacksonDemo {
public static void main(String[] args) throws IOException {
jackson1(); jackson2(); } /** * 使用jackson将对象转字符串 * 注意事项: * (1)@JsonIgnore注解用于排除某个属性,这样该属性就不会被Jackson序列化和反序列化 * (2)mapper.enable(SerializationFeature.INDENT_OUTPUT);美化输出 * (3)允许序列化空的属性类(否则会抛出异常)mapper.disable(SerializationFeature.FAIL_ON_EMPTY_BEANS); */ public static void jackson1() throws JsonProcessingException {
Person p1 = new Person("张三", 27, null); Person p2 = new Person("李四", 22, "上海"); Person p3 = new Person("王五", 25, "广州"); ObjectMapper objectMapper = new ObjectMapper(); objectMapper.enable(SerializationFeature.INDENT_OUTPUT, SerializationFeature.FAIL_ON_EMPTY_BEANS);//美化 String str1 = objectMapper.writeValueAsString(p1); System.out.println(str1); ArrayList
list = new ArrayList<>(); list.add(p1); list.add(p2); list.add(p3); String str = objectMapper.writeValueAsString(list); System.out.println(str); } /** * 字符串转对象 */ public static void jackson2() throws IOException {
String str = "{\"name\":\"张三\",\"age\":20, \"address\":\"北京\"}"; ObjectMapper objectMapper = new ObjectMapper(); Person person = objectMapper.readValue(str, Person.class); System.out.println(person.toString()); }}

二、AJAX技术

2.1 概述

AJAX 是一种在无需重新加载整个网页的情况下,能够实现局部更新的技术。

AJAX = 异步 JavaScript 和 XML。 (Asynchronized JavaScript And XML)

AJAX 是一种用于创建快速动态网页的技术。

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

2.2 工作原理

在这里插入图片描述

AJAX是基于现有的Internet标准,并且联合使用它们:

  • XMLHttpRequest 对象 (异步的与服务器交换数据)
  • JavaScript/DOM (信息显示/交互)
  • CSS (给数据定义样式)
  • XML (作为转换数据的格式)、JSON

2.3 基本步骤

  1. 创建XMLHTTPRequest对象
  2. 设置onreadystatechange回调函数
  3. open() 打开连接
  4. send() 发送请求
    
AJAX入门

注意事项

  1. 创建XMLHttpRequest对象,起初并非所有浏览器都支持,所以应对老版本浏览器,需要使用以下语句,进行兼容处理
var xhr = null;if (window.XMLHttpRequest) {
xhr = new XMLHttpRequest(); //判断浏览器是否支持ajax} else {
xhr = new ActiveXObject("Microsoft.XMLHTTP");}
  1. onreadystatechange回调函数

当请求被发送到服务器时,我们需要执行一些基于响应的任务。每当 readyState 改变时,就会触发 onreadystatechange 事件。readyState 属性存有 XMLHttpRequest 的状态信息。

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

属性 描述
onreadystatechange 存储函数(或函数名),每当 readyState 属性改变时,就会调用该函数。
readyState 存有 XMLHttpRequest 的状态。从 0 到 4 发生变化。0: 请求未初始化1: 服务器连接已建立2: 请求已接收3: 请求处理中4: 请求已完成,且响应已就绪
status 200: "OK"404: 未找到页面

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

当 readyState 等于 4 且状态为 200 时,表示响应已就绪:

  1. XMLHttpRequest请求

如需将请求发送到服务器,我们使用 XMLHttpRequest 对象的 open() 和 send() 方法。

方法 描述
open(method,url,async) 规定请求的类型、URL 以及是否异步处理请求。method:请求的类型;GET 或 POSTurl:文件在服务器上的位置async:true(异步)或 false(同步)
send(string) 将请求发送到服务器。string:仅用于 POST 请求
  1. 使用post请求方式注意的问题

如果需要像 HTML 表单那样 POST 数据,请使用 setRequestHeader() 来添加 HTTP 头

//使用post请求的时候,信息不能直接在url里呈现,必须放到send方法中xmlhttp.open("POST","/try/ajax/servlet4",true);//请求头类型其实就是form表单的enctype属性值xmlhttp.setRequestHeader("Content-type","application/x-www-form-urlencoded");xmlhttp.send("username=leilei&password=123");

2.4 案例——注册的时候提示用户名是否可用

servlet部分

@WebServlet(name = "CheckUserServlet", value = "/checkuser")public class CheckUserServlet extends HttpServlet {
protected void doPost(HttpServletRequest request, HttpServletResponse response) throws ServletException, IOException {
request.setCharacterEncoding("utf-8"); String username = request.getParameter("username"); List
users = new ArrayList<>(); //集合,模拟数据库 Collections.addAll(users, "张三", "李四", "王五"); if (users.contains(username)) {
//这里可以使用write和print,但是不能使用println,因为换行也会输出,导致前端接收的数据带有换行字符,从而出错 response.getWriter().println("1"); //有相关的用户名,就发送1 } else {
response.getWriter().write("0"); //没有就发送0,可以注册 } } protected void doGet(HttpServletRequest request, HttpServletResponse response) throws ServletException, IOException {
doPost(request, response); }}

ajax部分

    
用户注册

用户注册

2.5 案例——Ajax与Json的联用

servlet部分,这里要注意,编码更改,让浏览器按照json格式解读

@WebServlet(name = "JsonServlet",value = "/json")public class JsonServlet extends HttpServlet {
protected void doPost(HttpServletRequest request, HttpServletResponse response) throws ServletException, IOException {
//要告诉浏览器json格式 response.setContentType("application/json;charset=utf-8"); /** * 内容类型(MIME)多用途互联网扩展类型,告诉浏览器文件是什么类型,并用相应浏览器打开 * text/html text/css text/javascript text/json application/json image/jpg image/png image/bmp */ Person person = new Person("李老欧六", 30, "五棵松"); String jsonstr = JSON.toJSONString(person); response.getWriter().println(jsonstr); } protected void doGet(HttpServletRequest request, HttpServletResponse response) throws ServletException, IOException {
doPost(request, response); }}

html部分

    
ajax请求json数据

三、IDEA配置Json插件

IDEA 插件:可以将JSON字符串转为类,进行批量处理,非常方便。

在这里插入图片描述

在对应的类中,右键选择Generate,或者使用ALT+Insert按键,然后选择GsonFormat,将Json字符串复制过来,直接生成即可。

转载地址:https://blog.csdn.net/qq_45337431/article/details/100605865 如侵犯您的版权,请留言回复原文章的地址,我们会给您删除此文章,给您带来不便请您谅解!

上一篇:jQuery
下一篇:Web之过滤器Filter

发表评论

最新留言

路过,博主的博客真漂亮。。
[***.116.15.85]2024年10月05日 16时45分31秒