JSON和Ajax
一、JSON
1.JSON的介绍
- JSON指的是JavaScript对象表示法（JavaScript Object Notation）
- JSON是轻量级的文本数据交换格式
- JSON独立于语言[java,php,asp.net等都可以使用JSON]
- JSON具有自我描述性，更容易理解
2.JSON的简单使用
代码
window.onload = function () { var myJson = { name: "李四", age:20, book:{"name":"活着",prices:20}, student:[{name:"张三",age: 20},{name:"王五",age:18}], array:[12,"haha",30.33] } console.log("name="+ myJson.name); console.log("age="+ myJson.age); console.log("book.name="+ myJson.book.name); console.log("book.prices="+myJson.book.prices); console.log("student[0].name"+myJson.student[0].name); console.log("student[0].age"+ myJson.student[0].age); console.log("array[0]="+myJson.array[0]); console.log("array[0]="+myJson.array[1]); }JSON规则
- 映射（元素/属性）用冒号":"表示，“名称”:值，注意名称是字符串，因此要用双引号引起来，也可以不使用双引号
- 并列的数据之间用逗号，分离。
- 映射的集合（对象）用大括号{}表示。
- 并列数据的集合（数组）用方括号[]表示,[{"名称1":值,"名称2":值},{"名称1":值,"名称2":值}]
- 元素值类型：string,number,object,array,true,false,null
3.JSON转字符串
JSON.stringify(json)功能：将一个JSON对象转换成为JSON字符串
JSON.parse(jsonString)功能：将一个json字符串转换成为JSON对象
代码
<!DOCTYPE html> <html lang="en"> <head> <meta charset="UTF-8"> <title>Title</title> <script type="text/javascript"> window.onload=function () { // console.log(JSON) var myJson ={ name:"李华", age:20, id:123466 } var stringify = JSON.stringify(myJson); // console.log(stringify) var s = "{\"name\":\"王五\",\"age\":20}"; var parse = JSON.parse(s); console.log(parse); console.log("name= ",parse.name) } </script> </head> <body> </body> </html>
4.JSON和字符串相互转换注意细节
- JSON.springify(json对象)会返回对应的string，并不会影响原来的JSON对象
- JSON.parse(string)函数会返回对应的JSON对象，并不会影响原来string
- 在定义JSON对象时，可以使用' '表示字符串
- 但是在把原生字符串转成JSON对象是，必须使用" "，否则会报错
- JSON.springify(json对象)返回的字符串，都是" "表示的字符串，所以在语法格式正确的情况下，是可以重新转成JSON对象的
5.JSON在java中应用场景
说明
- java中使用JSON，需要引入第三方的gson.jar
- Gson是Google提供的用来在java对象和JSON数据之间进行映射的java类库
- 可以对JSON字符串和Java对象来相互转换
应用场景
- JavaBean对象和JSON字符串的转换
- List对象和JSON字符串的转换
- Map对象和JSON字符串的转换
代码
package com.leon.bean; 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; /** * ClassName:JavaJson * Package:com.leon.bean * Description: * * @Author: leon-->ZGJ * @Create: 2023/11/16 20:16 * @Version: 1.0 */ public class JavaJson { public static void main(String[] args) { Gson gson = new Gson(); // javaBean转JSON字符串 // Book book = new Book("1001","活着"); // // // String json = gson.toJson(book); // // System.out.println(json); //// JSON字符串转javaBean //// 1.json指的是JSON字符串 //// 2.Book.class 指定将JSON字符串转换成Book对象 //// 3.底层使用的是反射机制 // Book book1 = gson.fromJson(json, Book.class); // // System.out.println(book1); // 把List转换成为JSON字符串 List<Book> list = new ArrayList<>(); list.add(new Book("1002","骆驼祥子")); list.add(new Book("1003","兄弟")); list.add(new Book("1004","许三观卖血记")); String json1 = gson.toJson(list); System.out.println(json1); // JSON字符串转换成List对象 // 如果需要把JSON字符串转成集合这样复杂的类型，需要使用Gson提供的一个类：TypeToken // TypeToken是一个自定义泛型类,然后通过TypeToken来指定我们需要的类型 /** * package com.google.gson.reflect; * public class TypeToken<T> { * 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.List<com.leon.bean.Book> * 2.需要的得到类型的完整路径，然后进行底层反射 * 3.因而提供TypeToken来获取类型的完整路径 * new TypeToken<List<Book>>() {} * 为什么要加一个{}，不直接使用这个(new TypeToken<List<Book>>())呢？ * 1. 因为TypeToken的无参构造器的权限是protected，在在不同包下不能调用无参构造器，只有子类，同包，同类 * 访问修饰符 同类 同包 子类 不同包 * public √ √ √ √ * protected √ √ √ × * 没有修饰符(默认) √ √ × × * private √ × × × * 2.如果直接使用new TypeToken<List<Book>>()就相当于调用了无参构造器，因而会报错 * 3.所以使用匿名内部类的形式来解决问题new TypeToken<List<Book>>() {} * 4.new TypeToken<List<Book>>() {}这个是TypeToken的子类，通过调用子类的无参构造器来调用TypeToken的无参构造器，这样就满足条件了 * 因为子类的无参构造器默认有super()这个调用，来调用父类的无参构造器 * * */ Type type = new TypeToken<List<Book>>() {}.getType(); System.out.println("Type= " + type); List<Book> o = gson.fromJson(json1, type); System.out.println(o); // Map对象转换成JSON字符串 Map<String,Book> map = new HashMap<>(); map.put("key1",new Book("1005","三国演义")); map.put("key2",new Book("1006","西游记")); String json = gson.toJson(map); System.out.println(json); // JSON字符串转换成Map对象 Map o1 = gson.fromJson(json, new TypeToken<Map<String, Book>>() {}.getType()); System.out.println(o1); } }
二、JavaScript中的原生Ajax
1.基本介绍
- AJAX即“Asynchronous JavaScript And XML”（异步JavaScript和XML）
- Ajax是一种浏览器异步发起请求，局部更新页面的技术
2.Ajax经典应用场景
- 搜索引擎根据用户输入关键字，自动提示检索关键字
- 动态加载数据，按需取得数据【树形菜单、联动菜单.....】
- 改善用户体验。【输入内容前提示、带进度条文件上传......】
- 电子商务应用。【购物车、邮件订阅.....】
- 访问第三方服务。【访问搜索服务、rss阅读器】
- 页面局部刷新
3.通讯方式比对
传统web
Ajax
三、jQuery中的Ajax
1. jQuery中的Ajax函数
$.ajax()方法
- url:请求的URL地址
- type:请求的方式get或post
- date:发送到服务器的数据，将自动转换为请求字符串格式
- success:成功的回调函数
- error:失败的回调函数
- dataType:返回的数据类型，常用JSON或text
$.get()方法
- url:请求的URL地址
- date:发送到服务器的数据，将自动转换为请求字符串格式
- success:成功的回调函数
- dataType:返回的数据类型，xml,html,script,json,text
- 说明$.get()和$.post()底层还是使用$.ajax()方法来实现异步请求
$.post()方法
- url:请求的URL地址
- date:发送到服务器的数据，将自动转换为请求字符串格式
- success:成功的回调函数
- dataType:返回的数据类型，xml,html,script,json,text
- 说明$.get()和$.post()底层还是使用$.ajax()方法来实现异步请求
$.getJSON()方法
- url:请求的URL地址
- date:发送到服务器的数据，将自动转换为请求字符串格式
- success:成功的回调函数
- $.getJson()底层使用$.ajax()方法来实现异步请求
- 使用$.getJson()方法需要满足是get请求方式和JSON数据格式才可以
代码
<!DOCTYPE html> <html lang="en"> <head> <meta charset="UTF-8"> <title>用户注册</title> <script type="text/javascript" src="./script/jquery-3.7.1.min.js"></script> <script type="text/javascript"> $(document).ready(function () { $("#checkButton").click(function (){ // $.ajax({ // /* // + url:请求的URL地址 // + type:请求的方式get或post // + date:发送到服务器的数据，将自动转换为请求字符串格式 // + success:成功的回调函数 // + error:失败的回调函数 // + dataType:返回的数据类型，常用JSON或text // */ // url:"/jsonandajax/checkUserServlet2", // type:"post", // data:{ // // 为什么这里使用一个new Date() // //是为防止缓存，因为有的浏览器会有缓存，如果数据没有发生变化，不给你传输新的数据 // // 如果每次都发送日期，浏览器就会每次都发送一个新请求，保证数据实时更新 // username:$("#uname").val(), // date:new Date() // }, // success:function (data,status,xhr) { // // console.log("成功~~") // // console.log("data=",data); // // console.log("status=",status); // // console.log("xhr=",xhr); // if(data.name != ""){ // $("#myres").val("用户名不可用") // // 此时的data是一个对象。要转换成一个字符串 // $("#div1").text(JSON.stringify(data)) // }else { // $("#myres").val("用户名可用") // $("#div1").text(JSON.stringify(data)) // } // }, // error:function () { // console.log("失败~~") // }, // dataType:"json" // }) // $.get( // "/jsonandajax/checkUserServlet2", // { // // 为什么这里使用一个new Date() // //是为防止缓存，因为有的浏览器会有缓存，如果数据没有发生变化，不给你传输新的数据 // // 如果每次都发送日期，浏览器就会每次都发送一个新请求，保证数据实时更新 // username:$("#uname").val(), // date:new Date() // }, // function (data,status,xhr) { // // console.log("成功~~") // // console.log("data=",data); // // console.log("status=",status); // // console.log("xhr=",xhr); // if(data.name != ""){ // $("#myres").val("用户名不可用") // // 此时的data是一个对象。要转换成一个字符串 // $("#div1").text(JSON.stringify(data)) // }else { // $("#myres").val("用户名可用") // $("#div1").text(JSON.stringify(data)) // } // }, // "json" // ) // $.post( // "/jsonandajax/checkUserServlet2", // { // // 为什么这里使用一个new Date() // //是为防止缓存，因为有的浏览器会有缓存，如果数据没有发生变化，不给你传输新的数据 // // 如果每次都发送日期，浏览器就会每次都发送一个新请求，保证数据实时更新 // username:$("#uname").val(), // date:new Date() // }, // function (data,status,xhr) { // // console.log("成功~~") // // console.log("data=",data); // // console.log("status=",status); // // console.log("xhr=",xhr); // if(data.name != ""){ // $("#myres").val("用户名不可用") // // 此时的data是一个对象。要转换成一个字符串 // $("#div1").text(JSON.stringify(data)) // }else { // $("#myres").val("用户名可用") // $("#div1").text(JSON.stringify(data)) // } // }, // "json" // ) $.getJSON( "/jsonandajax/checkUserServlet2", { // 为什么这里使用一个new Date() //是为防止缓存，因为有的浏览器会有缓存，如果数据没有发生变化，不给你传输新的数据 // 如果每次都发送日期，浏览器就会每次都发送一个新请求，保证数据实时更新 username:$("#uname").val(), date:new Date() }, function (data,status,xhr) { // console.log("成功~~") // console.log("data=",data); // console.log("status=",status); // console.log("xhr=",xhr); if(data.name != ""){ $("#myres").val("用户名不可用") // 此时的data是一个对象。要转换成一个字符串 $("#div1").text(JSON.stringify(data)) }else { $("#myres").val("用户名可用") $("#div1").text(JSON.stringify(data)) } } ) }); }); </script> </head> <body> <h1>用户注册~</h1> <form action="/jsonandajax/checkUserServlet2" method="post"> 用户名字:<input type="text" name="username" id="uname"> <input type="button" id="checkButton" value="验证用户名"> <input style="border-width: 0;color: red" type="text" id="myres"><br/><br/> 用户密码:<input type="password" name="password"><br/><br/> 电子邮件:<input type="text" name="email"><br/><br/> <input type="submit" value="用户注册"> </form> <h1>返回的json数据</h1> <div id="div1"></div> </body> </html>