什么是JSON
JSON 指的是 JavaScript 对象表示法(JavaScript Object Notation)
JSON 是轻量级的文本数据交换格式
JSON 独立于语言:JSON 使用 Javascript语法来描述数据对象,但是 JSON 仍然独立于语言和平台。JSON 解析器和 JSON 库支持许多不同的编程语言。 目前非常多的动态(PHP,JSP,.NET)编程语言都支持JSON。
JSON 具有自我描述性,更易理解
轻量级指的是根xml作比较
数据交换指的是客户端和服务器哦之间业务数据的传递格式
JSON在JavaScript中的使用
jso是由键值对组成,并且由花括号(大括号)包围。每个键由引号引起来,键和值之间使用冒号进行分割,多组键值对之间进行逗号进行分割。
实例
<script type="text/javascript">
var jsonbj={
"key":12,
"key2":"abc",
"key3":true,
"key4":[11,"arr",false],
"key5":{
"key5_1":551,
"key5_2":"value"
},
"key6":[{
"key6_11":6611,
"key6_12":"key612value"
},{
"key6_21":6621,
"key6_22":"key622value"
}]
};
alert(typeof(jsonbj));
</script>
输出json的类型
可以看到是个对象类型
json的访问
json本身是一个对象。json中的key我们可以理解为是对象中的一个属性
json中的key访问就跟访问对象的属性值一样: json对象.key
alert(jsonbj.key);
遍历数组
对象的值
json的两个常用方法
json的存在有两种形式。
一种是,对象掉形式存在,我们叫它json对象
一种是,字符串的形式存在,我们叫它json字符串
这两个可以互相转化
一般我们要操作json中数据的时候,需要json对象的格式。
一般我们要在客户端和服务器之间进行数据交换的时候使用json
JSON.stringify() 把json 对象转换成json字符串
JSON.parse() 把json字符串转换成为json对象
JSON在java中的使用
1.导入jar包
1)javaBean和json的互转
toJson(object) 方法可以把java对象转换成json字符串
fromJson(str,type.class)
Person person =new Person(1,"祥哥好帅");
//创建gson实例
Gson gson =new Gson();
String json = gson.toJson(person);
Person fromJson = gson.fromJson(json, Person.class);
System.out.println(json);
System.out.println(fromJson);
2)List和json的互转
若想把json再转回List 则需要新建一个类继承于TypeToken<> 泛型为你要转换成的那个集合
public static void main(String[] args) {
List<Person> list =new ArrayList<>();
Person person =new Person(1,"祥哥好帅");
Person person1 =new Person(2,"祥哥好帅啊啊");
list.add(person);
list.add(person1);
// **2)List和json的互转**
Gson gson =new Gson();
String json = gson.toJson(list);
List<Person> fromJson = gson.fromJson(json, new PersonListTyoe().getType());
System.out.println(json);
System.out.println(fromJson);
System.out.println(fromJson.get(0));
// **3)map和json的互转**
}
3)map和json的互转
HashMap<Integer, Person> hashMap = new HashMap<>();
hashMap.put(1, new Person(1,"我真帅"));
hashMap.put(2, new Person(2,"我真帅 啊"));
Gson gson = new Gson();
String json = gson.toJson(hashMap);
HashMap<Integer, Person> fromJson = gson.fromJson(json, new PersonListTyoe().getType());
Person person = fromJson.get(1);
System.out.println(json);
System.out.println(person);
可以写成匿名内部类
AJAX请求
什么是AJAX请求
AJAX即异步JavaScript 和xml,是一种创建交互式网页应用的网页开发奇数。
ajax 是一种浏览器通过js异步发起请求,局部更新页面的技术。
使用Ajax 发起请求主要分为一下四个步骤
1), 首先要创建XMLHttpRequest
2).调用open方法设置请求参数 (规定请求的类型,URL,以及是否异步处理请求)
open(method,url,async) method :请求的类型 GET或POST url :文件在服务器上的位置 async:true(异步) 或 false (同步)
3).调用send方法发送请求(将请求发送到服务器)
4.)在send方法前绑定onreadystatechange事件,处理请求完成后的操作
当请求被发送到服务器时,我们需要执行一些基于相应的任务。
每当readyState改变时,就会触发onreadystatechange事件
readyState属性存有XMLHttpRequest的状态信息。 下面是XMLHttpRequest 对象的三个重要属性
onreadystatechange 存储函数(或函数名),每当 readyState 属性改变时,就会调用该函数。
readyState 存有 XMLHttpRequest 的状态。从 0 到 4 发生变化。
0: 请求未初始化
1: 服务器连接已建立
2: 请求已接收
3: 请求处理中
4: 请求已完成,且响应已就绪
status 200: “OK”
(服务器响应)
如需获得来自服务器的响应,请使用 XMLHttpRequest 对象的 responseText 或 responseXML 属性。
一个ajax 的例子
<script type="text/javascript">
function ajaxRequest() {
// 1、我们首先要创建XMLHttpRequest
var xmlhttprequest = new XMLHttpRequest();
// 2、调用open方法设置请求参数
xmlhttprequest.open("GET","http://localhost:80/JavaProject/ajaxServlet?action=javaScriptAjax",true);
// 3、调用send方法发送请求
xmlhttprequest.onreadystatechange=function(){
if(xmlhttprequest.readyState==4 && xmlhttprequest.status==200)
{
var json=JSON.parse(xmlhttprequest.responseText);
document.getElementById("div01").innerHTML= "学号:"+json.xuehao
+"姓名"+json.name+"性别"+json.sex;
}
}
xmlhttprequest.send();
// 4、在send方法前绑定onreadystatechange事件,处理请求完成后的操作。
}
</script>
<body>
<button onclick="ajaxRequest()">ajax request</button>
<div id="div01">
</div>
</body>
public class AjaxServlet extends BaseServlet{
protected void javaScriptAjax(HttpServletRequest req, HttpServletResponse resp) throws ServletException, IOException {
User user =new User("2019","尤呈祥","M","临沂");
Gson gosn =new Gson();
String Userjson = gosn.toJson(user);
resp.getWriter().write(Userjson);
}
}
Ajax请求的局部更新,浏览器地址栏不会发生变化,局部更新不会舍弃原来的页面内容。
jQuery中的AJAX请求
快速上手的五个方法
$.ajax 方法
url 表示请求地址
type 表示 请求的类型GET或POST请求
data 表示发送的数据
success 请求响应,响应回调函数 在方法里面必须要有一个参数
dataType 相应的数据类型 常用的数据类型有(text(纯文本) xml(表示xml数据) json(表示json对象))
protected void jQueryAjax(HttpServletRequest req, HttpServletResponse resp) throws ServletException, IOException {
System.out.println("jQueryAjax调用了");
User user =new User("2019","尤呈祥","M","临沂");
Gson gosn =new Gson();
String Userjson = gosn.toJson(user);
resp.getWriter().write(Userjson);
}
$(function(){
// ajax请求
$("#ajaxBtn").click(function(){
$.ajax({
url:"http://localhost:80/JavaProject/ajaxServlet",
data:"action=jQueryAjax" ,
//data:{action:"jQueryAjax"}, 也可以
type: "GET",
success:function(data){
var json = JSON.parse(data);
$("#msg").html("编号"+json.xuehao+"姓名:"+json.name);
//转成json
} ,
dataType: "text"
});
});
也可以直接使用json类型
$.get 方法和 $.post 方法
url 请求的url地址
data 发送的数据
callback 成功时回调函数
type 返回的数据类型
$("#getBtn").click(function(){
$.get("http://localhost:80/JavaProject/ajaxServlet","action=jQueryGet",function(data){
$("#msg").html("get编号"+data.xuehao+"姓名:"+data.name);
},"json");
});
// ajax--post请求
$("#postBtn").click(function(){
// post请求
$.get("http://localhost:80/JavaProject/ajaxServlet","action=jQueryPost",function(data){
$("#msg").html("post编号"+data.xuehao+"姓名:"+data.name);
},"json");
});
$.getJSON方法
url 请求的url地址
data 发送给服务器的数据
callback 成功的回调函数
$("#getJSONBtn").click(function(){
// 调用
$.getJSON("http://localhost:80/JavaProject/ajaxServlet","action=jQuerygetJSON",function(data){
$("#msg").html("post编号"+data.xuehao+"姓名:"+data.name);
})
});
表单序列化 serialize()
serialize()可以把表单中所有表单项的内容都获取到,并以 name=value & name=value 的形式进行拼接
$("#submit").click(function(){
// 调用
//得到想要获取的表单
alert($("#form01").serialize());
$.getJSON("http://localhost:80/JavaProject/ajaxServlet","action=jQuerygetJSON",function(data){
$("#msg").html("post编号"+data.xuehao+"姓名:"+data.name);
})
});