总结38 Ajax WEB异步技术和JSON的应用

前言叙述

此前我们学习过el表达式,jsp,jstl.但这些技术因为效率不够高(并非指开发效率,而是网页加载效率)被弃用.
在今后的WEB前端开发中,多数使用JS以及它的JQuery技术来进行开发.

Ajax异步技术

概念

所谓异步技术,就相当于WEB中的多线程.
在WEB中,异步是基于AJAX技术实现的.
异步技术的好处:无需重新加载整个网页的情况下，能够更新部分网页的技术
注意:
1.Ajax是基于JQuery来运行的,所以必须先导入JQuery文件才行
2.在日常开发中,AJAX常常结合JSON一同使用.

应用属性之介绍

属性列表介绍:
url 指定一个目标路径 不可省
type 指定一个访问方式 - 可省
data 要提交的参数 - 可省,
success 接收到服务器响应后执行的函数 - 可省,
error 当访问出现错误后执行的函数 - 可省,
dataType 响应数据的类型 - 可省

dataType
如果后台代码指定了Mime格式,那么前台可以省略dataType.
反之,前台必须通过type参数指定Mime类型.
否则会出现乱码
在标准应用格式中,上列属性列表名必须被写上.
在简化格式中,上述属性列表名不需要被写上,只需要填入对应参数即可.

返回函数的注意点

success返回函数是异步技术中的一个属性.
它用来接收WEB后端响应过来的数据,只要你在该函数中定义了一个形参,那么这个形参就能接收到.
这里要注意的是,
一.如果你接收到的响应数据是一个具有键值对的对象数据,那么你需要使用特殊格式接收.
二.如果你接收的键值对数据,是通过jackson转换过来的Java对象,那么需要'键名'必须为java对象中的'成员变量名'
格式:接收响应结果的形参名.键名
三.你想要你的相应类型能够显示

响应类型的乱码

我们使用异步技术,常用的响应类型为json
那么,如何指定响应类型呢?响应类型有二种指定方案
方案一:在前端设置,格式:$.get("请求路径",{请求参数},function(result){ 请求成功之后执行的代码 },"json");
方案二:在后端设置 格式:response.setContentType("application/json;charset=utf-8");

在json响应类型下的已知问题
已知问题一:如果将响应的数据是数字,那么可以正常显示
已知问题二:响应的数据是汉字,并设置前端的为json响应类型,仍然会乱码
已知问题三:响应的数据是汉字,在后端设置为json响应类型,则不会乱码

标准应用格式

格式:

 $.ajax({
                  url:"目标路径",
                  type:"GET/POST",
                  data:{"自定义多个提交参数名1":自定义任意类型的参数值,"自定义多个提交参数名2":自定义任意类型的参数值},
                  success:function (自定义后端响应数据接收形参名) {
                      //自定义后端响应数据应用函数体
                  },
                  error:function () {
                     //自定义错误处理函数体
                  },
                  dataType:"自定义后端相应过来的数据类型 多数为'json'来表示json格式"
              });

列如:

    $.ajax({
                  url:"AjaxWebServlet",//可以以绝对路径或者相对路径的形式指定.这里以'相对路径'来指定
                                        // 相对路径的注意:
                                        // 在当前层级下的资源不需要加上斜杠'/'.           如: 资源文件
                                        // 如果是比当前层级要低的资源,则需要加上斜杠'/'   如:  层级目录/资源文件.
                                        // 如果是比当前层级要高的资源,则需要加上点'.'(有几层加几个.)来表示 如:   ./资源文件
                  type:"get",
                  data:{"textparam":$('#tp').val(),"numberparam":$("#np").val()},
                  success:function (result) {
                      alert(result.age);
                  },
                  error:function () {
                      alert("访问错误~")
                  },
                  dataType:"json"

              });

GET/POST简化格式

注意,推荐的URL目标路径为绝对路径

