JavaWeb学习第十一章——JSON、AJAX、i18n

最新推荐文章于 2024-05-23 23:55:24 发布

缥缈一叶舟

最新推荐文章于 2024-05-23 23:55:24 发布

阅读量101

点赞数

分类专栏： javaweb 文章标签： json javaweb

本文链接：https://blog.csdn.net/u014681502/article/details/120933413

版权

javaweb 专栏收录该内容

12 篇文章 0 订阅

订阅专栏

JSON

JSON (JavaScript Object Notation) 是一种轻量级的数据交换格式。易于人阅读和编写。同时也易于机器解析和生成。JSON采用完全独立于语言的文本格式，而且很多语言都提供了对 json 的支持（包括 C, C++, C#, Java, JavaScript, Perl, Python等）。这样就使得 JSON 成为理想的数据交换格式。

轻量级指的是跟 xml 做比较。数据交换指的是客户端和服务器之间业务数据的传递格式。

JSON 在 JavaScript 中的使用(客户端)

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"
        }]
    };

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

json的两个常用方法

json的存在有两种形式

一种是：对象的形式存在，我们叫它 json对象 。

一种是：字符串的形式存在，我们叫它 json字符串 。

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

JSON.stringify() 把 json 对象转换成为 json 字符串

JSON.parse() 把 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

JSON在java中的使用（服务器端）

需要使用json的jar包，此处使用谷歌提供的gson-2.2.4.jar

javaBean和json的互转

toJson可以把 java 对象转换成为 json 字符

fromJson方法把 json 字符串转换回 Java 对象

参数.class是给转成一个javabean使用的，如果是转成list或map，参数要为type类型

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);
}

List 和 json 的互转

参数要为type类型，使用前提：需要创建一个继承jar包内的TypeToken的类。

public class PersonListType extends TypeToken<List<Person>>{//泛型是要将字符串转换回去的具体类型
    //不用具体代码  
}

    // 1.2.2、List 和 json 的互转
    @Test
    public void test2() {
    List<Person> 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);
    
    //把json字符串转换为List 
    List<Person> list = gson.fromJson(personListJsonString, new PersonListType().getType());
    System.out.println(list);
    Person person = list.get(0);
    System.out.println(person);
}

可以使用匿名类进行优化

map和json的互转

//public class PersonListType extends TypeToken<HashMap<Integer,Person>>{//泛型是要将字符串转换回去的具体类型
    //不用具体代码  
//}

// 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(p);
}

AJAX 请求

AJAX 即“ A synchronous J avascript A nd X ML ” （异步 JavaScript 和 XML ），是指一种创建交互式网页应用的网页开发技术。

ajax 是一种浏览器通过 js 异步发起请求，局部更新页面的技术。

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

原生 AJAX 请求的示例*

代码示例：

服务器servlet接收ajax请求

BaseServlet

public abstract class BaseServlet extends HttpServlet {
    protected void doGet(HttpServletRequest req, HttpServletResponse resp) throws ServletException, IOException {
        doPost(req,resp);
    }

    protected void doPost(HttpServletRequest req, HttpServletResponse resp) throws ServletException, IOException {
        req.setCharacterEncoding("UTF-8");
        String action = req.getParameter("action");
        try {
            Method method = this.getClass().getDeclaredMethod(action, HttpServletRequest.class, HttpServletResponse.class);
            method.invoke(this, req, resp);
        } catch (Exception e) {
            e.printStackTrace();
            throw new RuntimeException(e);
        }
    }
}

AjaxServlet

public class AjaxServlet extends BaseServlet {
    protected void javaScriptAjax(HttpServletRequest request, HttpServletResponse response) throws ServletException, IOException {
        //System.out.println("Ajax请求");
        response.setContentType("text/html;charset=UTF-8");
        Person1 person= new Person1(1, "yangin");
        //服务器响应请求返回数据，响应的数据格式为json格式的字符串
        Gson gson = new Gson();
        String personJsonString = gson.toJson(person);
        response.getWriter().write(personJsonString);
    }
}

web.xml中配置地址

    <servlet>
        <servlet-name>AjaxServlet</servlet-name>
        <servlet-class>servlet.AjaxServlet</servlet-class>
    </servlet>
    <servlet-mapping>
        <servlet-name>AjaxServlet</servlet-name>
        <url-pattern>/ajaxServlet</url-pattern>
    </servlet-mapping>

发起Ajax请求 ajax.html

请求发给服务器，服务器响应请求返回数据，响应的数据格式为json格式的字符串。如需获取来自服务器的响应，使用xmlhttprequest对象的responseText。

