JSon(数据交换)和Ajax(异步请求)
JSON
简介
Json对象快速入门(Json对象的形式 key : value)
示例:
<script type="text/javascript">
function quickStart() {
//定义Json-对象
var Jsons = {
//定义Json-number
key1 : 20,
//定义Json-String
key2 : "hsp",
//定义Json-Json对象
key3 : {key01:21,key02:"tom"},
//定义Json-数组
key4 : [{key01:"韩顺平",key02:"韩顺平教育"},
{key01:"hsp",key02:"hspEdu"}
]
}
//取出json对象
console.log(Jsons.key1);
console.log(Jsons.key2);
console.log(Jsons.key3.key01+" "+Jsons.key3.key02);
console.log(Jsons.key4[1].key01+" "+Jsons.key4[1].key02)
}
quickStart();
</script>
JSON.springify(Json对象)和JSON.parse(String)细节
Json在Java中的应用场景
JavaBean<->Json字符串
Gson gson = new Gson();
Book threeKingdom = new Book("三国", 123.0);
Book westTour = new Book("西游", 123.2);
//将javaBean转换为Json的String形式
String s = gson.toJson(threeKingdom);
System.out.println(s);
//将Json的String形式转换为javaBean
Book book = gson.fromJson(s, Book.class);
System.out.println(book.getName()+" "+book.getPrice());
List<->Json字符串
Gson gson = new Gson();
ArrayList<Book> books = new ArrayList<>();
Book threeKingdom = new Book("三国", 123.0);
Book westTour = new Book("西游", 123.2);
books.add(threeKingdom);
books.add(westTour);
//将List->JsonString
String s = gson.toJson(books);
System.out.println(s);
//JsonString->List
//需要使用到TypeToken->获取实际对象的完整路径
//{}实际上是因为TypeToken的原码
// protected TypeToken() {
// this.type = getSuperclassTypeParameter(this.getClass());
// this.rawType = Types.getRawType(this.type);
// this.hashCode = this.type.hashCode();
// }
//TypeToken()与当前对象Book未在同一包中，需要获取完全的路径,用匿名内部类，特有的隐含super去继承TypeToken调用相应方法，
//将JsonString->List
Type type = new TypeToken<List<Book>>() {
}.getType();
List<Book> bookList = gson.fromJson(s, type);
System.out.println(bookList);
Map<->Json字符串
Gson gson = new Gson();
HashMap<String,Book> bookHashMap = new HashMap<>();
Book threeKingdom = new Book("三国", 123.0);
Book westTour = new Book("西游", 123.2);
bookHashMap.put("one",threeKingdom);
bookHashMap.put("two",westTour);
//将Map转换为Json字符串
String s = gson.toJson(bookHashMap);
System.out.println(s);
//借助TypeToken获取指定文件路径和匿名内部类调用方法
Type type = new TypeToken<HashMap<String, Book>>() {
}.getType();
HashMap<String,Book> bookHashMap1 = gson.fromJson(s, type);
System.out.println(bookHashMap1);
Ajax
简介
Ajax应用场景
Ajax原理
传统请求和响应
Ajax请求和响应
入门案例
核心代码
ajax引擎对象XMLHttpRequest对象(!!!) [ajax引擎对象]
<script type="text/javascript">
window.onload = function () { //页面加载后执行function
var checkButton = document.getElementById("checkButton");
//给checkButton绑定onclick
checkButton.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 事件
xhr.onreadystatechange = function () {
//如果请求已完成，且响应已就绪, 并且状态码是200
if (xhr.readyState == 4 && xhr.status == 200) {
//把返回的jon数据,显示在div
document.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 = "用户名可用"
}
}
console.log("xhr= " , xhr);
}
//3. 真正的发送ajax请求[http请求]
// 老韩再说明如果你POST 请求，再send("发送的数据")
xhr.send();
}
}
</script>
http响应和http请求
在se下和web下获取加载配置文件的区别
原生ajax请求兼容问题(浏览器版本兼容)
Jquery(Ajax函数)
$.ajax方法
$.ajax({
url: "/ajax/checkUserServlet2",
type: "POST",
data: { //这里我们直接给json, 为啥我要传日期, 为了浏览器缓存
username: $("#uname").val(),
date: new Date()
},
error: function () { //失败后的回调函数
console.log("失败~")
},
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"
})
. g e t 和 .get和 .get和.post方法
$.get(
"/ajax/checkUserServlet2",//url
{ //这里我们直接给json, 为啥我要传日期, 为了浏览器缓存
username: $("#uname").val(),
date: new Date()
}, //data
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("该用户名不可用");
}
},//success:
"json"
)
$.post(
"/ajax/checkUserServlet2",//url
{ //这里我们直接给json, 为啥我要传日期, 为了浏览器缓存
username: $("#uname").val(),
date: new Date()
}, //data
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("该用户名不可用");
}
},//success:
"json"
)
$.getJSON
为什么用JSON这种轻量级文本数据交换格式？
1,简化代码操作
(鱼聪明AI解惑:)
使用JSON作为轻量级文本数据交换格式有以下几个主要原因：
-
可读性好：JSON使用简单明了的文本格式，易于人类阅读和理解。它的结构清晰，使用键值对的方式表示数据，使得数据的组织和解析更加直观和清晰。
-
平台无关性：JSON是一种独立于编程语言和平台的数据格式，可以在不同的编程语言环境下使用和解析。几乎所有的编程语言都提供了JSON的解析器和生成器，使得数据的交换和处理更加便捷。
-
数据体积小：相比其他复杂的二进制数据格式，如XML或二进制存储格式，JSON的数据体积相对较小。这对于网络传输和存储来说都是非常有利的，可以提高传输速度和降低存储开销。
-
易于数据交换：由于JSON的简单性和通用性，它非常适合用于不同应用之间的数据交换。例如，前后端之间的数据通信、API接口的数据传输等，使用JSON能够更轻松地实现数据的传递和解析。
-
处理的灵活性：JSON支持各种数据类型，例如字符串、数字、布尔值、数组和对象等。它也支持嵌套和复杂的数据结构，可以很方便地表示和处理复杂的数据关系。
总的来说，JSON作为一种轻量级文本数据交换格式，具有简单、可读性好、平台无关、体积小和灵活性高的特点，使其成为现代应用程序中最常用的数据交换格式之一。
1208
被折叠的 条评论
为什么被折叠?
到【灌水乐园】发言
