zoukankan      html  css  js  c++  java

  • JSON&AJAX&I18N

    Json

    Json(JavaScriptObject Notation) 是一种轻量级的数据交换格式。易于人阅读和编写。同时也易于机器解析和生成。Json采用完全独立于语言的文本格式，而且很多语言都提供了对 Json的支持（包括 C,C++,C#,Java, JavaScript,Perl, Python等）。 这样就使得 Json成为理想的数据交换格式
    Json 是一种轻量级的数据交换格式
    轻量级指的是跟 xml 做比较
    数据交换指的是客户端和服务器之间业务数据的传递格式

    Json 在 JavaScript 的使用

    Json 的定义和访问

    geekfx.png

    // Json的定义
var JsonObj = {
    "key1" : "value1",
    "key2" : 666,
    "key3" : ["111", 222],
    "key4" : true,
    "key5" : {
        "key5_1" : "key5_1_value",
        "key5_2" : 522
    }
};
// Json的访问
var key1 = JsonObj.key1;
var key2 = JsonObj.key2;
var key3 = JsonObj.key3;
// 遍历数组
for (let i = 0; i < key3.length; i++) {
    alert(key3[i]);
}
var key4 = JsonObj.key4;
var key5 = JsonObj.key5;
// key5 还是 Json 对象
var key51 = key5.key5_1;
var key52 = JsonObj.key5.key5_2;

    Json 的两个方法

    Json 的存在有两种形式

    • 对象的形式存在，叫它 Json 对象
      一般要操作 Json 中的数据的时候，需要 Json 对象的格式
    • 字符串的形式存在，叫它 Json 字符串
      一般我们要在客户端和服务器之间进行数据交换的时候，使用 Json 字符串

    Json.stringify() 把 Json 对象转换成为 Json 字符串
    Json.parse() 把 Json 字符串转换成为 Json 对象

    // Json对象转字符串
var JsonObjStr = Json.stringify(JsonObj);
alert(JsonObjStr);
// Json字符串转Json对象
var parseStrJson = Json.parse(JsonObjStr);
alert(parseStrJson);

    geekfx.png

    geekfx.png

    Json 在 Java 中的使用

    JavaBean 和 Json 字符串相互转换

    需要使用谷歌提供的 jar 包：Gson

    // 原生 JavaBean 对象
Person personObj = new Person(1, "帅气的锋哥");
System.out.println(personObj);
// 使用 Gson 实现 JavaBean 和 Json 的相互转变
Gson gson = new Gson();
// 将对象转换成 Json 字符串
String personJsonStr = gson.toJson(personObj);
System.out.println(personJsonStr);
// 将 Json 字符串解析成相应的 JavaBean 对象
Person fromStr = gson.fromJson(personJsonStr, Person.class);
System.out.println(fromStr);

    geekfx.png

    List 和 Json 相互转换

    List<Person> list = new ArrayList<>();
list.add(new Person(1, "Linus"));
list.add(new Person(2, "Fx"));
Gson gson = new Gson();
// 将 list 集合转换成 Json 字符串
String listJsonStr = gson.toJson(list);
System.out.println(listJsonStr);
// 将 List 的 Json 字符串转换回 List 对象时
// 需要编写一个类继承 TypeToken<List<xxx>>
// 在 fromJson 方法中传入这个类的实例的 getType 方法 才可以正常转换
List<Person> listJsonObj = gson.fromJson(listJsonStr, new PersonList().getType());
System.out.println(listJsonObj);
Person person = listJsonObj.get(0);
System.out.println(person);

    // 继承即可 无需做任何操作
public class PersonList extends TypeToken<List<Person>> {
}

    否则会将 Json 字符串中的每个元素解析成 Map 集合的 key-value 而不是原来 JavaBean 对象

    geekfx.png

    Map 和 Json 相互转换

    Map 集合的转换同 List 集合

    Map<Integer, Person> map = new HashMap<>();
