前后端分离思想，JSON，AJAX

 1. 前端后分离思想

 

1.1 服务器端渲染和客户端渲染

 

服务器端渲染（Server Side Render）：

任何前端页面的显示（JS,图片，CSS等），html代码的生成都为服务器端生成，浏览器向服务器端发送一个request请求，服务器将客户端所需要页面全部生成好后返回给服务器，叫做服务器端渲染。

举例：JSP！！！

 

服务器端渲染的优点：

1. 利于SEO，即有利于搜索引擎进行收录页面（搜索引擎拿到的页面直接就是完整的html页面）

2. 首屏渲染速度快（如果采用客户端渲染，客户端在首次访问服务器时需要加载CSS,JS，图片等文件，消耗时间比服务器端分离高）

 

服务器端渲染的缺点：

1. 服务端压力较大（因为要完成html代码的解析，图片调用这些操作，会浪费掉大量的资源）

2. 前后端工程师耦合很高（在传统的前后端不分离系统的开发中，后端工程师需要等待前端工程师完成页面后再进行修改，浪费时间。同时后端工程师也需要做大量的前端工程师的工作，项目管理很混乱）

3. 代码混乱

 

 

客户端渲染：

将所有的静态资源放在浏览器端进行渲染。前端通过ajax向后端发送请求，请求需要的数据，后端处理请求后，将需要的数据以json或者其他的格式发送给前端，前端接收到数据后，通过JavaScript来进行数据的解析，并操作DOM来显示整个html页面。

 

1.2 前后端分离技术

 

前后端分离已成为互联网项目开发的业界标准使用方式，通过nginx+tomcat的方式（也可以中间加一个nodejs）有效的进行解耦，并且前后端分离会为以后的大型分布式架构、弹性计算架构、微服务架构、多端化服务（多种客户端，例如：浏览器，车载终端，安卓，IOS等等）打下坚实的基础。

 

核心思想：

前端html页面通过ajax调用后端的restuful api接口并使用json数据（不一定非要使用JSON，如果有更好的前后端通信方式也可以使用）进行交互。

即后端提供数据接口，前端调用接口获得数据，获得的数据在前端进行处理

 

以前的JavaWeb项目大多数都是java程序员又当爹又当妈，又搞前端，又搞后端。

随着时代的发展，渐渐的许多大中小公司开始把前后端的界限分的越来越明确，前端工程师只管前端的事情，后端工程师只管后端的事情。正所谓术业有专攻，一个人如果什么都会，那么他毕竟什么都不精。

 

对于后端java工程师：

把精力放在java基础，设计模式，jvm原理，spring+springmvc原理及源码，linux，mysql事务隔离与锁机制，mongodb，http/tcp，多线程，分布式架构，弹性计算架构，微服务架构，java性能优化，以及相关的项目管理等等。

后端追求的是：三高（高并发，高可用，高性能），安全，存储，业务等等。

 

对于前端工程师：

把精力放在html5，css3，jquery，angularjs，bootstrap，reactjs，vuejs，webpack，less/sass，gulp，nodejs，Google V8引擎，javascript多线程，模块化，面向切面编程，设计模式，浏览器兼容性，性能优化等等。

前端追求的是：页面表现，速度流畅，兼容性，用户体验等等。

 

 

 

前端通过json数据来访问后端接口

后端解析前端传来的json数据，将前端需要的数据通过json格式发送给前端

前端接收到json数据，解析，使用js来操作DOM显示网页

 

2. JSON

 

2.1 什么是JSON

 

JSON 是存储和交换文本信息的一种语言。类似 XML。

JSON 比 XML 更小、更快，更易解析。

即JSON是用来表示一个JavaScript对象的文本内容，跟JavaSrcipt内定义的对象差不多= =

 

 

2.2 JSON格式：

 

JSON 数据的书写格式是：

{
    key1 : value1，
    key2 : value2,
    ....
    keyn : value n
}
//键值对

 

 

JSON实例：

{
    "sites": [
    { "name":"google" , "url":"www.google.com" }, 
    { "name":"微博" , "url":"www.weibo.com" }
    ]
}
​

 

1. 数据在名称/值对中

2. 数据由逗号分隔

3. 花括号保存对象

4. 方括号保存数组

 

JSON 值:

JSON 值可以是：

• 数字（整数或浮点数）

• 字符串（在双引号中）

• 逻辑值（true 或 false）

• 数组（在中括号中）

• 对象（在大括号中）

• null

 

