Json、Ajax、i18n

目录

一、什么是JSON ?JSON的作用?

二、JSON在客户端【JavaScript 】 中的使用

        1、JSON 的定义

        2、JSON的访问

        3、JSON 中俩个常用的方法

三、JSON在服务器【 java】  中的使用

1、javaBean 和 json 的互转  

2、List 和 json 的互转

3、map 和 json 的互转

四、什么是 Ajax 请求?

五、原生 AJAX 请求的示例

六、jQuery 中的 Ajax 请求

七、i18n

1、什么是 i18n 国际化?

2、i18n 的三要素介绍 

3、通过请求头实现国际化 

 4、通过选择语言类型实现国际化


一、什么是JSON ?JSON的作用?

1、JavaScript Object Notation, 简称JSON(数据交换格式【JSON,xml 】)

2、JSON是一种轻量级的标准的数据交换格式。体积小,易解析

3、在实际开发中,有俩种数据交换格式:JSON 和 XML, XML体积较大,解析麻烦 但是语法严谨

4. [] 和 {} 在JS中有什么区别 [] 是数组,{} 是JSON

作用:

JSON 的主要作用:一种标准的数据交换格式,目前非常流行-,俩个系统交换数据大多使用JSON

数据交换指的是客户端服务器之间业务数据的传递格式。

二、JSON在客户端【JavaScript 】 中的使用

1、JSON 的定义

json 是由键值对组成,并且由 花括号(大括号) 包围。每个键由 双引号 引起来,键和值之间使用 冒号 进行分隔, 多组键值对之间进行 逗号 进行分隔。
			// json的定义
			//json对象中不仅可以保存进本数据类型,还可以保存数组,json对象。
			var jsonObj = {
				"key1":1,
				"key2":"key2_value",
				"key3":true,
				"key4":[11,"arr",false],
				"key5":{
					"key5_1":"key5_1_value",
					"key5_2":"key5_2_value"
				},
				"key6":[{ //json中保存数组,数组保存json对象。
					"key6_1":"key6_1_value",
					"key6_2":"key6_2_value"
				},
					{ //json中保存数组,数组保存json对象。
						"key6_3":"key6_3_value",
						"key6_4":"key6_4_value"
					}
				]
			};

2、JSON的访问

json 就是一个对象,其中的 key 相当于 json 中的键。

json的访问通过:json对象.key  的方式。 

	// json的访问
			//通过 对象.key 的方式访问。
			document.write(jsonObj.key1+"<br>");
			document.write(jsonObj.key2+"<br>");

			document.write("<hr>");
			//访问数组中全部的值 【11,arr,false】
			document.write(jsonObj.key4+"<br>");
			//也可以访问指定的下标
			document.write(jsonObj.key4[2]+"<br>");
			//对数组进行遍历
			for (var i= 0; i<jsonObj.key4.length;i++){
				document.write(jsonObj.key4[i]+"<br>");
			}
			document.write("<hr>");

			// 访问json 对象中的 json 对象 {key5_1_value,key5_2_value}
			document.write(jsonObj.key5.key5_1+"<br>");
			document.write(jsonObj.key5.key5_2+"<br>");
			document.write("<hr>");

			//访问数组中的JSON对象
			//数组中的每一个元素都是 json 对象。
			document.write(jsonObj.key6[0].key6_1+"<br>");
			document.write(jsonObj.key6[0].key6_2+"<br>");

			document.write(jsonObj.key6[1].key6_3+"<br>");
			document.write(jsonObj.key6[1].key6_4+"<br>");

访问结果:

3、JSON 中俩个常用的方法

  • json 的存在有两种形式:
    • 一种是:对象的形式存在,我们叫它 json 对象。
    • 一种是:字符串的形式存在,我们叫它 json 字符串。
  • 一般我们要操作 json 中的数据的时候,需要 json 对象的格式。
  • 一般我们要在客户端和服务器之间进行数据交换的时候,使用 json 字符串。
JSON.stringify()
        把 json 对象转换成为 json 字符串
JSON.parse()
        把 json 字符串转换成为 json 对象
在使用时,JSON一定是大写的。!!!

			// json对象转字符串
			var jsonString = JSON.stringify(jsonObj);
			document.write(jsonString+"<br>");
			// json字符串转json对象
			var  jsonObj2 =  JSON.parse(jsonString);
			document.write(jsonObj2+"<br>");

三、JSON在服务器【 java】  中的使用

提前导入 gson.jar 包

1、javaBean json 的互转  

 准备User实体类:

public class User {
    private Integer id ;
    private String name ;

