**16-JSON **、**AJAX **、i18n
讲师:王振国
今日任务
1 、什么是 JSON?
JSON (JavaScript Object Notation) 是一种轻量级的数据交换格式。 易于人阅读和编写。同时也易于机器解析和生成。JSON 采用完全独立于语言的文本格式,而且很多语言都提供了对 json 的支持(包括 C, C++, C#, Java, JavaScript, Perl, Python 等)。 这样就使得 JSON 成为理想的数据交换格式。
json 是一种轻量级的数据交换格式。
轻量级指的是跟 xml 做比较。
数据交换指的是客户端和服务器之间业务数据的传递格式。
1.1、JSON 在 JavaScript 中的使用。
1.1.1 、json 的定义
json 是由键值对组成,并且由花括号(大括号)包围。每个键由引号引起来,键和值之间使用冒号进行分隔, 多组键值对之间进行逗号进行分隔。
json 定义示例:
var _jsonObj _= {
“key1”:12,
“key2”:“abc”,
“key3”:true,
“key4”:[11,“arr”,false],
“key5”:{
**“key5_1” **: 551,
**“key5_2” **: “key5 2 value”
},
“key6”:[{
**“key6 1 1” **:6611,
“key6 1 2” :“key6 1 2 value”
| },{
**“key6 2 1” **:6621,
“key6 2 2” :“key6 2 2 value”
}]
}; |
---|
1.1.2 、json 的访问
json 本身是一个对象。
json 中的 key 我们可以理解为是对象中的一个属性。
json 中的 key 访问就跟访问对象的属性一样: json 对象.key
json 访问示例:
| alert(typeof(jsonObj));// object json 就是一个对象
alert(jsonObj.key1); //12
alert(jsonObj.key2); // abc
alert(jsonObj.key3); // true
alert(jsonObj.key4);// 得到数组[11,“arr”,false]
// json 中 数组值的遍历
for(var _i _= 0; _i _< jsonObj.key4.length; i++) {
alert(jsonObj.key4[i]);
}
alert(jsonObj.key5.key5_1);//551
alert(jsonObj.key5.key5_2);//key5 2 value
alert( jsonObj.**key6 **);// 得到json 数组
// 取出来每一个元素都是json 对象
var _jsonItem _= jsonObj.key6[0];
// alert( jsonItem.key6 1 1 ); //6611
alert( jsonItem.**key6 1 2 **); //key6 1 2 value |
---|
1.1.3 、json 的两个常用方法
json 的存在有两种形式。
一种是:对象的形式存在,我们叫它 json 对象。
一种是:字符串的形式存在,我们叫它 json 字符串。
一般我们要操作 json 中的数据的时候,需要 json 对象的格式。
一般我们要在客户端和服务器之间进行数据交换的时候,使用 json 字符串。
JSON.stringify()
JSON.parse()
把 json 对象转换成为 json 字符串
把 json 字符串转换成为 json 对象
示例代码:
| // 把json 对象转换成为json 字符串
var _jsonObjString _= JSON.stringify(jsonObj); // 特别像 Java 中对象的toString
alert(jsonObjString)
// 把json 字符串。转换成为json 对象
var _jsonObj2 _= JSON.parse(jsonObjString);
alert(jsonObj2.key1);// 12
alert(jsonObj2.key2);// abc |
---|
1.2、JSON 在 java 中的使用
1.2.1 、javaBean 和 json 的互转
| @Test
public void test1(){
Person person = new Person(1,“国哥好帅!”);
// 创建Gson对象实例
Gson gson = new Gson();
// toJson 方法可以把java 对象转换成为json 字符串
String personJsonString = gson.toJson(person);
System.out.println(personJsonString);
// fromJson 把json 字符串转换回Java对象
// 第一个参数是json 字符串
// 第二个参数是转换回去的Java对象类型
Person person1 = gson.fromJson(personJsonString, Person.class);
System.out.println(person1);
} |
---|
1.2.2 、List 和 json 的互转
| // 1.2.2、List 和json 的互转
@Test
**public void **test2() {
List personList = **new **ArrayList<>();
personList.add(**new **Person(1, “国哥”));
personList.add(**new **Person(2, “康师傅”));
Gson gson = **new **Gson();
// 把List 转换为json 字符串
String personListJsonString = gson.toJson(personList);
System.out.println(personListJsonString); |
---|
| List list = gson.fromJson(personListJsonString, new PersonListType().getType());
System.out.println(list);
Person person = list.get(0);
System.out.println(person);
} |
---|
1.2.3 、map 和 json 的互转
| // 1.2.3、map 和json 的互转
@Test
**public void **test3(){
Map<Integer,Person> personMap = **new **HashMap<>();
personMap.put(1, **new **Person(1, “国哥好帅”));
personMap.put(2, **new **Person(2, “康师傅也好帅”));
Gson gson = new Gson();
// 把map 集合转换成为json 字符串
String personMapJsonString = gson.toJson(personMap);
System.out.println(personMapJsonString);
// Map<Integer,Person> personMap2 = gson.fromJson(personMapJsonString, new
PersonMapType().getType());
Map<Integer,Person> personMap2 = gson.fromJson(personMapJsonString, new
TypeToken<HashMap<Integer,Person>>(){}.getType());
System.out.println(personMap2);
Person p = personMap2.get(1);
System.out.println§;
} |
---|
2 、AJAX 请求
2.1、什么是 AJAX 请求
AJAX 即“A_synchronous _J_avascript _A_nd _XML”(异步 JavaScript 和 XML),是指一种创建交互式网页应用的网页开发 技术。
ajax 是一种浏览器通过 js 异步发起请求,局部更新页面的技术。
Ajax 请求的局部更新,浏览器地址栏不会发生变化
局部更新不会舍弃原来页面的内容
2.2、原生 AJAX 请求的示例:
| < !DOCTYPE **html **PUBLIC “-//W3C//DTD HTML 4.01 Transitional//EN” “http://www.w3.org/TR/html4/loose.dtd”>
<html>
<head>
<**meta http-equiv=“pragma” content=“no-cache” **/>
<**meta http-equiv=“cache-control” content=“no-cache” **/>
<**meta http-equiv=“Expires” content=“0” **/>
<meta http-equiv=“Content-Type” content=“text/html; charset=UTF-8”>
<title>Insert title here</title>
<script type=“text/javascript”>
// 在这里使用javaScript 语言发起Ajax 请求,访问服务器AjaxServlet 中javaScriptAjax
**function **ajaxRequest() {
// 1、我们首先要创建XMLHttpRequest
**var **xmlhttprequest = new XMLHttpRequest();
// 2、调用open 方法设置请求参数
xmlhttprequest.open(“GET”,"http://localhost:8080/16_json_ajax_i18n/ajaxServlet?action=javaScriptAj
ax",true)
// 4、在send 方法前绑定onreadystatechange 事件,处理请求完成后的操作。
xmlhttprequest.**onreadystatechange **= function(){
**if **(xmlhttprequest.**readyState **== 4 && xmlhttprequest.**status **== 200) {
**var **jsonObj = JSON.parse(xmlhttprequest.responseText);
// 把响应的数据显示在页面上
document.getElementById(“div01”).**innerHTML **= **“编号:” **+ jsonObj.**id **+ " , 姓名:" +
jsonObj.name;
}
}
// 3、调用send 方法发送请求
xmlhttprequest.send();
}
</script>
</head>
<body>
<button οnclick="ajaxRequest()">ajax request</button>
<div id=“div01”>
</div>
</body>
</html> |
---|
2.3、jQuery 中的 AJAX 请求
$.ajax 方法
url
type
data
success
dataType
表示请求的地址
表示请求的类型 GET 或 POST 请求
表示发送给服务器的数据
格式有两种:
一:name=value&name=value
二:{key:value}
请求成功,响应的回调函数
响应的数据类型
常用的数据类型有:
text 表示纯文本
xml 表示 xml 数据
json 表示 json 对象
| KaTeX parse error: Expected 'EOF', got '#' at position 7: **(**"#̲ajaxBtn"**).cli….ajax({
url :“http://localhost:8080/16_json_ajax_i18n/ajaxServlet”,
// data:“action=jQueryAjax”,
data:{action:“jQueryAjax”},
type:“GET”,
success:function (data) {
// alert(“服务器返回的数据是:” + data);
// var jsonObj = JSON.parse(data);
$(“#msg”).html(**“编号:” **+ data.**id **+ **" , 姓名:" **+ data.name);
},
**dataType **: “json”
});
}); |
---|
. g e t 方法和 .get 方法和 .get方法和.post 方法
url
data
callback
type
请求的 url 地址
发送的数据
成功的回调函数
返回的数据类型
| // ajax–get 请求
KaTeX parse error: Expected 'EOF', got '#' at position 7: **(**"#̲getBtn"**).clic….get(“http://localhost:8080/16_json_ajax_i18n/ajaxServlet”,“action=jQueryGet”,function (data) {
KaTeX parse error: Expected 'EOF', got '#' at position 7: **(**"#̲msg"**).html(**…(“#postBtn”).click(function(){
$.post(“http://localhost:8080/16_json_ajax_i18n/ajaxServlet”,“action=jQueryPost”,**function **(data)
{
$(“#msg”).html(**" post 编号:" **+ data.**id **+ **" , 姓名:" **+ data.name); |
---|
| },“json”);
}); |
---|
$.getJSON 方法
url
data
callback
请求的 url 地址
发送给服务器的数据
成功的回调函数
| // ajax–getJson 请求
KaTeX parse error: Expected 'EOF', got '#' at position 7: **(**"#̲get JSONBtn"**)….getJSON(“http://localhost:8080/16_json_ajax_i18n/ajaxServlet”,“action=jQueryGet JSON”,function
(data) {
$(“#msg”).html(**" get JSON 编号:" **+ data.**id **+ **" , 姓名:" **+ data.name);
});
}); |
---|
表单序列化 serialize()
serialize()可以把表单中所有表单项的内容都获取到,并以 name=value&name=value 的形式进行拼接。
| // ajax 请求
KaTeX parse error: Expected 'EOF', got '#' at position 7: **(**"#̲submit"**).clic….getJSON(“http://localhost:8080/16_json_ajax_i18n/ajaxServlet”,“action=jQuerySerialize&” +
KaTeX parse error: Expected 'EOF', got '#' at position 7: **(**"#̲form01"**).seri…(“#msg”).html(**" Serialize 编号:" **+ data.**id **+ **" , 姓名:" **+ data.name);
});
}); |
---|
3 、书城项目第九阶段
3.1、使用 AJAX 验证用户名是否可用
UserServlet 程序中 ajaxExistsUsername 方法:
| protected void ajaxExistsUsername(HttpServletRequest req, HttpServletResponse resp) throws
ServletException, IOException {
// 获取请求的参数username
String username = req.getParameter(“username”);
// 调用userService.existsUsername();
**boolean **existsUsername = userService.existsUsername(username);
// 把返回的结果封装成为map 对象
Map<String,Object> resultMap = new HashMap<>();
resultMap.put(“existsUsername”,existsUsername);
Gson gson = **new **Gson();
String json = gson.toJson(resultMap);
resp.getWriter().write(json);
} |
---|
regist.jsp 页面中的代码:
| KaTeX parse error: Expected 'EOF', got '#' at position 6: _(**"#̲username"**).bl….getJSON(“http://localhost:8080/book/userServlet”,“action=ajaxExistsUsername&username=” **+
username,function (data) {
if (data.existsUsername) {
KaTeX parse error: Expected 'EOF', got '}' at position 49: …用户名已存在!**"**); }̲ **else **{ _(“span.errorMsg”).text(“用户名可用!”);
}
});
}); |
---|
3.2、使用 AJAX 修改把商品添加到购物车
CartServlet 程序: | | |
| protected void ajaxAddItem(HttpServletRequest req, HttpServletResponse resp) throws ServletException,
IOException { | | |
| // 获取请求的参数 商品编号 | | |
| int id = WebUtils.parseInt(req.getParameter(“id”), 0); | | |
| // 调用bookService.queryBookById(id):Book 得到图书的信息 | | |
| Book book = bookService.queryBook ById(id); | | |
| // 把图书信息,转换成为CartItem商品项 | | |
| CartItem cartItem = new CartItem(book.getId(),book.getName(),1,book.getPrice(),book.getPrice());
// 调用Cart.addItem(CartItem);添加商品项 | | |
| Cart cart = (Cart) req.getSession().getAttribute(“cart”);
if (cart == null) {
cart = new Cart(); | | |
| req.getSession().setAttribute(“cart”,cart); | | |
| } | | |
| cart.addItem(cartItem); | | |
| | | |
| System.out.println(cart); | | |
| // 最后一个添加的商品名称 | | |
| req.getSession().setAttribute(“lastName”, cartItem.getName()); | | |
| | | |
| //6、返回购物车总的商品数量和最后一个添加的商品名称 | | |
| Map<String,Object> resultMap = new HashMap<String,Object>(); | | |
| | | |
| resultMap.put(“totalCount”, cart.getTotalCount()); | | |
| resultMap.put(“lastName”,cartItem.getName()); | | |
| | | |
| Gson gson = **new **Gson();
String resultMapJsonString |
= |
gson.toJson(resultMap); |
|
resp.getWriter().write(resultMapJsonString); | | |
|
} |
---|
pages/client/index.jsp 页面
html 代码:
| <divstyle="text-align: center">
<c:iftest="${emptysessionScope.cart.items**}"**>
<%–购物车为空的输出–%> | |
---|---|
<spanid=“cartTotalCount”> | </span> |
<div> | |
<spanstyle="color: red"id=“cart LastName”>当前购物车为空</span> | |
</div> | |
</c:if> | |
<c:iftest="${notemptysessionScope.cart.items**}"**> | |
<%–购物车非空的输出–%> | |
<spanid=“cartTotalCount”>您的购物车中有 **${sessionScope.cart.totalCount} **件商品</span> | |
<div> | |
您刚刚将<spanstyle="color: red"id=“cart LastName”>${sessionScope.lastName}</span>加入到了购 | |
物车中 | |
</div> | |
</c:if> | |
</div> |
javaScript 代码:
| <Script type=“text/javascript”>
KaTeX parse error: Expected group after '_' at position 39: … 给加入购物车按钮绑定单击事件_̲ _(“button.addToCart”).click(function () {
_/_
_ 在事件响应的function 函数_ 中,有一个this 对象,这个this 对象,是当前正在响应事件的dom 对象
_ **@type **{jQuery}_
*/
var book Id = $(this).attr(“book Id”);
// location.href = “http://localhost:8080/book/cartServlet?action=addItem&id=” + bookId;
// 发ajax 请求,添加商品到购物车
KaTeX parse error: Expected 'EOF', got '&' at position 79: …ion=ajaxAddItem&̲id=" **+ book I…(“#cartTotalCount”).text("**您的购物车中有 " + data.totalCount + " 件商品"); $(“#cart LastName”).text(data.lastName);
})
});
});
</Script> |
---|
4 、i18n 国际化(了解内容)
4.1、什么是 i18n 国际化?
国际化(Internationalization)指的是同一个网站可以支持多种不同的语言,以方便不同国家,不同语种的用户访问。
关于国 际化我们想到 的最简单的方案就是为不 同的 国家创建不同 的 网站 , 比如苹果公 司 ,他 的英文官 网是: http://www.apple.com 而中国官网是 http://www.apple.com/cn
苹果公司这种方案并不适合全部公司,而我们希望相同的一个网站,而不同人访问的时候可以根据用户所在的区域显示 不同的语言文字,而网站的布局样式等不发生改变。
于是就有了我们说的国际化,国际化总的来说就是同一个网站不同国家的人来访问可以显示出不同的语言。但实际上这 种需求并不强烈,一般真的有国际化需求的公司,主流采用的依然是苹果公司的那种方案,为不同的国家创建不同的页 面。所以国际化的内容我们了解一下即可。
国际化的英文 Internationalization ,但是由于拼写过长,老外想了一个简单的写法叫做 I18N ,代表的是 Internationalization 这个单词,以 I 开头,以 N 结尾,而中间是 18 个字母,所以简写为 I18N 。以后我们说 I18N 和国际化是一个意思。
4.2、国际化相关要素介绍
4.3、国际化资源 properties 测试
配置两个语言的配置文件:
i18n_en_US.properties 英文
| username=username
password=password
sex=sex
age=age
regist=regist
boy=boy
email=email
girl=girl
reset=reset
submit=submit |
---|
i18n_zh_CN.properties 中文
| username=用户名
password=密码
sex=性别
age=年龄
regist=注册
boy=男
girl=女
email=邮箱
reset=重置
submit=提交 |
---|
国际化测试代码:
| **public class **I18nTest {
@Test
**public void **testLocale(){
// 获取你系统默认的语言。国家信息
// Locale locale = Locale.getDefault();
// System.out.println(locale);
// for (Locale availableLocale : Locale.getAvailableLocales()) {
// System.out.println(availableLocale);
// }
// 获取中文,中文的常量的Locale 对象
System.out.println(Locale.CHINA);
// 获取英文,美国的常量的Locale 对象
System.out.println(Locale.US);
} |
---|
| @Test
public void testI18n(){
// 得到我们需要的Locale 对象
Locale locale = Locale.CHINA;
// 通过指定的basename 和Locale 对象,读取 相应的配置文件
ResourceBundle bundle = ResourceBundle.getBundle(“i18n”, locale);
System.out.println("username:" + bundle.getString(“username”));
System.out.println("password:" + bundle.getString(“password”));
System.out.println("Sex:" + bundle.getString(“sex”));
System.out.println("age:" + bundle.getString(“age”));
}
} |
---|
4.4、通过请求头国际化页面
| <%@pageimport=“java.util.Locale”%>
<%@pageimport=“java.util.ResourceBundle”%>
<%@pagelanguage="java"contentType=“text/html;charset=UTF-8”
pageEncoding=“UTF-8”%>
< !DOCTYPEhtmlPUBLIC "-//W3C//DTDHTML4.01Transitional//EN"** “http://www.w3.org/TR/html4/loose.dtd”**>
<html>
<head>
<metahttp-equiv="pragma"content=“no-cache”/>
<metahttp-equiv="cache-control"content=“no-cache”/>
<metahttp-equiv="Expires"content=“0”/>
<metahttp-equiv="Content-Type"content="text/html;charset=UTF-8">
<title>Insert title here</title>
</head>
<body>
<%
// 从请求头中获取Locale 信息(语言)
Locale locale = request.getLocale();
System.out.println(locale);
//获取读取包(根据 指定的baseName 和Locale 读取 语言信息)
ResourceBundlei18n=ResourceBundle.getBundle(“i18n”,locale);
%>
<ahref=“”>中文</a> |
<ahref=“”>english</a>
<center>
<h1><%=i18n.getString(“regist”)%></h1>
<table>
<form>
<tr>
<td><%=i18n.getString(“username”)%></td> |
---|
| <td><inputname="username"type=“text”/></td>
</tr>
<tr>
<td><%=i18n.getString(“password”)%></td>
<td><inputtype=“password”/></td>
</tr>
<tr>
<td><%=i18n.getString(“sex”)%></td>
<td>
<inputtype=“radio”/><%=i18n.getString(“boy”)%>
<inputtype=“radio”/><%=i18n.getString(“girl”)%>
</td>
</tr>
<tr>
<td><%=i18n.getString(“email”)%></td>
<td><inputtype=“text”/></td>
</tr>
<tr>
<tdcolspan="2"align=“center”>
<inputtype="reset"value="<%=i18n.getString(“reset”)%>"/>
<inputtype="submit"value="<%=i18n.getString(“submit”)%>"/></td>
</tr>
</form>
</table>
<br/> <br/> <br/> <br/>
</center>
国际化测试:
<br/> 1、访问页面,通过浏览器设置,请求头信息确定国际化语言。
<br/> 2、通过左上角,手动切换语言
</body>
</html> |
---|
4.5、通过显示的选择语言类型进行国际化
| <%@pageimport=“java.util.Locale”%>
<%@pageimport=“java.util.ResourceBundle”%>
<%@pagelanguage="java"contentType=“text/html;charset=UTF-8”
pageEncoding=“UTF-8”%>
< !DOCTYPEhtmlPUBLIC "-//W3C//DTDHTML4.01Transitional//EN"** “http://www.w3.org/TR/html4/loose.dtd”**>
<html>
<head>
<metahttp-equiv="pragma"content=“no-cache”/>
<metahttp-equiv="cache-control"content=“no-cache”/>
<metahttp-equiv="Expires"content=“0”/>
<metahttp-equiv="Content-Type"content="text/html;charset=UTF-8">
<title>Insert title here</title>
</head> |
---|
| <body>
<%
// 从请求头中获取Locale 信息(语言)
Locale locale = null;
String country = request.getParameter(“country”);
if (“cn”.equals(country)) {
locale = Locale.CHINA;
} else if (“usa”.equals(country)) {
locale = Locale.US;
} **else **{
locale = request.getLocale();
}
System.out.println(locale);
//获取读取包(根据 指定的baseName 和Locale 读取 语言信息)
ResourceBundlei18n=ResourceBundle.getBundle(“i18n”,locale);
%>
<ahref=“i18n.jsp?country=cn”>中文</a> |
<ahref=“i18n.jsp?country=usa”>english</a>
<center>
<h1><%=i18n.getString(“regist”)%></h1>
<table>
<form>
<tr>
<td><%=i18n.getString(“username”)%></td>
<td><inputname="username"type=“text”/></td>
</tr>
<tr>
<td><%=i18n.getString(“password”)%></td>
<td><inputtype=“password”/></td>
</tr>
<tr>
<td><%=i18n.getString(“sex”)%></td>
<td>
<inputtype=“radio”/><%=i18n.getString(“boy”)%>
<inputtype=“radio”/><%=i18n.getString(“girl”)%>
</td>
</tr>
<tr>
<td><%=i18n.getString(“email”)%></td>
<td><inputtype=“text”/></td>
</tr>
<tr>
<tdcolspan="2"align=“center”>
<inputtype="reset"value="<%=i18n.getString(“reset”)%>"/>
<inputtype="submit"value="<%=i18n.getString(“submit”)%>"/></td>
</tr> |
---|
</form>
<**br **/> <**br **/> <**br **/> <**br **/>
国际化测试:
<**br **/> 2、通过左上角,手动切换语言
</html>
</table> |
</center> |
<**br **/> 1、访问页面,通过浏览器设置,请求头信息确定国际化语言。 |
</body>
4.6、JSTL 标签库实现国际化
<%–1 使用标签设置Locale 信息–%>
<**fmt:set Locale value=“” **/>
<%–2 使用标签设置baseName–%>
<fmt:setBundle basename=“”/>
<%–3 输出指定key的国际化信息–%>
<**fmt:message key=“” **/>
| <%@taglibprefix="fmt"uri=“http://java.sun.com/jsp/jstl/fmt”%>
<%@pagelanguage="java"contentType=“text/html;charset=UTF-8”
pageEncoding=“UTF-8”%>
< !DOCTYPEhtmlPUBLIC "-//W3C//DTDHTML4.01Transitional//EN"** “http://www.w3.org/TR/html4/loose.dtd”**>
<html>
<head>
<metahttp-equiv="pragma"content=“no-cache”/>
<metahttp-equiv="cache-control"content=“no-cache”/>
<metahttp-equiv="Expires"content=“0”/>
<metahttp-equiv="Content-Type"content="text/html;charset=UTF-8">
<title>Insert title here</title>
</head>
<body>
<%–1 使用标签设置Locale 信息–%>
<fmt:set Localevalue=“${param.locale}”/>
<%–2 使用标签设置baseName–%>
<fmt:setBundlebasename=“i18n”/>
<ahref=“i18n_fmt.jsp?locale=zh_CN”>中文</a> |
<ahref=“i18n_fmt.jsp?locale=en_US”>english</a>
<center>
<h1><fmt:messagekey=“regist”/></h1>
<table>
<form>
<tr> |
---|
| <td><fmt:messagekey=“username”/></td>
<td><inputname="username"type=“text”/></td>
</tr>
<tr>
<td><fmt:messagekey=“password”/></td>
<td><inputtype=“password”/></td>
</tr>
<tr>
<td><fmt:messagekey=“sex”/></td>
<td>
<inputtype=“radio”/><fmt:messagekey=“boy”/>
<inputtype=“radio”/><fmt:messagekey=“girl”/>
</td>
</tr>
<tr>
<td><fmt:messagekey=“email”/></td>
<td><inputtype=“text”/></td>
</tr>
<tr>
<tdcolspan="2"align=“center”>
<inputtype="reset"value="<fmt:messagekey=“reset”/>"/>
<inputtype="submit"value="<fmt:messagekey=“submit”/>"/></td>
</tr>
</form>
</table>
<br/> <br/> <br/> <br/>
</center>
</body>
</html> |
---|