JSON数字：

JSON 数字可以是整型或者浮点型：

{ "age":30 }

 

JSON对象：

JSON 对象在大括号 {} 中书写：

{key1 : value1, key2 : value2, ... keyN : valueN }

对象可以包含多个名称/值对：

{ "name":"google" , "url":"www.google.com" }

 

JSON数组：

JSON 数组在中括号 [] 中书写：

数组可包含多个对象：

[
    { key1 : value1-1 , key2:value1-2 }, 
    { key1 : value2-1 , key2:value2-2 }, 
    { key1 : value3-1 , key2:value3-2 }, 
    ...
    { keyN : valueN-1 , keyN:valueN-2 }, 
]

 

{
    "sites": [
        { "name":"google" , "url":"www.google.com" }, 
        { "name":"微博" , "url":"www.weibo.com" }
    ]
}
​

 

JSON布尔值：

JSON 布尔值可以是 true 或者 false：

{ "flag":true }

 

JSON null:

JSON 可以设置 null 值：

{ "name":null }

 

JSON 文件:

• JSON 文件的文件类型是 .json

• JSON 文本的 MIME 类型是 application/json(text/json)

 

 

2.3 将Java对象转换为Json

 

如果想将java对象转换为JSON，需要导入插件来进行转换，目前常用的插件有如下：

1. jsonlib：Json-lib 是以前 Java 常用的一个 Json 库，最后的版本是 2.4，分别提供了 JDK 1.3 和 1.5 的支持，最后更新时间是 2010年12月14日。虽然已经很多年不维护了，但在搜索引擎上搜索 "Java Json" 等相关的关键词发现好像一直还有人在介绍和使用这个库。。。。。

2. gson：google开源的一个插件

3. FastJson：阿里整的一个，吹的是目前性能最好的

 

所以我们接下来的课程就是用FastJson来进行

 

Fastjson 简介

Fastjson 是一个 Java 库，可以将 Java 对象转换为 JSON 格式，当然它也可以将 JSON 字符串转换为 Java 对象。

Fastjson 可以操作任何 Java 对象，即使是一些预先存在的没有源码的对象。

 

Fastjson 特性

• 提供服务器端、安卓客户端两种解析工具，性能表现较好。

• 提供了 toJSONString() 和 parseObject() 方法来将 Java 对象与 JSON 相互转换。调用toJSONString方 法即可将对象转换成 JSON 字符串，parseObject 方法则反过来将 JSON 字符串转换成对象。

• 允许转换预先存在的无法修改的对象（只有class、无源代码）。

• Java泛型的广泛支持。

• 允许对象的自定义表示、允许自定义序列化类。

• 支持任意复杂对象（具有深厚的继承层次和广泛使用的泛型类型）。

 

将java对象转换为JSON：

public class Test {
    public static void main(String[] args) {
        User user = new User();
        user.setId(1);
        user.setUsername("zhangsan");
        user.setPwd("123");
        user.setPhone("131");
        user.setEmail("729");
        
​
        JSONObject jsonUser = (JSONObject)JSONObject.toJSON(demoFilter);
        System.out.println(jsonUser);
    }
}

 

运行结果：

{
    "phone":"131",
    "id":1,
    "pwd":"123",
    "email":"729",
    "username":"zhangsan"
}

 

将对象数组转换为JSON：

public static void main(String[] args) {
        User user = new User();
        user.setId(1);
        user.setUsername("zhangsan");
        user.setPwd("123");
        user.setPhone("131");
        user.setEmail("729");
​
        User user1 = new User();
        user1.setId(1);
        user1.setUsername("lisi");
        user1.setPwd("123123");
        user1.setPhone("131131");
        user1.setEmail("729729");
​
        List<User> users = new ArrayList<>();
        users.add(user);
        users.add(user1);
​
        JSONArray jsonUsers = (JSONArray) JSONArray.toJSON(users);
        System.out.println(jsonUsers);
    }

运行结果:

[
    {
        "phone":"131",
        "id":1,
        "pwd":"123",
        "email":"729",
        "username":"zhangsan"
    },
    {
        "phone":"131131",
        "id":1,
        "pwd":"123123",
        "email":"729729",
        "username":"lisi"
    }
]

 

 

2.4 将JSON转化为js对象

 

方法1：直接使用jquery的$.parseJSON(JSONstr)来进行转换

