科技加盟网站建设,自动修改wordpress,设计摄影作品,智能响应式网站建设JSON JSon在线文档#xff1a; JSON 简介
JSON(JavaScript Object Notation, JS 对象标记) 是一种轻量级的数据交换格式。轻量级指的是跟xml做比较。数据交换指的是客户端和服务器之间业务数据的传递格式。
它基于 ECMAScript (W3C制定的JS规范)的一个子集#xff0c;采…JSON JSon在线文档 JSON 简介
JSON(JavaScript Object Notation, JS 对象标记) 是一种轻量级的数据交换格式。轻量级指的是跟xml做比较。数据交换指的是客户端和服务器之间业务数据的传递格式。
它基于 ECMAScript (W3C制定的JS规范)的一个子集采用完全独立于编程语言的文本格式来存储和表示数据【即 java 、php、asp.net , go 等都可以使用 JSON】。
简洁和清晰的层次结构使得 JSON 成为理想的数据交换语言。 易于人阅读和编写同时也易于机器解析和生成并有效地提升网络传输效率。
JSON语法 [] 表示数组[{名称1:值,名称2:值},{名称1:值,名称2:值}]{} 表示对象{名称1:值,名称2:值}“” 表示是属性名或字符串类型的值: 表示属性和值之间的间隔符, 表示多个属性的间隔符或者是多个元素的间隔符 var 变量名 {
k1 : value, // Number 类型
k2 : value, // 字符串类型
k3 : [], // 数组类型
k4 : {}, // json 对象类型
k5 : [{},{}] // json 数组
};
JSON对象和字符串对象相互转换
JSON 是一个内建对象有方法可以使用 JSON.stringify(json) //将一个 json对象 转换成为 json字符串 JSON.parse( jsonString ) //将一个 json字符串 转换成为 json对象 script typetext/javascript// 一个 json 对象 var jsonObj {name: 小明, age: 10}; // 把 json 对象转换成为字符串对象 var jsonStr JSON.stringify(jsonObj); console.log(jsonStr);// 把 json 对象的字符串转换成为 json 对象 var jsonObj2 JSON.parse(jsonStr); console.log(jsonObj2);
/script
在Java中的应用
java中使用json需要引入到第3方的包gson.jarGson是Google提供的用来在Java对象和JSON数据之间进行映射的Java类库可以对JSON字符串和Java对象相互转换。
应用场景
Javabean对象和json字符串的转换List对象和json字符串的转换map对象和json字符串的转换
需求
1) 在输入框输入用户名
2) 点击验证用户名, 使用 ajax 方式 服务端验证该用户名是否已经占用了, 如果该用户已经占用, 以 json 格式返回该用户信息
3) 假定用户名为 king , 就不可用, 其它用户名可以
4) 对页面进行局部刷新, 显示返回信息import com.google.gson.Gson;
import com.google.gson.reflect.TypeToken;import java.lang.reflect.Type;
import java.util.ArrayList;
import java.util.HashMap;
import java.util.List;
import java.util.Map;public class JavaJson {public static void main(String[] args) {//创建一个gson对象做完一个工具对象使用Gson gson new Gson();//演示javabean 和 json字符串的转换Book book new Book(100, 老师零基础学Java);//1. 演示把javebean - json字符串String strBook gson.toJson(book);System.out.println(strBook strBook);//2. json字符串-javabean//(1) strBook 就是 json字符串//(2) Book.class 指定将 json字符串转成 Book对象//(3) 底层是反射机制Book book2 gson.fromJson(strBook, Book.class);System.out.println(book2 book2);//3. 演示把list对象 - json字符串ListBook bookList new ArrayList();bookList.add(new Book(200, 天龙八部));bookList.add(new Book(300, 三国演义));//因为把对象,集合转成字符串, 相对比较简单底层只需要遍历, 按照json格式拼接返回即可String strBookList gson.toJson(bookList);System.out.println(strBookList strBookList);//4. 演示把json字符串 - list对象//(1) 如果需要把json字符串 转成 集合这样复杂的类型, 需要使用gson提供的一个类//(2) TypeToken , 是一个自定义泛型类, 然后通过TypeToken来指定我们需要转换成的类型/*com.google.gson.reflectpublic class TypeTokenT {final Class? super T rawType;final Type type;final int hashCode;protected TypeToken() {this.type getSuperclassTypeParameter(this.getClass());this.rawType Types.getRawType(this.type);this.hashCode this.type.hashCode();}*///(1) 返回类型的完整路径java.util.Listcom.hspedu.json.Book//(2) gson的设计者需要得到类型的完整路径然后进行底层反射//(3) 所以gson 设计者就提供TypeToken, 来搞定.//二说 TypeToken , 为甚要加 {}//(1) 如果我们 new TypeTokenListBook() 提示// TypeToken() has protected access in com.google.gson.reflect.TypeToken//(2) 因为TypeToken 的无参构造器是protected 而 new TypeTokenListBook() 就是调用其无参构造器//(3) 根据java基础, 如果一个方法是protected ,而且不在同一个包 是不能直接访问的, 因此报错//(4) 为什么 new TypeTokenListBook(){} 使用就可以这里就涉及到匿名内部类的知识.//(5) 当 new TypeTokenListBook(){} 其实这个类型就是不是 TypeToken 而是一个匿名内部类(子类)//(6) 而且这个匿名内部类是有自己的无参构造器(隐式), 根据java基础规则 当执行子类的无参构造器时, 默认super();//三说 TypeToken-举一个例子.[对java基础回顾.]Type type new TypeTokenListBook() {}.getType();ListBook bookList2 gson.fromJson(strBookList, type);System.out.println(bookList2 bookList2);//5, 把map对象-json字符串MapString, Book bookMap new HashMap();bookMap.put(k1, new Book(400, 射雕英雄传));bookMap.put(k2, new Book(500, 西游记));String strBookMap gson.toJson(bookMap);System.out.println(strBookMap strBookMap);//6. 把json字符串 - map对象// new TypeTokenMapString, Book() {}.getType() java.util.Mapjava....String,com.hspedu.json.BookMapString, Book bookMap2 gson.fromJson(strBookMap,new TypeTokenMapString, Book() {}.getType());System.out.println(bookMap2 bookMap2);}
}Ajax
介绍
官网AJAX 简介
同步和异步是建立在客户端和服务器端相互通信的基础上
同步客户端必须等待服务器端的响应在等待的期间客户端不能做其它的操作。异步客户端不需要等待服务器的响应在服务器处理请求的过程中客户端可以进行其它操作。
AJAX ASynchronous JavaScript And XML 异步的JavaScript和XMLAJAX是一种用于创建快速动态网页的技术。【是对原生XHR的封装为了达到我们跨越的目的增添了对JSONP的支持】
AJAX是一种在无需重新加载整个网页的情况下能够更新部分网页的技术提升用户的体验。通过在后台与服务器进行少量数据交换AJAX可以使网页实现异步更新。这意味着可以在不重新加载整个网页的情况下对网页的某部分进行更新。【实现局部数据的刷新】
传统的网页不使用AJAX如果需要更新内容必须重新加载整个网页页面。
应用场景 搜索引擎根据用户输入关键字自动提示检索关键字 动态加载数据按需取得数据【树形菜单、联动菜单...】 改善用户体验 【输入内容前提示、带进度条文件上传...】 电子商务应用 【购物车、邮件订阅...】 访问第三方服务 【访问搜索服务、rss 阅读器】 页面局部刷新 https://piaofang.maoyan.com/dashboard
执行流程 1. 创建XMLHttpRequest异步对象2. 设置回调函数3. 使用open方法与服务器建立连接4. 向服务器发送数据5. 在回调函数中针对不同的响应状态进行处理
//1、创建XMLHttpRequest对象[ajax引擎对象]
var xhr new XMLHttpRequest();
//2、准备指定数据
var uname document.getElementById(uname).value;
xhr.open(GET, /json_ajax/checkUserServlet?uname uname, true);
//3、在send函数调用前给XMLHttpRequest 绑定一个事件onreadystatechange
//该事件表示可以去指定一个函数每当 xhr对象readyState 改变时
//就会触发 onreadystatechange 事件
xhr.onreadystatechange function () {//console.log(xhr, xhr)if (xhr.readyState 4 xhr.status 200) {//获取返回的json数据var responseText xhr.responseText;console.log(返回的信息 responseText);}
}
//4、发送数据
xhr.send(); 方法描述open(method,url,async) 规定请求的类型、URL 以及是否异步处理请求。 method请求的类型GET 或 POSTurl文件在服务器上的位置asynctrue异步或 false同步并且XMLHttpRequest 对象如果要用于 AJAX 的话其 open() 方法的 async 参数必须设置为 truesend(string)将请求发送到服务器。string仅用于 POST 请求 XMLHttpRequest 对象的三个重要的属性
属性描述onreadystatechange 存储函数或函数名每当 readyState 属性改变时就会调用该函数。 该函数中规定当服务器响应已做好被处理的准备时所执行的任务。 readyState 存有 XMLHttpRequest 的状态。从 0 到 4 发生变化。 0: 请求未初始化1: 服务器连接已建立2: 请求已接收3: 请求处理中4: 请求已完成且响应已就绪status例200: “OK” 404: 未找到页面 应用案例 需求 1) 在输入框输入用户名 2) 点击验证用户名, 使用 ajax 方式 服务端验证该用户名是否已经占用了, 如果该用户已经占用, 以 json 格式返回该用户信息 3) 假定用户名为 king , 就不可用, 其它用户名可以 》 后面我们接入 DB[MysqlJDBC] 4) 对页面进行局部刷新, 显示返回信息 实现步骤 1、创建User.java 2、创建CheckUserServlet.java 3、创建login.html 4、验证浏览器输入 http://localhost:8080/web/login.html html页面
!DOCTYPE html
html langen
headmeta charsetUTF-8title用户注册/titlescript typetext/javascriptwindow.onload function () { //页面加载后执行functionvar checkButton document.getElementById(checkButton);//给checkButton绑定onclickcheckButton.onclick function () {//1. 创建XMLHttpRequest对象(!!!) [ajax引擎对象]var xhr new XMLHttpRequest();// 获取用户填写的用户名var uname document.getElementById(uname).value;//2. 准备发送指定数据 open, send//(1)GET 请求方式可以 GET/POST//(2)/ajax/checkUserServlet?username uname 就是 url//(3)true , 表示异步发送xhr.open(GET, /ajax/checkUserServlet?uname uname, true);//在send函数调用前给XMLHttpRequest 绑定一个事件onreadystatechange,该事件表示可以去指定一个函数当数据变化会触发onreadystatechange// 每当 xhr对象readyState 改变时就会触发 onreadystatechange 事件//4.获取服务器响应数据xhr.onreadystatechange function () {//如果请求已完成且响应已就绪, 并且状态码是200if (xhr.readyState 4 xhr.status 200) {//把返回的jon数据,显示在divdocument.getElementById(div1).innerHTML xhr.responseText;// console.log(xhr, xhr)var responseText xhr.responseText;//console.log(返回的信息 responseText);if (responseText ! ) {//执行...document.getElementById(myres).value 用户名不可用} else {document.getElementById(myres).value 用户名可用}}}//3. 真正的发送ajax请求[http请求]// 如果你POST 请求再send(发送的数据)xhr.send();}}/script
/headbody
h1用户注册~/h1
form action/ajax/checkUserServlet methodpost用户名字:input typetext nameuname idunameinput typebutton idcheckButton value验证用户名input styleborder-width: 0;color: red typetext idmyresbr/br/用户密码:input typepassword namepasswordbr/br/电子邮件:input typetext nameemailbr/br/input typesubmit value用户注册
/form
h1返回的json数据/h1
div iddiv1/div
/body/html
Servlet代码
public class User {private Integer id;private String name;private String password;private String email;
。。。。。。
}import com.google.gson.Gson;
import com.hspedu.ajax.entity.User;import javax.servlet.*;
import javax.servlet.http.*;
import java.io.IOException;public class CheckUserServlet extends HttpServlet {Overrideprotected void doGet(HttpServletRequest request, HttpServletResponse response) throws ServletException, IOException {doPost(request, response);}Overrideprotected void doPost(HttpServletRequest request, HttpServletResponse response) throws ServletException, IOException {System.out.println(CheckUserServlet 被调用......);//获取前端请求参数String name request.getParameter(name);System.out.println(name name);response.setContentType(text/html;charsetutf-8);if (king.equals(name)) {User king new User(100, king, 123hsp, kingsohu.com);response.getWriter().write(new Gson().toJson(king));// response.getWriter().write(不可用);//限制前端的功能实现} else {response.getWriter().write();}}
} 1. 编写原生的 Ajax 要写很多的代码 还要考虑浏览器兼容问题 使用不方便。 2. 在实际工作中 一般使用 JavaScript 的库(比如 Jquery) 发送 Ajax 请求 从而解决这个问题 //JavaSE 和 Javaweb方式 加载properties配置文件的方法不同//JavaSE中加载properties配置文件的方法为
properties.load(new FileInputStream(src\\druid.properties));//javaweb方式加载properties配置文件的方法为
//要获取src目录下的文件需要使用类加载器
properties.load(JDBCUtilsByDruid.class.getClassLoader().getResourceAsStream(druid.properties));JQuery 的 Ajax 请求
官网jQuery AJAX get() 和 post() 方法
在jQuery中使用AJAX
1.首先要导入script src/static/jquery-3.3.1.js/script2.绑定事件 $(#b1).on(click,function(){})3.在事件中写入要操作的事$.ajax() 实现方法
$.ajax 方法
!DOCTYPE html
html langen
headmeta charsetUTF-8title用户注册/titlescript typetext/javascriptsrc./script/jquery-3.6.0.min.js/scriptscript typetext/javascript$(function () {//发出ajax/*** 1. 指定参数时需要在{}* 2. 给参数时前面需要指定参数名* 3. dataType: json 要求服务器返回的数据格式是json*/$(#checkbutton).click(function () {$.ajax({// url: checkUser,url: /web/checkUser,//请求路径type: POST,//请求方式async: true, //采用异步的通信方式cache: true, //使用缓存data: {//传日期, 是为了浏览器缓存username: $(#uname).val(),data: new Date()},error: function () {表示如果请求响应出现错误会执行的回调函数console.log(失败~)},/**data - 服务器返回的数据status - 包含调用的状态xhr - 包含 XMLHttpRequest 对象*/success: function (data, status, xhr) {//响应成功后的回调函数console.log(成功);console.log(data, data);console.log(status, status);console.log(xhr, xhr);
//data是json对象- 显示转成json的字符串$(#div1).html(JSON.stringify(data));//对返回的结果进行处理if ( data.username) {$(#myres).val(该用户名可用);} else {$(#myres).val(该用户名不可用);}},dataType: json//设置接受到的响应数据的格式})})})/script
/headbody
h1用户注册/h1form action/web/checkUser methodpost!--form actioncheckUser methodpost--用户名字:input typetext nameusername idunameinput typebutton idcheckbutton value验证用户名input styleborder-width: 0;color: red typetext idmyresbr/br/用户密码:input typepassword namepasswordbr/br/电子邮件:input typetext nameemailbr/br/input typesubmit value用户注册
/formh1返回的 json 数据/h1
div iddiv1/div/body
/html
$.get请求和$.post请求
说明
//1.$.get() 默认是get请求不需要指定 请求方式
//2.不需要指定参数名
//3.填写的实参是顺序 url, data, success回调函数, 返回的数据格式
//讲解.get() 使用
$.get(/ajax/checkUserServlet2,{username: $(#uname).val(),date: new Date()},function (data, status, xhr) {console.log($.get() 成功);console.log(data, data);console.log(status, status);console.log(xhr, xhr);//data是json对象- 显示转成json的字符串$(#div1).html(JSON.stringify(data));//对返回的结果进行处理if ( data.username) {$(#myres).val(该用户名可用);} else {$(#myres).val(该用户名不可用);}},json
)//老师说明$.post() 和 $.get() 的方式一样
//只是这时是按照post方式发送ajax请求
$.post(/ajax/checkUserServlet2,{username: $(#uname).val(),date: new Date()},function (data, status, xhr) {console.log($.post() 成功);console.log(data, data);console.log(status, status);console.log(xhr, xhr);//data是json对象- 显示转成json的字符串$(#div1).html(JSON.stringify(data));//对返回的结果进行处理if ( data.username) {$(#myres).val(该用户名可用);} else {$(#myres).val(该用户名不可用);}},json
)
}$.getJSON
//1. 如果你通过jquery发出的ajax请求是get 并且 返回的数据格式是json
//2. 可以直接使用getJSON() 函数就很简洁
$.getJSON(/ajax/checkUserServlet2,{username: $(#uname).val(),date: new Date()},function (data, status, xhr) {//成功后的回调函数console.log($.getJSON 成功);console.log(data, data);console.log(status, status);console.log(xhr, xhr);//data是json对象- 显示转成json的字符串$(#div1).html(JSON.stringify(data));//对返回的结果进行处理if ( data.username) {$(#myres).val(该用户名可用);} else {$(#myres).val(该用户名不可用);}}
)其他
javabean 特点 public 修饰的类 ,public 无参构造 所有属性(如果有) 都是private并且提供set/get (如果boolean 则get 可以替换成is) 分类 封装数据的JavaBean也被叫做实体类一般来说对应的是数据库中的一张表。 封装逻辑的JavaBean用于实现业务逻辑目的是为了提高代码的复用和解耦。