GET格式:
$.get("目标路径",{"自定义多个提交参数名1":自定义任意类型的参数值,"自定义多个提交参数名2":自定义任意类型的参数值},function (自定义后端响应数据接收形参名) { //自定义后端响应数据应用函数体 },"自定义后端相应过来的数据类型 多数为'json'来表示json格式");
列如:

$.get("AjaxWebServlet",{"string":$("#tp").val()},function (result) {
                    alert(result);
                },"json");

POST格式:
$.post("目标路径",{"自定义多个提交参数名1":自定义任意类型的参数值,"自定义多个提交参数名2":自定义任意类型的参数值},function (自定义后端响应数据接收形参名) { //自定义后端响应数据应用函数体 },"自定义后端相应过来的数据类型 多数为'json'来表示json格式");

注意点: 异步页面

一.请求的后台如果转发/重定向到了某个页面,返回结果会是该页面的代码
在后台是’请求转发’或’重定向’的情况下
如果前台通过异步来访问该后台,则返回的结果为后台所转发/重定向的页面源码

二.同样的,直接异步请求html页面的话,返回结果也将是该页面的代码

JSON

关于JSON还有印象吗?就是当初鼓捣科学黑科技时的配置文件.
但是,不仅仅是有.JSON格式的文件在硬盘上,JSON格式也可以作为一种数据存储的模板,传输WEB后端和前端的数据.

普通键值对格式

注意:
1.如果值是int类型,那么可以不加引号
2.键可以省略引号,但建议加上.
普通键值对定义格式:var 自定义普通键值变量名 = {"键名1":"值1","键名2":"值2"}

普通键值调用格式:自定义普通键值变量名.键名
列如:

//定义
 var user ={"name":"李冰","age":21,"address":"河南","cm":171};
       //调用格式:
            alert(user.name);
            alert(user.age);
            alert(user.address);

数组键值对格式

数组键值对定义格式: var 自定义数组键值变量名 = [{"键名1":"值1","键名2":"值2"},{"键名1":"值1","键名2":"值2"}];

数组键值对调用格式:自定义数组键值变量名[数组索引值].键名
列如:

    //定义方式二 数组键值对 [] --> {}
            var userTwo=[{"name":"张佐","age":19,"level":7},{"name":"李江雪","age":20,"level":9}];
            //调用
            alert(userTwo[0].name);
            alert(userTwo[1].name);

分类式嵌套格式

通过用方括号’[]'数组嵌套多个普通键值对,来达到分类式存储数据的目的.
分类式嵌套定义格式:

  var 自定义分类式嵌套变量名  = {
                "自定义分类名1":[
                    {"键名1":"值1","键名2":"值2"},
                    {"键名1":"值1","键名2":"值2"}
                          ],
                "自定义分类名2":[
                    {"键名1":"值1","键名2":"值2"},
                    {"键名1":"值1","键名2":"值2"}
                          ]
            };

分类式嵌套调用格式:自定义分类式嵌套变量名.自定义分类名[该分类下的数据索引值].键名

列如:

//定义
   var userTwo = {
                "person":[
                    {"name":"张冰冰",age:21,"address":"北京","cm":168},
                    {"name":"刘玉飞",age:23,"address":"广东","cm":169}
                ],
                "school":[
                    {"schoolname":"北京大学","emp":"外语"},
                    {"schoolname":"广东大学","emp":"表演"}
                ]
            };
//调用
  			alert(userTwo.person[0].name);//结果:张冰冰
            alert(userTwo.person[1].name);//结果:刘玉飞
            alert(userTwo.school[0].schoolname);//结果:北京大学
            alert(userTwo.school[1].schoolname);//结果:广东大学

JSON数据转换

JSON本身就是多用于储存配置数据,而诸如java的对象也是用来储存配置数据的.
因此,他们二者基于这一共同点,是能够相互转换的.
如果要将实现 JSON和JAVA对象之间的互相转换,则需要三个json的jay包.
分别为’jackson-annotations-2.2.3.jar’,‘jackson-core-2.2.3.jar’,'jackson-databind-2.2.3.jar’这三个jay包

将Java对象转为Json

步骤一: 创建Json核心对象 ObjectMapper
格式:ObjectMapper 自定义ObjectMapper对象名 = new ObjectMapper();
列如:

ObjectMapper om = new ObjectMapper();

步骤二:把Java对象转换为json,通过response的writer响应给前端
格式:自定义ObjectMapper对象名.writeValue(response.getWriter(), 欲将其转为json的java对象);
列如:

om.writeValue(response.getWriter(), studentObj);

步骤二之扩展
我们在通过ObjectMapper对象将其Java对象转为Json后,还需要指定一个输出目标.
我们可以指定输出到内存中,成为一个字符串,可以指定输出到硬盘文件中,也能把它输出到字符流里头.
还有一个,是经常要用的,那就是输出到前端(writer)

String writeValueAsString(Object obj); //把Java对象转换为json字符串,返回字符串

void writeValue(File f,Object obj); //把Java对象转换为json字符串,把字符串写到File文件中

void writeValue(OutputStream os,Object obj);//把Java对象转换为json字符串,把字符串写到os输出流中

将Json转换为Java对象(了解)

将Json转为Java对象这个在实际开发中用的不多,因此仅作了解.

1. 导入jackson的相关jar包
   2. 创建Jackson核心对象 ObjectMapper
   3. 调用ObjectMapper的相关方法进行转换
      1. readValue(json字符串数据,Class)

List/map集合转Json

仅作了解

			3. 复杂java对象转换
				1. List：数组
				2. Map：对象格式一致

配合Json的注解

在我们使用Json中,经常会遇到要同Java对象相互转换的功能.但是假如,我们在相互转换时有了特殊需求怎么办?因此,诞生出了2个注解,

属性排除JsonIgnore

排除属性，当把该注解放在成员变量上时，在转换json的时候，会自动忽略该属性(成员变量)的转换

属性格式JsonFormat

属性值格式化。一般用于对时间的格式化，转换时，会根据注解所规定的格式进行转换