map.put(1, new Person(1, "Linus"));
map.put(2, new Person(2, "Fx"));
System.out.println(map);
Gson gson = new Gson();
// Map 集合转换成 Json 字符串
String mapJsonStr = gson.toJson(map);
System.out.println(mapJsonStr);
// 直接使用匿名类的方式得到要求的 Type
Map mapJsonObj = gson.fromJson(mapJsonStr, new TypeToken<Map<Integer, Person>>(){}.getType());
System.out.println(mapJsonObj);

    geekfx.png

    Ajax

    AJAX 即 Asynchronous Javascript And XML （异步 JavaScript 和 XML），是指一种创建交互式网页应用的网页开发技术
    Ajax 是一种浏览器通过 JS 异步发起请求，局部更新页面的技术
    Ajax 请求的局部更新，浏览器地址栏不会发生变化
    局部更新不会舍弃原来页面的内容
    Ajax 请求的局部更新，浏览器地址栏不会发生变化
    局部更新不会舍弃原来页面的内容

    原生 Ajax 请求示例

    1. 创建 XMLHttpRequest 对象
      var = new XMLHttpRequest();
    2. 向服务器发送请求
      如需将请求发送到服务器，我们使用 XMLHttpRequest 对象的 open() 和 send() 方法：
      xmlhttp.open("GET","test1.txt",true);
      xmlhttp.send();
    3. 服务器响应
      获得来自服务器的响应，请使用 XMLHttpRequest 对象的 responseText 或 responseXML 属性
    4. onreadystatechange 事件
      当请求被发送到服务器时，我们需要执行一些基于响应的任务
      每当 readyState 改变时，就会触发 onreadystatechange 事件

    代码示例：

    //1、我们首先要创建XMLHttpRequest