<script>
    var jsonObejct = $.parseJSON("[{\"phone\":\"131\",\"id\":1,\"pwd\":\"123\",\"email\":\"729\",\"username\":\"zhangsan\"},{\"phone\":\"131131\",\"id\":1,\"pwd\":\"123123\",\"email\":\"729729\",\"username\":\"lisi\"}]");
    console.log(jsonObejct);
</script>

显示如下：

 

 

 

 

方法2：如果使用jQuery，就很方便了，可以在ajax一系列函数中，把参数Datatype传json即可，返回的data即为JS对象

 

方法3：浏览器自带的JSON.parse(jsonstr)

 

 

3. AJAX

 

3.1 什么是AJAX

 

Ajax(Asynchronous JavaScript and XML 异步JavaScript和XML）

 

AJAX不是JavaScript的规范，它只是一个缩写：Asynchronous JavaScript and XML，意思就是用JavaScript执行异步网络请求。

如果仔细观察一个Form的提交，你就会发现，一旦用户点击“Submit”按钮，表单开始提交，浏览器就会刷新页面，然后在新页面里告诉你操作是成功了还是失败了。如果不幸由于网络太慢或者其他原因，就会得到一个404页面。

这就是Web的运作原理：一次HTTP请求对应一个页面。

如果要让用户留在当前页面中，同时发出新的HTTP请求，就必须用JavaScript发送这个新请求，接收到数据后，再用JavaScript更新页面，这样一来，用户就感觉自己仍然停留在当前页面，但是数据却可以不断地更新。

 

一个最简单的AJAX实例(完全可以自己写)：

// 发送异步请求
document.querySelector("button").addEventListener('click', () => {
    // 拿到我们要发送的内容
    var pinglun = document.querySelector("input").value;
​
    // 创建一个异步请求的对象
    var xhr = new XMLHttpRequest();
    // 设置使用 Post 方法进行提交，并且设置请求的 url
    xhr.open("POST", "${pageContext.request.contextPath}/ajax/video");
    // 设置发送数据的格式为 aaa=1&bbb=2 的格式
    xhr.setRequestHeader("Content-Type", "application/x-www-form-urlencoded");
    // 注册事件 (委托浏览器在请求结束的时候触发这个逻辑)
    xhr.onload = function (e) {
       ...
    };
    // 开始发送请求！
    xhr.send("pinglun=" + pinglun);
});

 

总之，ajax技术就是可以通过js来向服务器发送请求，同时接收我们后端响应的json数据并使用js来进行数据处理

所有AJAX技术的底层原理都是来操作XMLHttpRequest这个对象！！！

 

 

 

3.2 JQuery操作ajax

jQuery 对 AJAX 操作进行了封装，使用Jquery进行ajax操作的具体方法如下：

  $(function(){
        //请求参数
        var list = {};
        //
        $.ajax({
            //请求方式
            type : "POST",
            //请求的媒体类型
            contentType: "application/json;charset=UTF-8", 
            //请求地址
            url : "http://127.0.0.1/admin/list/",
            //数据，json字符串
            data : JSON.stringify(list),
            //请求成功
            success : function(result) {
                console.log(result);
            },
            //请求失败，包含具体的错误信息
            error : function(e){
                console.log(e.status);
                console.log(e.responseText);
            }
        });
    });
​

 

 

3.3 $.ajax函数传入参数

 

1.url

说明：发送请求的地址（默认为当前页面），要求是String类型的参数。

2.type

说明：请求方法(post或者get)，默认是get，要求是String类型的参数。其他的htpp请求如（put、delete）等也支持，但是要浏览器支持。

3.timeout

说明：设置请求超时时间（毫秒），要求是number类型的参数。此设置将覆盖$.ajaxSetup()方法的全局设置。

4.async

说明：默认值为true，所有请求是异步，要求是Bool类型的参数，如果需要发送同步请求，将此项设置为false。注意：同步时浏览器会被锁住，因为同步就是使浏览器的行为与ajax一致，导致调用ajax方法时无法操作浏览器

5.cache

说明：默认为true(当datatype为script时，默认为false)从浏览器缓存中加载请求信息，要求是Bool类型的参数。

6.data

说明：发送到服务器的数据，要求是Object或string类型的参数。如果已经不是字符串，将自动转换为字符串格式。get请求中将附加在url后。防止这种自动转换，可以查看　　processData选项。对象必须为key/value格式，例如{foo1:"bar1",foo2:"bar2"}转换为&foo1=bar1&foo2=bar2。如果是数组，JQuery将自动为不同值对应同一个名称。例如{foo:["bar1","bar2"]}转换为&foo=bar1&foo=bar2。

7.dataType:

说明：预期服务器返回的数据类型，要求为String类型的参数。如果不指定，JQuery将自动根据http包mime信息返回responseXML或responseText，并作为回调函数参数传递。可用的类型如下： xml：返回XML文档，可用JQuery处理。 html：返回纯文本HTML信息；包含的script标签会在插入DOM时执行。 script：返回纯文本JavaScript代码。不会自动缓存结果。除非设置了cache参数。注意在远程请求时（不在同一个域下），所有post请求都将转为get请求。 json：返回JSON数据。 jsonp：JSONP格式。使用SONP形式调用函数时，例如myurl?callback=?，JQuery将自动替换后一个“?”为正确的函数名，以执行回调函数。 text：返回纯文本字符串。

8.beforeSend：

说明：发送请求前可以修改XMLHttpRequest对象的函数（也可以修改页面一下信息），例如添加自定义HTTP头。要求为Function类型的参数。在beforeSend中如果返回false可以取消本次ajax请求。XMLHttpRequest对象是惟一的参数。 function(XMLHttpRequest){ this; //调用本次ajax请求时传递的options参数 }

9.complete：

说明：请求完成后调用的回调函数（请求成功或失败时均调用）。要求为Function类型的参数，参数：XMLHttpRequest对象和一个描述成功请求类型的字符串。 function(XMLHttpRequest, textStatus){ this; //调用本次ajax请求时传递的options参数 }

10.success：

说明:请求成功后调用的回调函数,要求为Function类型的参数，有两个参数。 (1)由服务器返回，并根据dataType参数进行处理后的数据。 (2)描述状态的字符串。 function(data, textStatus){ //data可能是xmlDoc、jsonObj、html、text等等 this; //调用本次ajax请求时传递的options参数 }

11.error:

说明：请求失败时被调用的函数。要求为Function类型的参数，该函数有3个参数，即XMLHttpRequest对象、错误信息、捕获的错误对象(可选)。ajax事件函数如下： function(XMLHttpRequest, textStatus, errorThrown){ //通常情况下textStatus和errorThrown只有其中一个包含信息 this; //调用本次ajax请求时传递的options参数 }

12.contentType：

说明：内容编码类型。要求为String类型的参数，当发送信息至服务器时，内容编码类型默认为"application/x-www-form-urlencoded"。该默认值适合大多数应用场合。

13.dataFilter：

说明：给Ajax返回的原始数据进行预处理的函数。要求为Function类型的参数，提供data和type两个参数。data是Ajax返回的原始数据，type是调用jQuery.ajax时提供的dataType参数。函数返回的值将由jQuery进一步处理。 function(data, type){ //返回处理后的数据 return data; }

15.global：

要求为Boolean类型的参数，默认为true。表示是否触发全局ajax事件。设置为false将不会触发全局ajax事件，ajaxStart或ajaxStop可用于控制各种ajax事件。

16.ifModified：

要求为Boolean类型的参数，默认为false。仅在服务器数据改变时获取新数据。服务器数据改变判断的依据是Last-Modified头信息。默认值是false，即忽略头信息。

17.jsonp：

要求为String类型的参数，在一个jsonp请求中重写回调函数的名字。该值用来替代在"callback=?"这种GET或POST请求中URL参数里的"callback"部分，例如{jsonp:'onJsonPLoad'}会导致将"onJsonPLoad=?"传给服务器。

18.username： 要求为String类型的参数，用于响应HTTP访问认证请求的用户名。

19.password： 要求为String类型的参数，用于响应HTTP访问认证请求的密码。

20.processData： 要求为Boolean类型的参数，默认为true。默认情况下，发送的数据将被转换为对象（从技术角度来讲并非字符串）以配合默认内容类型"application/x-www-form-urlencoded"。如果要发送DOM树信息或者其他不希望转换的信息，请设置为false。

21.scriptCharset： 要求为String类型的参数，只有当请求时dataType为"jsonp"或者"script"，并且type是GET时才会用于强制修改字符集(charset)。通常在本地和远程的内容编码不同时使用。

22.$.each()函数:

$.each()函数不同于JQuery对象的each()方法，它是一个全局函数，不操作JQuery对象，而是以一个数组或者对象作为第1个参数，以一个回调函数作为第2个参数。回调函数拥有两个参数：第1个为对象的成员或数组的索引，第2个为对应变量或内容。