    public User(Integer id, String name) {
        this.id = id;
        this.name = name;
    }

    public User() {
    }

    @Override
    public String toString() {
        return "User{" +
                "id=" + id +
                ", name='" + name + '\'' +
                '}';
    }

    public Integer getId() {
        return id;
    }

    public void setId(Integer id) {
        this.id = id;
    }

    public String getName() {
        return name;
    }

    public void setName(String name) {
        this.name = name;
    }
}

    // javaBean 和 json 的互转  
    @Test
    public void test1(){
        User user = new User(1,"张三");
        //创建 Gson 实例对象。
        Gson gson = new Gson() ;
        //javaBean --> json字符串
        String userToJsonString = gson.toJson(user);
        System.out.println(userToJsonString);
        // json字符串 --> javaBean
        //fromJson():参数一:json字符串   参数二:转换的对象类型
        User jsonStringToUser = gson.fromJson(userToJsonString, User.class);
        System.out.println(jsonStringToUser);
    }

// 输出结果
//{"id":1,"name":"张三"}
//json.User{id=1, name='张三'}

2、List json 的互转

//<List<User>>这个泛型就是我们想要转换的类型。
public class UserType extends TypeToken<List<User>> {
}

如果 json 转换回 一个 JavaBean 对象时,使用:对象.class 就行,但是集合必须使用 Type

第一种方法:

1、写一个类继承 TypeToken<> :泛型里写想要转换的数据类型

2、在   gson.fromJson(userListToJsonString,new UserType().getType());

第二种方法:

也可以使用匿名内部类的方式

gson.fromJson(userListToJsonString,new TypeToken< List<User>>(){}.getType());
// List 和 json 的互转
    @Test
    public void test2(){
        List<User> userList = new ArrayList<>();
        //创建 Gson 实例对象
        Gson gson = new Gson();
        userList.add(new User(1,"张三"));
        userList.add(new User(2,"李四"));

        //list --> json 字符串
        String userListToJsonString = gson.toJson(userList);
        System.out.println(userListToJsonString);

        // json 字符串 --> list
        // fromJson() 第二个参数:并不是简单的userList.getClass()了,因为他是一个集合。需要传入一个 Type 类型。
        //需要写一个类继承:TypeToken<想要转换的数据类型> 然后 new UserType().getType()
        List user = gson.fromJson(userListToJsonString,new UserType().getType());
        //使用匿名内部类
        // gson.fromJson(userListToJsonString,new TypeToken< List<User>>(){}.getType());
        System.out.println(user);
    }

//[{"id":1,"name":"张三"},{"id":2,"name":"李四"}]
//[json.User{id=1, name='张三'}, json.User{id=2, name='李四'}]

3、map json 的互转

 // map 和 json 的互转
    @Test
    public void test3(){
        Map<Integer,User> userMap = new HashMap<>();
        Gson gson = new Gson() ;
        userMap.put(1,new User(1,"张三"));
        userMap.put(2,new User(2,"李四"));

        // map --> json字符串
        String userMapToJsonString = gson.toJson(userMap);
        System.out.println(userMapToJsonString);

        // json 字符串 --> map
        Map<Integer,User> jsonStringToUserMap =  gson.fromJson(userMapToJsonString, new TypeToken<Map<Integer, User>>(){}.getType());
        System.out.println(jsonStringToUserMap);
        // {"1":{"id":1,"name":"张三"},"2":{"id":2,"name":"李四"}}
        // {1=json.User{id=1, name='张三'}, 2=json.User{id=2, name='李四'}}
    }

四、什么是 Ajax 请求?

AJAX 即 “ A synchronous J avascript A nd X ML (异步 JavaScript XML ),是指一种创建交互式 网页 应用的网页开发 技术。
ajax 是一种浏览器通过 js 异步发起请求,局部更新页面的技术

我们以前学的发送请求,整个页面都会发生变化,并且地址栏也会更新。 

Ajax请求的局部更新: 浏览器地址栏不会发生变化 。局部更新不会舍弃原来页面的内容

同步和异步的区别:

异步:并不会影响页面其他代码的执行,可以理解为多线程。

同步:页面中其他的代码必须等待 AJax 发送完请求并且收到回应完才能执行。

五、原生 AJAX 请求的示例

使用Ajax向Servlet发送请求步骤:

1、创建 XMLHttpRequest 对象

2、调用 open 方法设置请求参数

方法描述
open(method,url,async)

规定请求的类型、URL 以及是否异步处理请求。

  • method:请求的类型;GET 或 POST
  • url:文件在服务器上的位置
  • async:true(异步)或 false(同步)

