JSON
1. 概念
JSON：JavaScript Object Notation，是一种轻量级的数据交换格式，易于人阅读编写，也便于机器解析和生成。
很多语言都提供了对json的支持，使得成为了理想的数据交换格式。
轻量级指的是跟xml做比较。
数据交换指的是客户端和服务器之间业务数据的传递格式
2. 在JS中使用(客户端)
语法：json由键值对构成，由花括号包围，每个键由引号引起来，键和值使用冒号分隔，多组使用逗号分割。
<script type="text/javascript">
var jsonObj = {
"key1":12,
"key2":"abc",
"key3":true,
"key4":[11,"arr",false],
"key5":{
"key5_1":551
}
};
alart(jsonObj);
alert(jsonObj.key2);
alert(jsonObj.key4[1]);
alert(jsonObj.key5.key5_1);
</script>
3. 在Java使用(服务器)
先导入关于Json的JAR包，例如：谷歌的 gson-2.2.4.jar
例如有个JavaBean，即Person由两个属性id，name。constructor/get/set/toString都有
- JavaBean和Json的转换
public static void test01() {
Gson gson = new Gson();
Person person = new Person(1, "苏瞳");
String personJsonStr = gson.toJson(person);
System.out.println(personJsonStr);
Person p1 = gson.fromJson(personJsonStr, Person.class);
System.out.println(p1);
}
- List和Json的转换
public static void test02() {
Gson gson = new Gson();
List<Person> personList = new ArrayList<>();
personList.add(new Person(2, "哈哈"));
personList.add(new Person(3, "嘿嘿"));
String personListJsonStr = gson.toJson(personList);
System.out.println(personListJsonStr);
List<Person> list = gson.fromJson(personListJsonStr, new PersonListType().getType());
System.out.println(list);
}
Josn -> List 要先自己写一个类PersonListType，继承 com.google.gson.reflect.TypeToken （或者使用匿名内部类）
public class PersonListType extends TypeToken<List<Person>> { }
- Map和Json的转换
public static void test03() {
Gson gson = new Gson();
Map<Integer, Person> personMap = new HashMap<>();
personMap.put(4, new Person(4, "嘻嘻"));
personMap.put(5, new Person(5, "哇哇"));
String personMapJsonStr = gson.toJson(personMap);
System.out.println(personMapJsonStr);
Map<Integer, Person> map = gson.fromJson(personMapJsonStr, new PersonMapType().getType());
System.out.println(map);
}
Josn -> Map 要先自己写一个类PersonMapType，继承 com.google.gson.reflect.TypeToken （或者使用匿名内部类）
public class PersonMapType extends TypeToken<Map<Integer, Person>> { }
- ?使用匿名内部类，把Json转化为集合类型 ！！List一样
public static void test04() {
Map<Integer, Person> map = gson.fromJson(personMapJsonStr,
new TypeToken<Map<Integer, Person>>(){}.getType());
System.out.println(map);
}
AJAX请求
1. 概念
AJAX：Asyncharonous JavaScript And XML，即异步的JS和XML，是指一种创建交互式网页应用的网页开发技术。
是一种浏览器通过JS异步发起请求。局部更新页面的技术。
2. 原生ajax请求
ajax.html 客户端页面：
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>Title</title>
</head>
<script type="text/javascript">
function ajaxRequest() {
var xmlHttpRequest = new XMLHttpRequest();
xmlHttpRequest.open("GET",
"http://localhost:8080/dynamicobject/ajaxServlet?action=javaScriptAjax",
true);
xmlHttpRequest.onreadystatechange = function() {
if (xmlHttpRequest.readyState === 4 && xmlHttpRequest.status === 200) {
var JsonObj = JSON.parse(xmlHttpRequest.responseText);
document.getElementById("div01").innerHTML =
"编号：" + JsonObj.id + "<br/> 姓名：" + JsonObj.name;
}
};
xmlHttpRequest.send();
}
</script>
<body>
<button onclick="ajaxRequest()">ajax request</button>
<div id="div01"></div>
</body>
</html>
AjaxServlet.java 服务器端：
public class AjaxServlet extends BaseServlet {
public void javaScriptAjax(HttpServletRequest req, HttpServletResponse resp) throws IOException {
resp.setContentType("text/html;charset=utf-8");
System.out.println("Ajax请求过来了");
Person person = new Person(1, "苏瞳");
Gson gson = new Gson();
String personJsonStr = gson.toJson(person);
resp.getWriter().write(personJsonStr);
}
}
3. ajax请求的特点
是一种浏览器通过JS异步发起请求。局部更新页面的技术。
局部更新：浏览器地址栏不会发生变化，不会舍去原来页面的内容（上面的使用，只是改了div01里面的内容）
而原来的我们使用a标签请求，浏览器地址栏会发生变法，而且原来的内容也没了，只显示了我们回传的数据。
<a href="http://localhost:8080/dynamicobject/ajaxServlet?action=javaScriptAjax">非Ajax请求</a>
http://localhost:8080/dynamicobject/ajax.html
-> http://localhost:8080/dynamicobject/ajaxServlet?action=javaScriptAjax
同步：发生Ajax请求，页面会等待服务器响应完，才输出响应的数据(执行onreadystatechange事件)和继续执行下面的代码
异步：页面不用等待服务器响应完，就会执行下面的代码(下面的代码值的是onreadystatechange事件下面的代码)，什么时候响应完了什么时候输出响应的数据(onreadystatechange事件)。
异步会让用户体验好一点。如果同步的话有多个按钮都执行ajaxRequest()，则点击一下整个页面就会卡住，其他的按钮也不能点了
4. jquery中实现ajax请求
常用方法：
1.$.ajax() 方法
返回值: XMLHttpRequest
常用参数：
-
url ：请求的地址
-
type ：请求的类型，get/post
-
data：发送给服务器的数据，两种格式 name=value&name=value 或者 {key:value}
-
success：请求成功后的回调函数 ，和原生的onreadystatechange事件差不多
-
dataType：预期响应的数据类型（预期服务器返回的数据类型），常用有text(纯文本)，xml(xml数据)，json(json数据/对象)
dataType，如果是text的话需要在success后面的回调函数里使用JSON.parse(str)转化为json对象，是json的话就不同了直接可以使用。
$("#btn01").click(function () {
$.ajax({
url:"http://localhost:8080/dynamicobject/ajaxServlet",
data:"action=jQueryAjax",
type:"GET",
success:function (data) {
$("#div02").html("编号：" + data.id + "<br/> 姓名：" + data.name);
},
dataType:"json"
});
});
2.$.get() 简单的GET请求功能，底层封装的复杂的$.ajax() ， $.post()一样的
参数：url，data 发送的数据(参数)，callback 成功的回调函数，type 返回的数据格式
$("#btn01").click(function () {
$.get("http://localhost:8080/dynamicobject/ajaxServlet", "action=jQueryAjax", function (data) {
$("#div02").html("编号：" + data.id + "<br/> 姓名：" + data.name);
}, "json");
}
3.$.getJSON() GET 请求载入 JSON 数据，即请求方式是GET，返回的类型统一是Json
参数：url ，data，callback
$.getJSON("http://localhost:8080/dynamicobject/ajaxServlet", "action=jQueryAjax", function (data) {
$("#div02").html("编号：" + data.id + "<br/> 姓名：" + data.name);
});
4.serialize() 表单序列化 ，即可以把表单项中所有的内容都获取到，并以name=value&name=value的形式进行拼接
alert( $("#form01").serialize() );
$.getJSON("http://localhost:8080/dynamicobject/ajaxServlet",
"action=jQueryAjax&" + $("#form01").serialize(),
function (data) {
$("#div02").html("编号：" + data.id + "<br/> 姓名：" + data.name);
}
);
i18n
1.概念
Internationalization - 国际化，由于字符过长,简称i18n，i首字母，n尾字母，之间有18的字母，即i18n
需求：不同的国家人访问，看到的内容不同，布局一样
苹果的策略是：为不同的国家创建不同的网站，英文http://www.apple.com，中文http://www.apple.com/cn
如果需求不大可用采用苹果这种策略
2.服务器使用
类路径下有两个文件：i18n_en_US.properties 文件，i18n_zh_CN.properties 文件
# i18n_en_US.properties
register=register
username=username
password=password
submit=submit
# i18n_zh_CN.properties
register=注册
username=用户名
password=密码
submit=提交
后端代码：
public class Test {
public static void main(String[] args) {
Locale aDefault = Locale.getDefault();
Locale china = Locale.CHINA;
Locale us = Locale.US;
ResourceBundle bundle = ResourceBundle.getBundle("i18n", china);
String username = bundle.getString("username");
System.out.println(username);
}
}
3.客户端使用
<body>
<%
Locale locale = request.getLocale(); // 根据请求头获取客户的语言信息
ResourceBundle bundle = ResourceBundle.getBundle("i18n", locale); // 绑定资源下面用jsp脚本输出
%>
<h1><%= bundle.getString("register") %></h1>
<form>
<tr>
<td><%= bundle.getString("username") %></td>
<td><input name="username" type="text" /></td>
</tr>
<tr>
<td><%= bundle.getString("password") %></td>
<td><input name="password" type="password" /></td>
</tr>
<tr>
<td colspan="2" align="center">
<input type="submit" value="<%= bundle.getString("submit") %>" />
</td>
</tr>
</form>
</body>
- 根据按钮，切换时区 （根据传来的参数，给locale赋不同的值就行了）
<body>
<%
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(); // 都不是则按照请求头获取就行了
}
ResourceBundle bundle = ResourceBundle.getBundle("i18n", locale);
%>
<a href="i18n_test?country=CN">中文</a>|
<a href="i18n_test?country=USA">english</a>
.....下面和上面的一样
</body>
?优化使用EL和JSTL，代替JSP的脚本：
<%@ taglib prefix="fmt" uri="http://java.sun.com/jsp/jstl/fmt" %>
<body>
<fmt:setLocale value="${param.locale}"/>
<fmt:setBundle basename="i18n"/>
<a href="i18n.jsp?locale=zh_CN">中文</a>|
<a href="i18n.jsp?locale=en_US">english</a>
<h1><fmt:message key="register"/></h1>
<form>
<tr>
<td><fmt:message key="username"/></td>
<td><input name="username" type="text" /></td>
</tr>
<tr>
<td><fmt:message key="password"/></td>
<td><input name="password" type="password" /></td>
</tr>
<tr>
<td colspan="2" align="center">
<input type="submit" value="<fmt:message key="submit"/>" />
</td>
</tr>
</form>
</body>
|