var xmlHttpRequest = new XMLHttpRequest();
// 2、调用open方法设置请求参数
xmlHttpRequest.open("GET", "http://localhost:8080/15_Json_Ajax_J18N/ajaxServlet?action=javaScriptAjax", true);
// 4、在send方法前绑定onreadystatechange事件，处理请求完成后的操作。
xmlHttpRequest.onreadystatechange = function () {
    // 获得字符串形式的响应数据
    if(xmlHttpRequest.readyState == 4 && xmlHttpRequest.status == 200) {
        var responseText = xmlHttpRequest.responseText;
        var parse = JSON.parse(responseText);
        document.getElementById("div01").innerHTML = "id: " + parse.id + ", name: " + parse.name;
    }
}
// 3、调用send方法发送请求
xmlHttpRequest.send();

    方法、属性说明

    • open(method, url, async)
      规定请求的类型、URL 以及是否异步处理请求
      • method：请求的类型；GET 或 POST
      • url：文件在服务器上的位置
      • async：true（异步）或 false（同步）
    • send(string)
      将请求发送到服务器
      • string：仅用于 POST 请求
    • responseText
      获得字符串形式的响应数据
    • responseXML
      获得 XML 形式的响应数据
    • onreadystatechange
      存储函数（或函数名），每当 readyState 属性改变时，就会调用该函数
    • readyState
      存有 XMLHttpRequest 的状态
      从 0 到 4 发生变化
      • 0: 请求未初始化
      • 1: 服务器连接已建立
      • 2: 请求已接收
      • 3: 请求处理中
      • 4: 请求已完成，且响应已就绪
    • status
      • 200: "OK"
      • 404: 未找到页面

    GET 还是 POST

    与 POST 相比，GET 更简单也更快，并且在大部分情况下都能用
    然而，在以下情况中，请使用 POST 请求：

    • 无法使用缓存文件（更新服务器上的文件或数据库）
    • 向服务器发送大量数据（POST 没有数据量限制）
    • 发送包含未知字符的用户输入时，POST 比 GET 更稳定也更可靠

    jQuery Ajax 请求示例

    $.ajax 方法

    • url
      表示请求的地址
    • type
      表示请求的类型
      GET 或 POST
    • data
      表示发送给服务器的数据，格式有两种：
      • name=value&name=value
      • {name : value}
    • success
      请求成功后，响应的回调函数
    • dataType
      响应的数据类型
      • text 表示纯文本
      • xml 表示 xml 数据
      • json 表示 json 对象

    代码示例：

    $.ajax({
    url : "http://localhost:8080/15_Json_Ajax_J18N/ajaxServlet",
    type : "GET",
    data : "action=jQueryAjax&key=value",
	// data : {"action":"jQueryAjax", "key":"value"},   两者作用相同
    success : function (msg) {
        $("#ajax").html("编号：" + msg.id + " 姓名：" + msg.name);
    },
    dataType : "json"
});

    $.get / $.post 方法

    这是一个简单的 GET / POST 请求功能以取代复杂 $.ajax 。请求成功时可调用回调函数。如果需要在出错时执行函数，请使用 $.ajax

    • url
      发送请求地址
    • data
      待发送 Key/value 参数
    • callback
      发送成功时回调函数
      type
      返回内容格式：xml, html, script, json, text, _default

    $.getJSON 方法

    通过 HTTP GET 请求载入 JSON 数据

    • url
      发送请求地址
    • data
      待发送 Key-value 参数
    • callback
      载入成功时回调函数

    serialize 方法

    序列表表格内容为字符串

    alert( $("#表单id").serialize() );

    geekfx.png

    I81N 国际化

    国际化（Internationalization）指的是同一个网站可以支持多种不同的语言，以方便不同国家，不同语种的用户访问
    关于国际化我们想到的最简单的方案就是为不同的国家创建不同的网站，比如苹果公司，他的英文官网是：http://www.apple.com 而中国官网是 http://www.apple.com/cn
    苹果公司这种方案并不适合全部公司，而我们希望相同的一个网站，而不同人访问的时候可以根据用户所在的区域显示不同的语言文字，而网站的布局样式等不发生改变
    于是就有了我们说的国际化，国际化总的来说就是同一个网站不同国家的人来访问可以显示出不同的语言。但实际上这种需求并不强烈，一般真的有国际化需求的公司，主流采用的依然是苹果公司的那种方案，为不同的国家创建不同的页面
    国际化的英文 Internationalization，但是由于拼写过长，老外想了一个简单的写法叫做 I18N，代表的是 Internationalization这个单词，以 I 开头，以 N 结尾，而中间是 18 个字母，所以简写为 I18N。以后我们说 I18N 和国际化是一个意思

    geekfx.png

    现有两个 properties 的语言配置文件：

    fx_zh_CN.properties

    username=用户名
password=密码
age=年龄
sex=性别

    fx_en_US.properties

    username=username
password=password
age=age
sex=sex

    在 Java 中分别读取不同的语言包：

    // 获得需要的 Locale 对象
Locale china = Locale.CHINA;
Locale us = Locale.US;

// 指定的 basename 和 Locale 对象 读取对应的配置文件
ResourceBundle zh = ResourceBundle.getBundle("fx", china);
ResourceBundle en = ResourceBundle.getBundle("fx", us);

System.out.println("username = " + zh.getString("username"));
System.out.println("password = " + zh.getString("password"));
System.out.println("age = " + zh.getString("age"));
System.out.println("sex = " + zh.getString("sex"));

System.out.println("username = " + en.getString("username"));
System.out.println("password = " + en.getString("password"));
System.out.println("age = " + en.getString("age"));
System.out.println("sex = " + en.getString("sex"));

    输出：

    username = 用户名
password = 密码
age = 年龄
sex = 性别