3、在send方法前绑定onreadystatechange事件,处理请求完成后的操作。

属性描述
onreadystatechange存储函数(或函数名),每当 readyState 属性改变时,就会调用该函数。
readyState

存有 XMLHttpRequest 的状态。从 0 到 4 发生变化。

  • 0: 请求未初始化
  • 1: 服务器连接已建立
  • 2: 请求已接收
  • 3: 请求处理中
  • 4: 请求已完成,且响应已就绪
status

200: "OK"

404: 未找到页面

如需获得来自服务器的响应,请使用 XMLHttpRequest 对象的 responseText 或 responseXML 属性

属性描述
responseText获得字符串形式的响应数据。
responseXML获得 XML 形式的响应数据。

4、调用send方法发送请求

		<script type="text/javascript">

			function ajaxRequest() {
// 				1、我们首先要创建XMLHttpRequest
				var xmlHttpRequest = new XMLHttpRequest();
// 				2、调用open方法设置请求参数
//				第一个参数:请求方式【GET,POST】,不区分大小写
//				第二个参数:url 【请求地址,绝对和相对路径都可以】
//				第三个参数:是否是异步请求【一般为 true 】
				xmlHttpRequest.open("GET","http://localhost:8080/json/javaScriptAjax?action=javaScriptAjax",true);
// 				3、在send方法前绑定onreadystatechange事件,处理请求完成后的操作。
//				onreadystatechange : 当readystate属性状态改变时处理该事件。
//				readystate一共有五个状态 0-4
				xmlHttpRequest.onreadystatechange = function () {
					if (xmlHttpRequest.readyState==4 && xmlHttpRequest.status==200){
						//获取 Servlet 响应过来的字符串。
						var jsonString = xmlHttpRequest.responseText;
						// json字符串 --> json对象
						var jsonObj = JSON.parse(jsonString);
						document.getElementById("div01").innerText = "编号:" + jsonObj.id + ",姓名:" + jsonObj.name
					}
				};
// 				4、调用send方法发送请求
				xmlHttpRequest.send();

			}
		</script>

像上面那种原生的【JavaScript】 Ajax 请求很少用,一般使用 jQuery 中Ajax请求。

六、jQuery 中的 Ajax 请求

接受请求的 Servlet :

public class AjaxServlet extends BaseServlet {

    protected void javaScriptAjax(HttpServletRequest request, HttpServletResponse response) throws ServletException, IOException {
        //在Servlet中接受请求,并相应一些内容

        User user = new User(1,"张三");

        //由于响应到浏览器中的数据都是 字符串,将 JavaBean 对象转换成为 字符串
        Gson gson = new Gson() ;
        String userJsonString = gson.toJson(user);
        response.getWriter().write(userJsonString);
    }

    protected void jQueryAjax(HttpServletRequest request, HttpServletResponse response) throws ServletException, IOException {
        //在Servlet中接受请求,并相应一些内容

        User user = new User(1,"张三");

        //由于响应到浏览器中的数据都是 字符串,将 JavaBean 对象转换成为 字符串
        Gson gson = new Gson() ;
        String userJsonString = gson.toJson(user);
        response.getWriter().write(userJsonString);
    }
    protected void jQueryAjax_get(HttpServletRequest request, HttpServletResponse response) throws ServletException, IOException {
        //在Servlet中接受请求,并相应一些内容

        User user = new User(1,"张三");

        //由于响应到浏览器中的数据都是 字符串,将 JavaBean 对象转换成为 字符串
        Gson gson = new Gson() ;
        String userJsonString = gson.toJson(user);
        response.getWriter().write(userJsonString);
    }
    protected void jQueryAjax_post(HttpServletRequest request, HttpServletResponse response) throws ServletException, IOException {
        //在Servlet中接受请求,并相应一些内容

        User user = new User(1,"张三");

        //由于响应到浏览器中的数据都是 字符串,将 JavaBean 对象转换成为 字符串
        Gson gson = new Gson() ;
        String userJsonString = gson.toJson(user);
        response.getWriter().write(userJsonString);
    }
    protected void jQueryAjax_Json(HttpServletRequest request, HttpServletResponse response) throws ServletException, IOException {
        //在Servlet中接受请求,并相应一些内容

        User user = new User(1, "张三");

        //由于响应到浏览器中的数据都是 字符串,将 JavaBean 对象转换成为 字符串
        Gson gson = new Gson();
        String userJsonString = gson.toJson(user);
        response.getWriter().write(userJsonString);
    }
    protected void serialize(HttpServletRequest request, HttpServletResponse response) throws ServletException, IOException {
        //获取参数
        System.out.println("username = " +request.getParameter("username"));
        System.out.println("password = " + request.getParameter("password"));
        //在Servlet中接受请求,并相应一些内容
        User user = new User(1, "张三");

        //由于响应到浏览器中的数据都是 字符串,将 JavaBean 对象转换成为 字符串
        Gson gson = new Gson();
        String userJsonString = gson.toJson(user);
        response.getWriter().write(userJsonString);
    }
}

