JSON、AJAX、i18n

文章目录

• 一、什么是JSON？
• • 1.1、JSON在JavaScript中的使用
  • • 1.1.1、JSON的定义
    • 1.1.2、JSON的访问
    • 1.1.3、json的两个常用方法
  • 1.2、JSON在java中的使用
  • • 1.2.1、JavaBean和JSON的互转
    • 1.2.2、List和JSON的互转
    • 1.2.3、Map和JSON的互转
• 二、AJAX请求
• • 2.1、什么是AJAX请求
  • 2.2、利用AJAX可以做什么
  • 2.3、原生AJAX请求的示例：
• 三、i18n国际化
• • 3.1、什么是i18n国际化
  • 3.2、国际化相关要素介绍
  • 3.3、国际化资源测试
  • 3.4、通过请求头国际化页面
  • 3.5、通过显示的选择语言类型进行国际化
  • 3.6、JSTL标签库实现国际化

一、什么是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定义示例：

代码语言：javascript复制

var jsonObj = {
				"key1":12,
				"key2":"abc",
				"key3":true,
				"key4":[11,"arr",false],
				"key5":{
					"key5_1":511,
					"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_1_2_value"
				}],
			}

1.1.2、JSON的访问

json本身是一个对象。 json中的key我们可以理解为是对象中的一个属性，json中的key访问就跟访问对象的属性一样：json对象.key json访问示例：

代码语言：javascript复制

alert(typeof (jsonObj)); // object json 就是一个对象
			alert(jsonObj.key1);
			alert(jsonObj.key2);
			alert(jsonObj.key3);
			alert(jsonObj.key4);
			//json中数组值的遍历
			for (var i = 0; i < jsonObj.key4.length; i  ) {
				alert(jsonObj.key4[i])
			}
			alert(jsonObj.key5.key5_1);
			alert(jsonObj.key5.key5_2);
			alert(jsonObj.key6);//得到json数组
			var jsonItem = jsonObj.key6[0];
			alert(jsonItem.key6_1_2);

1.1.3、json的两个常用方法

json的存在有两种形式： 一种是以对象的形式存在，我们叫它json对象。 一种是以字符串的形式存在，我们叫他json字符串。 一般我们要操作json中的数据的时候，需要json对象的格式。 一般我们要在客户端和服务器之间进行数据交换的时候，使用json字符串。 JSON.stringify()：把json对象转换为json字符串 JSON.parse()：把json字符串转换为json对象 示例代码：

代码语言：javascript复制

// json对象转字符串
			var jsonObjString = JSON.stringify(jsonObj); //特别像Java中对象的toString
			alert(jsonObjString);
			// json字符串转json对象
			var jsonObj2 = JSON.parse(jsonObjString);
			alert(jsonObj2.key1);
			alert(jsonObj2.key2);

1.2、JSON在java中的使用

1.2.1、JavaBean和JSON的互转

代码语言：javascript复制

public class JsonTest {
    public static void main(String[] args) {
        Person person = new Person(1,"Tonny");
        //创建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的互转

代码语言：javascript复制

public class PersonListType {
    public static void main(String[] args) {
        List<Person> personList = new ArrayList<>();
        personList.add(new Person(1,"Tom"));
        personList.add(new Person(2,"Jenny"));
        Gson gson = new Gson();
        //把List转换为json字符串
        String personListJsonString = gson.toJson(personList);
        System.out.println(personListJsonString);
        //将json转换为List集合
        //new TypeToken<ArrayList<Person>>(){}.getType()用到了匿名内部类
        List<Person> list = gson.fromJson(personListJsonString,new TypeToken<ArrayList<Person>>(){}.getType());
        System.out.println(list);
        Person person = list.get(0);
        System.out.println(person);
    }
}

1.2.3、Map和JSON的互转

代码语言：javascript复制

public class PersonMapType {
    public static void main(String[] args) {
        Map<Integer, Person> personMap = new HashMap<>();
        personMap.put(1,new Person(1,"LiMing"));
        personMap.put(2,new Person(2,"LiHua"));
        Gson gson = new Gson();
        //把Map转换为json字符串
        String personMapJsonString = gson.toJson(personMap);
        System.out.println(personMapJsonString);
        //将json字符串转换为Map集合
        Map<Integer,Person> map = gson.fromJson(personMapJsonString,new TypeToken<HashMap<Integer,Person>>(){}.getType());
        System.out.println(map);
        Person person = map.get(1);
        System.out.println(person);
    }
}

二、AJAX请求

2.1、什么是AJAX请求

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

2.2、利用AJAX可以做什么

• 注册时，输入用户名自动检查用户是否已经存在。
• 登陆时，提示用户名密码错误
• 删除数据行时，将行id发送到后台，后台在数据库中删除，数据库删除成功后，在页面DOM中将数据行也删除
• …等等

2.3、原生AJAX请求的示例：

Servlet代码：

代码语言：javascript复制

public class AjaxServlet extends BaseServlet{
    protected void javaScriptAjax(HttpServletRequest req, HttpServletResponse resp) throws ServletException, IOException {
        System.out.println("AJAX请求发送过来了");
        Person person = new Person(1, "国哥");
        try {
            Thread.sleep(3000);
        } catch (InterruptedException e) {
            e.printStackTrace();
        }
        // json格式的字符串
        Gson gson = new Gson();
        String personJsonString = gson.toJson(person);

        resp.getWriter().write(personJsonString);
    }
}

代码语言：javascript复制

<!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">
			function ajaxRequest() {
// 				1、我们首先要创建XMLHttpRequest 
				var xmlhttprequest = new XMLHttpRequest();
// 				2、调用open方法设置请求参数
				xmlhttprequest.open("GET","http://localhost:8080/json_ajax_i18n/ajaxServlet?action=javaScriptAjax",true);
// 				3、在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;
					}
				}
				//调用send方法发送请求
				xmlhttprequest.send();
			}
		</script>
	</head>
	<body>	
		<button onclick="ajaxRequest()">ajax request</button>
		<div id="div01">
		</div>
	</body>