1、我们首先要创建XMLHttpRequest var xmlhttprequest=new XMLHttpRequest();
2、调用open方法设置请求参数
3、调用send方法发送请求

方法

描述

open(method,url,async)

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

method：请求的类型；GET 或 POST
url：文件在服务器上的位置
async：true（异步）或 false（同步）

send(string)

将请求发送到服务器。

string：仅用于 POST 请求

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

onreadystatechange 事件
当请求被发送到服务器时，我们需要执行一些基于响应的任务。每当 readyState 改变时，就会触发 onreadystatechange 事件。readyState 属性存有 XMLHttpRequest 的状态信息。下面是 XMLHttpRequest 对象的三个重要的属性：

属性	描述
onreadystatechange	存储函数（或函数名），每当 readyState 属性改变时，就会调用该函数。
readyState	存有 XMLHttpRequest 的状态。从 0 到 4 发生变化。 0: 请求未初始化 1: 服务器连接已建立 2: 请求已接收 3: 请求处理中 4: 请求已完成，且响应已就绪
status	200: "OK" 404: 未找到页面

属性

描述

onreadystatechange

存储函数（或函数名），每当 readyState 属性改变时，就会调用该函数。

readyState

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

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

status

200: "OK"

404: 未找到页面

<!DOCTYPE html PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN" "http://www.w3.org/TR/html4/loose.dtd">
<html>
<head>
    <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=javaScriptAjax",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 onclick="ajaxRequest()">ajax request</button>
    <div id="div01">
    </div>
</body>
</html>

AJAX请求的特点说明

局部更新和非局部更新

<a href="http://localhost:8080/json_ajax/ajaxServlet?action=javaScriptAjax">非ajax</a>
<button onclick="ajaxRequest()">ajax request</button>

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

xmlHttpRequest.open("Get","http://localhost:8080/json_ajax/ajaxServlet?action=javaScriptAjax",false);

异步改为同步。让服务器休眠3s。发现ajax代码没运行完的话下面的代码都不能执行。异步提升用户体验，不影响其他功能的交互。

jQuery 中的 AJAX 请求

开发中我们基本使用javascript框架实现ajax请求。常用jquery

$.ajax 方法

url 表示请求的地址

type 表示请求的类型 GET 或 POST 请求

data 表示发送给服务器的数据

格式有两种：

一：name=value&name=value

二：{key:value}

success 请求成功响应的回调函数

dataType 响应的数据类型

常用的数据类型有：

text 表示纯文本

xml 表示 xml 数据

json 表示 json 对象

如果指定为 json 类型，则会把获取到的数据作为一个 JavaScript 对象来解析，并且把构建好的对象作为结果返回。为了实现这个目的，它首先尝试使用 JSON.parse()。

$("#ajaxBtn").click(function(){
    $.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"
    });
});

dataType选择text纯文本，传过来的数据需要转成json对象，如果是json，不需要再转一遍类型，直接使用更加简单。

$.get 方法和$.post 方法

url 请求的 url 地址

data 发送的数据

callback 成功的回调函数

type 返回的数据类型

是在ajax方法基础上进一步封装（少了一个请求的类型type）

// ajax--get 请求
$("#getBtn").click(function(){
    $.get("http://localhost:8080/16_json_ajax_i18n/ajaxServlet","action=jQueryGet",function (data) {$("#msg").html(" get 编号：" + data.id + " , 姓名：" + data.name);},"json");
});

// ajax--post 请求
$("#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 请求的 url 地址

data 发送给服务器的数据

callback 成功的回调函数,data得到的是json数据格式

// ajax--getJson 请求
$("#getJSONBtn").click(function(){
    $.getJSON("http://localhost:8080/16_json_ajax_i18n/ajaxServlet","action=jQueryGetJSON",function(data) {$("#msg").html(" getJSON 编号：" + data.id + " , 姓名：" + data.name);});
});

该函数是简写的 Ajax 函数，等价于：

$.ajax({
  url: url,
  data: data,
  success: callback,
  dataType: json
});

表单序列化 serialize()

serialize()可以把表单中所有表单项的内容都获取到，并以 name=value&name=value 的形式进行拼接。

// ajax 请求
$("#submit").click(function(){
// 把参数序列化
    $.getJSON("http://localhost:8080/16_json_ajax_i18n/ajaxServlet","action=jQuerySerialize&" +
$("#form01").serialize(),function (data) {$("#msg").html(" Serialize 编号：" + data.id + " , 姓名：" + data.name);
});
});

缥缈一叶舟

关注

0
点赞
踩
0

收藏

觉得还不错? 一键收藏
0
评论
JavaWeb学习第十一章——JSON、AJAX、i18n

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

扫一扫