1、$.ajax() :通过 HTTP 请求加载远程数据。

$.ajax({

        // 参数

});

参数

url: 请求地址。

type:请求方式,GET或POST

data:发送到服务器的数据。将自动转换为请求字符串格式。【请求参数】

有俩种格式:

                1、name=value&name=value

                2、{name:"value"}

dataType: 响应的数据类型

        "json": 返回 JSON 对象。

        "xml" : 返回的是 xml 数据

        "text": 返回纯文本字符串

success:回调函数,请求成功后执行的函数。需要有一个参数接受 返回 的数据;数据类型取决于 dataType 设置的数据类型

// ajax请求
				$("#ajaxBtn").click(function(){
					$.ajax({
						url:"http://localhost:8080/json/javaScriptAjax",
						type:"GET",
						data:"action=jQueryAjax",
						success:function (data) {
							//json 字符串 --> json对象
							var jsonObj = JSON.parse(data);
							// $("#msg").html("编号:" + data.id + ", 姓名:" + data.name);
							$("#msg").html("编号:" + jsonObj.id + ", 姓名:" + jsonObj.name);
						},
						// dataType:"json" //data 是 json对象。
						dataType:"text" //data 是 字符串 对象。

					});
				});

2、$.get $.post

$.get $.post 参数是一样的,不同的是:$.get 指定发送的是 GET请求。$.post 指定发送的是POST请求。

参数  

        url    请求的 url 地址
        data 发送的数据【请求参数】
        callback  成功的回调函数
        type  返回的数据类型
             // ajax--get请求
            $("#getBtn").click(function () {
                $.get("http://localhost:8080/json/javaScriptAjax", "action=jQueryAjax_get", function (data) {
                    $("#msg").html("$.get 编号:" + data.id + ", 姓名:" + data.name);
                }, "json");
            });  
             // ajax--post请求
            $("#postBtn").click(function () {
                // post请求
                $.post("http://localhost:8080/json/javaScriptAjax", "action=jQueryAjax_post", function (data) {
                    $("#msg").html("$.post 编号:" + data.id + ", 姓名:" + data.name);
                }, "json");
            });

3、$.getJSON :  发送的请求是 GET,并且返回数据类型是 Json 对象。

参数  

        url    请求的 url 地址
        data 发送的数据【请求参数】
        callback  成功的回调函数
            // ajax--getJson请求
            $("#getJSONBtn").click(function () {
                $.getJSON("http://localhost:8080/json/javaScriptAjax", "action=jQueryAjax_Json", function (data) {
                    $("#msg").html("$.getJSON 编号:" + data.id + ", 姓名:" + data.name);
                });
            });

4、表单序列化 serialize()

serialize() 可以把表单中所有表单项的内容都获取到,并以 name=value&name=value 的形式进行拼接
            // ajax请求
            $("#submit").click(function () {
                // 把参数序列化
                //获取表单中所有的 value 值。自动以 name=value&name=value 进行拼接
                var serialize = $("#form01").serialize();
                //发送请求
                //"action=serialize&" 使用serialize获取参数时,前面是不带 & ,需要自己写上。
                $.getJSON("http://localhost:8080/json/javaScriptAjax", "action=serialize&"+serialize, function (data) {
                    $("#msg").html("$.getJSON 编号:" + data.id + ", 姓名:" + data.name);
                });
            });

 在拼接  serialize() 获取的参数时,前面是没有连接符:& 的,需要自己加上。


七、i18n

 

1、什么是 i18n 国际化?

国际化(Internationalization)指的是同一个网站可以支持多种不同的语言,以方便不同国家,不同语种的用户访问。
国际化的英文 Internationalization ,但是由于拼写过长,老外想了一个简单的写法叫做 I18N ,代表的是 Internationalization 这个单词,以 I 开头,以 N 结尾,而中间是 18 个字母,所以简写为 I18N 。以后我们说 I18N 和国际化是一个意思。

 