</html>

三、i18n国际化

3.1、什么是i18n国际化

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

3.2、国际化相关要素介绍

3.3、国际化资源测试

首先要配置两个properties文件

代码语言：javascript复制

public class I18nTest {
    public static void main(String[] args) {
        Locale locale = Locale.CHINA;
        ResourceBundle bundle = ResourceBundle.getBundle("i18n", locale);
        System.out.println(bundle.getString("password"));

    }
}

3.4、通过请求头国际化页面

代码语言：javascript复制

<%@ page import="java.util.Locale" %>
<%@ page import="java.util.ResourceBundle" %>
<%@ page language="java" contentType="text/html; charset=UTF-8"
		 pageEncoding="UTF-8"%>
<!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>
</head>
<body>
<%
	//从请求头获取locale信息（语言）
	Locale locale = request.getLocale();
	//获取读取包（根据指定的baseName和locale读取语言信息）
	ResourceBundle i18n = ResourceBundle.getBundle("i18n",locale);
%>
	<a href="">中文</a>
	<a href="">english</a>
	<center>
		<h1><%=i18n.getString("regist")%></h1>
		<table>
		<form>
			<tr>
				<td><%=i18n.getString("username")%></td>
				<td><input name="username" type="text" /></td>
			</tr>
			<tr>
				<td><%=i18n.getString("password")%></td>
				<td><input type="password" /></td>
			</tr>
			<tr>
				<td><%=i18n.getString("sex")%></td>
				<td><input type="radio" /><%=i18n.getString("boy")%><input type="radio" /><%=i18n.getString("girl")%></td>
			</tr>
			<tr>
				<td><%=i18n.getString("email")%></td>
				<td><input type="text" /></td>
			</tr>
			<tr>
				<td colspan="2" align="center">
				<input type="reset" value="<%=i18n.getString("reset")%>" />&nbsp;&nbsp;
				<input type="submit" value="<%=i18n.getString("submit")%>" /></td>
			</tr>
			</form>
		</table>
		<br /> <br /> <br /> <br />
	</center>
	国际化测试：
	<br /> 1、访问页面，通过浏览器设置，请求头信息确定国际化语言。
	<br /> 2、通过左上角，手动切换语言
</body>
</html>

3.5、通过显示的选择语言类型进行国际化

代码语言：javascript复制

<%@ page import="java.util.Locale" %>
<%@ page import="java.util.ResourceBundle" %>
<%@ page language="java" contentType="text/html; charset=UTF-8"
         pageEncoding="UTF-8"%>
<!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>
</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();
    }
    ResourceBundle i18n = ResourceBundle.getBundle("i18n", locale);
%>
<a href="i18n2.jsp?country=cn">中文</a>
<a href="i18n2.jsp?country=usa">english</a>
<center>
    <h1><%=i18n.getString("regist")%></h1>
    <table>
        <form>
            <tr>
                <td><%=i18n.getString("username")%></td>
                <td><input name="username" type="text" /></td>
            </tr>
            <tr>
                <td><%=i18n.getString("password")%></td>
                <td><input type="password" /></td>
            </tr>
            <tr>
                <td><%=i18n.getString("sex")%></td>
                <td><input type="radio" /><%=i18n.getString("boy")%><input type="radio" /><%=i18n.getString("girl")%></td>
            </tr>
            <tr>
                <td><%=i18n.getString("email")%></td>
                <td><input type="text" /></td>
            </tr>
            <tr>
                <td colspan="2" align="center">
                    <input type="reset" value="<%=i18n.getString("reset")%>" />&nbsp;&nbsp;
                    <input type="submit" value="<%=i18n.getString("submit")%>" /></td>
            </tr>
        </form>
    </table>
    <br /> <br /> <br /> <br />
</center>
国际化测试：
<br /> 1、访问页面，通过浏览器设置，请求头信息确定国际化语言。
<br /> 2、通过左上角，手动切换语言
</body>
</html>

3.6、JSTL标签库实现国际化

代码语言：javascript复制

<%@ page import="java.util.Locale" %>
<%@ page import="java.util.ResourceBundle" %>
<%@taglib prefix="fmt" uri="http://java.sun.com/jsp/jstl/fmt" %>
<%@ page language="java" contentType="text/html; charset=UTF-8"
		 pageEncoding="UTF-8"%>
<!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>
</head>
<body>
<%--使用标签设置Locale信息--%>
<fmt:setLocale value="${param.locale}" />
<%--使用标签设置baseName--%>
<fmt:setBundle basename="i18n" />

	<a href="i18n_fmt.jsp?locale=zh_CN">中文</a>|
	<a href="i18n_fmt.jsp?locale=en_US">english</a>
	<center>
		<h1><fmt:message key="regist" /> </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="boy" /><input type="radio" /><fmt:message key="girl" /></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>
</html>

json ajax javascript 编程算法 网站

0 人点赞