前言叙述

此前我们学习过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对象这个在实际开发中用的不多,因此仅作了解.

导入jackson的相关jar包

创建Jackson核心对象 ObjectMapper

调用ObjectMapper的相关方法进行转换
readValue(json字符串数据,Class)

List/map集合转Json

仅作了解

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

配合Json的注解

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

属性排除JsonIgnore

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

属性格式JsonFormat

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

总结38 Ajax WEB异步技术和JSON的应用相关推荐

精通 Grails: 用 JSON 和 Ajax 实现异步 Grails
本文讨论 Grails 对于其互补技术 JSON 和 Ajax 的支持.在前几期的精通 Grails 系列文章中,JSON 和 Ajax 都扮演支援者的角色,而这一次,它们担任主角.您将使用内置的 ...
《Web异步与实时交互——iframe AJAX WebSocket开发实战》—— 1.4　内容安排
本节书摘来异步社区<Web异步与实时交互--iframe AJAX WebSocket开发实战>一书中的第1章,第1.4节,作者: 赵振 , 王顺 , 于梦竹 , 李泽 , 侯法超 , 刘 ...
基于Python Flask框架+jquery Ajax技术实现的增删改查（CRUD）+Ajax的异步文件上传
运行界面(话不多说先上图) 运行之后的index界面,有登陆.注册功能登陆界面,输入数据库中用户名.密码不为空且密码是加密的数据,进入main界面注册界面,用的bootstrop的弹窗,用户名和密 ...
ajax web服务调用无效参数值,json调用web服务，报错，无参数值！
前台:ShowDetail("英伦学院派马夹"); function ShowDetail(productId) { // make an ajax call to the web ...
.Net Web开发技术栈
有很多朋友有的因为兴趣,有的因为生计而走向了.Net中,有很多朋友想学,但是又不知道怎么学,学什么,怎么系统的学,为此我以我微薄之力总结归纳写了一篇.Net web开发技术栈,以此帮助那些想学,却不知 ...
springMVC获取异步请求的参数,返回异步请求数据(json),跨域访问简单了解,文件上传,与Restful风格
springMVC获取异步请求的参数 JQuery发送异步请求回顾 <a href="javascript:void(0);" id="testAjax" ...
Web前端技术 Web学习资料 Web学习路线 Web入门宝典（不断更新中）
(此文档于2019年3月停止再更新,后续更新移步至:https://github.com/liuyuqin1991/polaris) 学习路线第一章技术(核心单独列章节) 1.Node Node. ...
.Net Web开发技术栈收藏
原文:http://www.cnblogs.com/1996V/p/7700087.html#!comments 有很多朋友有的因为兴趣,有的因为生计而走向了.Net中,有很多朋友想学,但是又不知道怎 ...
通俗易懂，什么是.NET?什么是.NET Framework？什么是.NET Core? .Net Web开发技术栈...
通俗易懂,什么是.NET?什么是.NET Framework?什么是.NET Core? 什么是.NET?什么是.NET Framework?本文将从上往下,循序渐进的介绍一系列相关.NET的概念,先 ...

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