username = username
password = password
age = age
sex = sex

    通过请求头国际化页面

    geekfx.png

    geekfx.png

    geekfx.png

    geekfx.png

    <body>
	<%
		// 获取请求头中的语言类型
		Locale locale = request.getLocale();
        // 检查当前请求中是否包含语言要求
		String lan = request.getParameter("lan");
        // 实现对不同的语言要求加载不同的语言资源配置文件
		if("cn".equals(lan)) {
			locale = Locale.CHINA;
		} else if("us".equals(lan)) {
			locale = Locale.US;
		}
		// 读取对应 Locale 的语言配置包
		ResourceBundle bundle = ResourceBundle.getBundle("fx", locale);
	%>
	<a href="i18n.jsp?lan=cn">中文</a>|
	<a href="i18n.jsp?lan=us">english</a>
	<center>
		<h1><%=bundle.getString("register")%></h1>
		<table>
		<form>
			<tr>
				<td><%=bundle.getString("username")%></td>
				<td><input name="username" type="text" /></td>
			</tr>
			<tr>
				<td><%=bundle.getString("password")%></td>
				<td><input type="password" /></td>
			</tr>
			<tr>
				<td><%=bundle.getString("sex")%></td>
				<td><input type="radio" /><%=bundle.getString("male")%><input type="radio" /><%=bundle.getString("female")%></td>
			</tr>
			<tr>
				<td><%=bundle.getString("email")%></td>
				<td><input type="text" /></td>
			</tr>
			<tr>
				<td colspan="2" align="center">
				<input type="reset" value="<%=bundle.getString("reset")%>" />&nbsp;&nbsp;
				<input type="submit" value="<%=bundle.getString("submit")%>" /></td>
			</tr>
			</form>
		</table>
		<br /> <br /> <br /> <br />
	</center>
	国际化测试：
	<br /> 1、访问页面，通过浏览器设置，请求头信息确定国际化语言。
	<br /> 2、通过左上角，手动切换语言
</body>

    geekfx.png

    geekfx.png

    使用 JSTL 标签库 fmt 标签实现国际化

    <body>
	<%-- 使用标签设置 Locale 信息 --%>
	<fmt:setLocale value="${param.locale}" />
	<%-- 使用标签设置 baseName 信息 --%>
	<fmt:setBundle basename="fx" />
	<%-- 使用标签输出指定 key 的国际化信息 --%>
	<%-- <fmt:message key="" /> --%>
	<a href="i18n_fmt.jsp?locale=zh_CN">中文</a>|
	<a href="i18n_fmt.jsp?locale=en_US">english</a>
	<center>
		<h1><fmt:message key="register" /></h1>
		<table>
		<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 type="password" /></td>
			</tr>
			<tr>
				<td><fmt:message key="sex" /></td>
				<td>
					<input type="radio" /><fmt:message key="male" />
					<input type="radio" /><fmt:message key="female" />
				</td>
			</tr>
			<tr>
				<td><fmt:message key="email" /></td>
				<td><input type="text" /></td>
			</tr>
			<tr>
				<td colspan="2" align="center">
				<input type="reset" value="<fmt:message key="reset" />" />&nbsp;&nbsp;
				<input type="submit" value="<fmt:message key="submit" />" /></td>
			</tr>
			</form>
		</table>
		<br /> <br /> <br /> <br />
	</center>
</body>
    不一定每天 code well 但要每天 live well
  • 相关阅读:
    PHP后门新玩法：一款猥琐的PHP后门分析
    中国菜刀批量导出数据
    渗透测试:反弹与转发小结
    怎样用Java自制优秀的图片验证码？这样！
    6条 Tips 为你照亮 GitHub 寻宝之路
    如何搭建一个“不可告人的”私人专属网盘？教程拿去
    6个炫酷又好用的 Python 工具，个个都很奔放呀
    20个Java练手项目，献给嗜学如狂的人
    如何自己动手写一个搜索引擎？我是一份害羞的教程🙈
    GitHub上个最有意思的项目合集（技术清单系列）
  • 原文地址：https://www.cnblogs.com/geekfx/p/12828240.html
Copyright © 2011-2022 走看看