基于Servlet+Ajax+JSON 的前后端分离

这种开发模式可以称为SPA （Single Page Application 单页面应用）。

这种模式下，前后端的分工明确，前端页面与服务器之间通过 Ajax引擎进行通信，Ajax引擎与服务器之间通过 json进行数据交互。

传统的JSP动态网页开发模式是通过服务器解析浏览器请求实现了动态网页生成和数据展现，在数据发生变化时通过页面刷新来更新新展现的数据。相比于 JSP：这种模式将复杂度从服务器转移到了浏览器的 javascript，减轻了服务器的压力。并且 Ajax 实现了网页 异步发送请求和处理响应。

1. Ajax

Ajax 是浏览器端的技术，依靠 js 将多种技术结合，并通过 js 实现。

实质是通过js内置的 ajax引擎对象(XMLHttpRequest)去后台获取数据，后台servlet进行处理并作出响应，这样从后台获取来的数据就只是传递给了 js 中的方法，ajax引擎对JSON数据进行处理后，将HTML和CSS数据布置给相应的标签。

jQuery库对XMLHttpRequest进行了封装，提供了 ajax()方法实现 js 与服务器之间的数据交互。

ajax()常用属性：

$.ajax({
    url:     //请求地址
    type:"get | post | put | delete ",  // 请求方式，默认是get
    data:"id"="123",
    // data:{"id":"123","pwd":"123456"},   // 多个请求数据
    dataType:"html | text | json | xml | script | json ", //预期服务器返回的数据类型
    async：true/flase,   // true为异步，同步请求将锁住浏览器，用户其它操作必须等待请求完成才可以执行。
    // success 和 error 对应请求成功和失败的回调函数
    success:function(data,dataTextStatus,jqxhr){ },   //请求成功时
    error:function(jqxhr,textStatus,error){ }    //请求失败时
})

操作Ajax要掌握基本的jQuery语句：

选择器：用法与css选择器相同

$("#hid") //选择标签的id
$(".bcl") //选择标签的class
$("input[name='phone']")  //根据属性选择标签，获取name属性值为phone的input元素标签

对标签的属性进行操作：

$("#aid").attr("href","http://news.baidu.com");     //添加或更改属性
$("#aid").removeAttr("title");     //删除属性

设置或返回被选标签的文本内容：

$("li.c1").text("123");  //赋值
var num = $("li.c1").text();  //获取

html() 方法返回或设置被选元素的内容 (inner HTML)，包括标签。

<div id="div2">
    div2内的文本
    <span>span内有文本内容</span>
</div>

// ("#div2").html() 的结果：

div2内的文本
<span>span内有文本内容</span>

val() 方法返回或设置被选元素的value值，大多用于 input 元素。

("#div2").val();

2. JSON

JSON是一种轻量级的数据交换格式，用来序列化对象、数组、数值、字符串、布尔值和 null。它基于 JavaScript 语法，但与之不同：JavaScript不是JSON，JSON也不是JavaScript。

json占带宽少，易于压缩，多用于数据交互，能有效提高网络传输效率。

json在 js 中的定义格式：属性key必须为字符串，引号不能省略，不然java在解析JSON时会出问题

// 通过key来访问数据
var jsons = {
    "key1":"abc",    // 字符串类型
    "key2":1234,     // 数值型
    "key3":[1234,"21341","53"], // 数组
    "key4":{         // json类型对象
    "key4_1" : 12,
    "key4_2" : "kkk"
    },
    "key5":[{        // json数组
    "key5_1_1" : 12,
    "key5_1_2" : "abc"
    },{
	"key5_2_1" : 41,
    }]
}
// 访问json的属性
alert(jsons.key1);    // "abc"
// 访问json的数组属性
alert(jsons.key3[1]); // "21341"
// 访问json的json属性
alert(jsons.key4.key4_1);  //12
// 访问json的json数组
alert(jsons.key5[0].key5_1_2);  //"abc"

 java对象和 json 字符串的相互转换

以使用 fastjson 为例（注意关注最新的fastjson.jar）

User user = new User("张三",19);
String json = JSON.toJSONString(user);

String json = "{\"age\":19,\"username\":\"张三\"}";
User user = JSON.parseObject(json,User.class);

多个对象的转换和解析：

User user1 = new User("张三",18);
User user2 = new User("李四",19);
List<User> persons = new ArrayList<User>();
persons.add(user1);
persons.add(user2);
String jsonString = JSON.toJSONString(persons);
System.out.println(jsonString);

List<User> persons2 = JSON.parseArray(jsonString,User.class);
System.out.println(persons2.get(0).toString());
System.out.println(persons2.get(1).toString());

3. 开发的关键——接口的约定

前后端仅仅通过异步接口(AJAX/JSONP)来编程。

关于前后端接口的规范原则：接口定义的好坏直接影响到前端的工作量和实现逻辑

• 接口返回数据即显示：前端仅做渲染逻辑处理；
• 渲染逻辑禁止跨多个接口调用；
• 前端关注交互、渲染逻辑，尽量避免业务逻辑处理的出现；
• 请求响应传输数据格式：JSON，JSON数据尽量简单轻量，避免多级JSON的出现；

后端编写和维护接口文档，在 API 变化时更新接口文档，后端根据接口文档进行接口开发。

接口文档服务器：可实现接口变更实时同步给前端展示。