1、JSON
1、什么是JSON?
2、Json在JavaScript中的使用
3、Json在java中的使用
2、Ajax
1、什么是Ajax请求？
2、JQuery中的Ajax请求
3、Ajax示例代码
1、JSON
1、什么是JSON?
JSON (JavaScript Object Notation) 是一种轻量级的数据交换格式。 易于人阅读和编写。同时也易于机器解析和生成。 JSON采用完全独立于语言的文本格式，但是也使用了类似于C语言家族的习惯（包括C, C++, C#, Java, JavaScript, Perl, Python等）。 这些特性使JSON成为理想的数据交换语言。
2、Json在JavaScript中的使用
json的定义
json是由花括号组成，然后里面都是键值对。
并且每个键都由引号引起来。键和值之间使用冒号进行分隔。那么每组键值对之间使用逗号分隔。
var json = {
“key” : value ,
“key2” : value2
};
值可以是string,number,数组类型,json对象。json数组。
var = {
"key1" : 12,
"key2" : "abc",
"key3" : ["123","bda",true],
"key4" : { // json套json
"key4_1" : 41,
"key4_2" : "42"
},
"key5" : [{
"key5_1_1" : 511,
"key5_1_2" ： "512"
},{
"key5_2_1" : 521,
"key5_2_2" ： "522"
}]
};
// json的访问 json对象.key alert( jsonObj.key1 ); // 12 alert( jsonObj.key3[1] ); alert( jsonObj.key4.key4_2 ); alert( jsonObj.key5[0].key5_1_2 );
Json的两个常用方法
JSON.stringify() 把json对象转换成为json字符串
JSON.parse() 把json字符串转换成为json对象
// json对象转字符串 var jsonString = JSON.stringify( jsonObj ); alert( jsonString ); // json字符串转json对象 var obj = JSON.parse( jsonString ); alert( obj.key5[0].key5_1_2 );
3、Json在java中的使用
javaBean和json的互转
@Test
public void bean2Json() {
Person person = new Person(1,"国华");
// 先创建出gson工具类
Gson gson = new Gson();
// toJson可以把任意数据转换成为json字符串
String personJsonString = gson.toJson(person);
System.out.println( personJsonString );
// fromJson把json字符串转换成为java对象
Person p1 = gson.fromJson(personJsonString, Person.class);
System.out.println( p1 );
}
List 和json的互转
@Test
public void list2Json() {
List<Person> persons = new ArrayList<Person>();
persons.add(new Person(1, "p1"));
persons.add(new Person(2, "p2"));
persons.add(new Person(3, "p3"));
persons.add(new Person(4, "p4"));
persons.add(new Person(5, "p5"));
Gson gson = new Gson();
// 把一个list集合转换成为json字符串
String personListJsonString = gson.toJson(persons);
System.out.println( personListJsonString );
// List<Person> list2 = gson.fromJson(personListJsonString,new PersonListTypeToken().getType());
// 官方推荐使用方法
List<Person> list2 = gson.fromJson(personListJsonString, new TypeToken<ArrayList<Person>>() {}.getType());
System.out.println( list2 );
Person person = list2.get(0);
System.out.println(person);
}
map 和json的互转
@Test
public void map2Json() {
Map<String, Person> personMap = new HashMap<String, Person>();
personMap.put("p1", new Person(1, "p1"));
personMap.put("p2", new Person(2, "xxx"));
personMap.put("p3", new Person(3, "31234"));
Gson gson = new Gson();
// 把map集合转换成为json字符串
String jsonString = gson.toJson(personMap);
System.out.println( jsonString );
// 把json字符串转换成为map集合
Map<String, Person> map = gson.fromJson(jsonString, new TypeToken<HashMap<String, Person>>() {}.getType());
System.out.println( map );
Person person = map.get("p1");
System.out.println(person);
}
Json对象和string的转换只有这两种，第一种只能传泛型类对象：new Gson().fromJson(json, classOfT)
Person.class
，第二种只能用来转换list或map集合：new Gson().fromJson(json, typeOfT)
new TypeToken<ArrayList<Person>>() {}.getType()
new TypeToken<HashMap<String, Person>>() {}.getType()
2、Ajax
1、什么是Ajax请求？
AJAX即“Asynchronous Javascript And XML”（异步JavaScript和XML），是指一种创建交互式网页应用的网页开发技术。
ajax是一种浏览器异步发起请求。局部更新页面的技术。
原生Ajax请求的实现
<script type="text/javascript">
function ajaxRequest() {
// 1、我们首先要创建XMLHttpRequest
var request = new XMLHttpRequest();
// 2、调用open方法设置请求参数
request.open("GET", "ajaxServlet?action=javaScriptAjax", true);
// 4、在send方法前绑定onreadystatechange事件，处理请求完成后的操作。
request.onreadystatechange = function(){
if (request.readyState == 4 && request.status == 200) {
alert( "这是响应回来之后" );
document.getElementById("div01").innerHTML = request.responseText;
}
}
// 3、调用send方法发送请求
request.send();
alert("这是ajax代码完成之后");
}
</script>
</head>
ajaxServlet?action=javaScriptAjax是我的一个servlet地址
2、JQuery中的Ajax请求
$.ajax方法
url请求的地址
type 请求的方式GET或POST
data请求的参数。有两种格式，name=value&name=value或 {key:value,key:value}
success成功的回调函数
dataType返回的数据类型。常用的类型是：text、json、xml
// ajax请求
$("#ajaxBtn").click(function(){
$.ajax({
url:"ajaxServlet",
type:"GET",
data:"action=jqueryAjax",
success:function(msg){
//jquery的Ajax请求的回调函数，必须要有参数。
// 这个参数是响应的数据（服务器传回来的数据），可以随便命名
// $("#msg").html(msg);
// alert(msg);
// var obj = JSON.parse(msg);
$("#msg").html("用户 编号是：" + msg.id + ",姓名是：" + msg.name);
},
dataType:"json"
});
});
$.get方法和$.post方法
url请求的地址
data请求的参数
callback成功的回调函数
type返回的数据类型。常用的类型是：text、json、
// ajax--get请求
$("#getBtn").click(function(){
$.get("ajaxServlet",{action:"jqueryGet"},function(msg){
$("#msg").html("get 用户 编号是：" + msg.id + ",姓名是：" + msg.name);
},"json");
});
// ajax--post请求
$("#postBtn").click(function(){
// post请求
$.post("ajaxServlet",{action:"jqueryPost"},function(msg){
$("#msg").html("post 用户 编号是：" + msg.id + ",姓名是：" + msg.name);
},"json");
});
$.getJSON方法：必须大写JSON(返回的数据类型:只能是json,所以不必指定)
url 请求的地址
data 请求的参数
callback 请求成功回调函数
// ajax--getJson请求
$("#getJSONBtn").click(function(){
// 调用
$.getJSON("ajaxServlet","action=jqueryGetJSON",function(msg){
$("#msg").html("getJSON 用户 编号是：" + msg.id + ",姓名是：" + msg.name);
});
});
// ajax请求
$("#submit").click(function(){
// 把参数序列化
alert( $("#form01").serialize() );
$.getJSON("ajaxServlet","action=jquerySerialize&" + $("#form01").serialize(),function(msg){
$("#msg").html("serialize 用户 编号是：" + msg.id + ",姓名是：" + msg.name);
});
});
表单序列化serialize()
把form标签中所有的子元素中抽取出name和value的值，做字符串拼接。
拼接的格式是：name=value&name=value
3、Ajax示例代码
案例：使用Ajax局部刷新功能---验证用户名是否可用（表单就一个登陆用户名与密码的表单，不贴了）
页面端的代码：
$("#username").blur(function(){
//1 获取输入框中的用户名
var username = this.value;
//2发起请求给服务器
$.get("userServlet","action=ajaxExistsUsername&username=" + username,function(msg){
//3接收响应的结果，提示用户
if (msg.isExists) {
//已存在
$("span.errorMsg").text("用户名已存在！");
} else {
// 可用
$("span.errorMsg").text("用户名可用！");
}
},"json");
});
服务器的代码：
protected void ajaxExistsUsername(HttpServletRequest request,
HttpServletResponse response) throws ServletException, IOException {
//1 获取请求的参数 用户名
String username = request.getParameter("username");
boolean isExists = userService.existsUsername(username);
Map<String, Object> result = new HashMap<String, Object>();
result.put("isExists", isExists);
response.getWriter().write( new Gson().toJson(result) );
}
案例二:使用Ajax请求局部刷新---修改购物车-----添加商品
客户端：
1、给加入购物车绑定单击事件
2、发起Ajax请求--到服务器添加商品，进行局部刷新（服务端内容有点复杂就不贴了）
3、提示用户，购物车总的商品数量和最后一个添加的商品名称
<div style="text-align: center">
<c:choose>
<c:when test="${ empty sessionScope.cart.items }">
<%-- 购物车为空的情况 --%>
<span id="totalCountSpan"></span>
<div id="lastProductNameDiv">
<span style="color: red">购物车为空！</span>
</div>
</c:when>
<c:otherwise>
<%-- 购物车不为空的情况，显示出购物车的简单信息 --%>
<span id="totalCountSpan">您的购物车中有 ${ sessionScope.cart.totalCount } 件商品</span>
<div id="lastProductNameDiv">
您刚刚将<span style="color: red">${ sessionScope.last_product_name }</span>加入到了购物车中
</div>
</c:otherwise>
</c:choose>
</div>
<script type="text/javascript">
$(function(){
$("a.addItemA").click(function(){
//发起请求
$.getJSON("cartServlet","action=ajaxAddItem&id=" + $(this).attr("itemId") ,function(msg){
// 3、提示用户，购物车总的商品数量和最后一个添加的商品名称
// {lastProductName: "JavaScript从入门到精通", cartTotalCount: 1}
$("#totalCountSpan").html("您的购物车中有 " + msg.cartTotalCount + " 件商品");
$("#lastProductNameDiv").html("您刚刚将<span style=\"color: red\">" + msg.lastProductName + "</span>加入到了购物车中");
});
return false;
});
});
</script>
服务器的代码：
protected void ajaxAddItem(HttpServletRequest request,
HttpServletResponse response) throws ServletException, IOException {
// 1、获取商品编号id。
int id = Utils.parseInt(request.getParameter("id"), 0);
// 2、调用BookService.queryBookById(id)：Book
Book book = bookService.queryBookById(id);
// 3、把book图书信息。转换成为CartItem实例
CartItem cartItem = new CartItem(book.getId(), book.getName(), 1,
book.getPrice(), book.getPrice());
// 4、调用cart.addItem(cartItem);
// 应该先从Session中获取Cart购物车对象
Cart cart = (Cart) request.getSession().getAttribute("cart");
// 看看，手里有没有购物车。如果没有，找一辆
if (cart == null) {
cart = new Cart();
request.getSession().setAttribute("cart", cart);
}
cart.addItem(cartItem);
System.out.println(cart);
//把最后一个添加的商品名称，存放到Session中
request.getSession().setAttribute("last_product_name", cartItem.getName());
Map<String, Object> result = new HashMap<String, Object>();
result.put("cartTotalCount", cart.getTotalCount());
result.put("lastProductName", cartItem.getName());
response.getWriter().write(new Gson().toJson(result));
}