2、i18n 的三要素介绍 

 查看所有的地区语言:

    @Test
    public void test01(){
        //可查看所有支持的语言,
        Locale[] availableLocales = Locale.getAvailableLocales();
        for (Locale locale : availableLocales) {
            System.out.println(locale);
        }
    }

 获取指定 Locale 对象:

    @Test
    public void test02(){
        //获取指定的Locale对象
        Locale locale_ch = Locale.CHINA ;
        System.out.println(locale_ch); //zh_CN

        Locale locale_us = Locale.US ;
        System.out.println(locale_us);//en_US
    }

t通过不同的 Local 对象读取不同语言的配置文件:

    // 通过读取不同的配置文件,获取不同语言的信息。
    @Test
    public void test03(){
        //获取指定的Locale对象
        Locale locale_ch = Locale.CHINA ;
        //获取资源绑定器
        ResourceBundle bundle = ResourceBundle.getBundle("i18n",locale_ch);
        System.out.println("username = " + bundle.getString("username"));
        System.out.println("password = " + bundle.getString("password"));
        System.out.println("age = " + bundle.getString("age"));
        System.out.println("sex = " + bundle.getString("sex"));
        /*
        username = 用户名
        password = 密码
        age = 年龄
        sex = 性别
         */
    }
 // 通过读取不同的配置文件,获取不同语言的信息。
    @Test
    public void test03(){
        //获取指定的Locale对象
        Locale locale_ch = Locale.US ;
        //获取资源绑定器
        ResourceBundle bundle = ResourceBundle.getBundle("i18n",locale_ch);
        System.out.println("username = " + bundle.getString("username"));
        System.out.println("password = " + bundle.getString("password"));
        System.out.println("age = " + bundle.getString("age"));
        System.out.println("sex = " + bundle.getString("sex"));
        /*
        username = username;
        password = password;
        age = age ;
        sex = sex ;
         */
    }

3、通过请求头实现国际化 

	<%
		/*获取请求头中的的语言信息*/
		Locale locale = request.getLocale();
		System.out.println(locale);
		// 输出结果 zh_CN
	%>

 这个默认的语言信息是从哪里来的呢? 

 从请求头 中的 Accept-Language 中得到的,zh-CN 表示语言,q=0.9 表示权重,越大优先级越高。可以从浏览器的设置中增加语言。位置靠前的语言权重最高。优先级就越高。

当 US 靠前时,默认语言就是 US、

 

 

 通过请求头中的 Accept-Language 参数设置不同语言的页面:

<body>
	<%
		/*获取请求头中的的语言信息*/
		Locale locale = request.getLocale();
		// 获取资源绑定器
		ResourceBundle bundle = ResourceBundle.getBundle("i18n", locale);

	%>
	<a href="">中文</a>|
	<a href="">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("boy")%><input type="radio" /><%=bundle.getString("girl")%></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>

 

 

 

 

 4、通过选择语言类型实现国际化

 像这种修改浏览器设置来实现国际化,对用户不是很友好。

一般是点击  中文|English  切换中英文。 

<body>
<%--使用EL表达式--%>
<%--	<%
		/*获取请求头中的的语言信息*/
		Locale locale =null ;
		String country = request.getParameter("country");
		if ("ch".equals(country)){
			locale = Locale.CHINA;
		}else if ("usa".equals(country)){
			locale = Locale.US;
		}else{
			locale = Locale.getDefault();
		}
		// 获取资源绑定器
		ResourceBundle bundle = ResourceBundle.getBundle("i18n", locale);

	%>--%>

<%--使用JSTL标签库--%>

<%--设置 Locale--%>
<fmt:setLocale value="${param.country}"/>
<%--设置bundle--%>
<fmt:setBundle basename="i18n"/>

<a href="i18n.jsp?country=zh_CN">中文</a>|
<a href="i18n.jsp?country=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="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>
国际化测试:
<br/> 1、访问页面,通过浏览器设置,请求头信息确定国际化语言。
<br/> 2、通过左上角,手动切换语言
</body>
</html>

评论
添加红包

请填写红包祝福语或标题

红包个数最小为10个

红包金额最低5元

当前余额3.43前往充值 >
需支付:10.00
成就一亿技术人!
领取后你会自动成为博主和红包主的粉丝 规则
hope_wisdom
发出的红包

打赏作者

鲨瓜2号

你的鼓励将是我创作的最大动力

¥1 ¥2 ¥4 ¥6 ¥10 ¥20
扫码支付:¥1
获取中
扫码支付

您的余额不足,请更换扫码支付或充值

打赏作者

实付
使用余额支付
点击重新获取
扫码支付
钱包余额 0

抵扣说明:

1.余额是钱包充值的虚拟货币,按照1:1的比例进行支付金额的抵扣。
2.余额无法直接购买下载,可以购买VIP、付费专栏及课程。

余额充值