[原创]前后端交互的方式整理 (3)

执行结果：

跨域方案一：
直接添加@CrossOrigin注解

@RestController @RequestMapping("/cdr") @CrossOrigin public class CrossDomainRequestsController {

跨域方案二：
JOSNP方式

$("#testJsonp").click(function () { $.ajax({ type: 'get', url: "http://localhost:8080/cdr/testJsonp", contentType: "application/json; charset=utf-8", dataType: "jsonp", //指定服务器返回的数据类型 jsonpCallback: "printResult", //指定回调函数名称 data:{ "username": "TEC-9", "password": "wodemima" }, success : function(data,status){ // console.log("数据: \n" + JSON.stringify(data) + "\n状态: " + status); console.log("success") } }); }); @RequestMapping(value = "/testJsonp") public JSONPObject testJsonp(PostParam param, String callback) { return new JSONPObject(callback, param); }

Comet（不研究）
以即时通信为代表的web应用程序对数据的Low Latency要求,传统的基于轮询的方式已经无法满足,而且也会带来不好的用户体验。于是一种基于http长连接的“服务器推”技术便被hack出来。这种技术被命名为Comet,这个术语由Dojo Toolkit 的项目主管Alex Russell在博文Comet: Low Latency Data for the Browser首次提出,并沿用下来。

SSE
SSE(Server-Sent Event,服务端推送事件)是一种允许服务端向客户端推送新数据的HTML5技术。与由客户端每隔几秒从服务端轮询拉取新数据相比,这是一种更优的解决方案。
示例代码，也可以参考以下链接：
服务器推送消息SSE以及springmvc后台实现例子：
SSE技术详解：使用 HTTP 做服务端数据推送应用的技术

前端：

if (window.EventSource) { var eventSource = new EventSource("http://localhost:9090/es/testEventSource"); //只要和服务器连接，就会触发open事件 eventSource.addEventListener("open", function () { console.log("open和服务器建立连接"); }); //处理服务器响应报文中的load事件 eventSource.addEventListener("load", function (e) { console.log("load服务器发送给客户端的数据为:" + e.data); if(!e.data) { eventSource.close(); console.log("关闭"); } }); //如果服务器响应报文中没有指明事件，默认触发message事件 eventSource.addEventListener("message", function (e) { console.log("message服务器发送给客户端的数据为:" + e.data); }); //发生错误，则会触发error事件 eventSource.addEventListener("error", function (e) { console.log("error服务器发送给客户端的数据为:" + e.data); }); } else { console.log("服务器不支持EvenSource对象"); }

后端：

static Integer randomInt = 0; @RequestMapping(value = "/testEventSource", produces = "text/event-stream") public String testEventSource() { //响应报文格式为: //data:Hello World //event:load //id:140312 //换行符(/r/n) StringBuffer result = null; // open/load/message/error result = new StringBuffer(); if (randomInt == 0) { result = new StringBuffer(); result.append("event:open"); result.append("\n"); result.append("data:" + randomInt++); result.append("\n\n"); return result.toString(); } while (randomInt < 5) { result = new StringBuffer(); result.append("event:load"); result.append("\n"); result.append("data:" + randomInt++); result.append("\n\n"); return result.toString(); } result = new StringBuffer(); result.append("event:load"); result.append("\n"); result.append("data:"); result.append("\n\n"); return result.toString(); }

Websocket
WebSocket协议是基于TCP的一种新的网络协议。它实现了浏览器与服务器全双工(full-duplex)通信——允许服务器主动发送信息给客户端。
学习链接：使用 HTML5 WebSocket 构建实时 Web 应用
小结
说了那么多简单总结下，大家想明白几点就行了，客户端与服务端谁先主动，是否强调数据的实时性。
AJAX – 请求 → 响应 （频繁使用）
Comet – 请求 → 挂起 → 响应 （模拟服务端推送）
Server-Sent Events – 客户单 ← 服务端 （服务端推送）
WebSockets – 客户端 ↔ 服务端 (未来趋势,双工通信)