前台与后台交互
---

在我们把后台服务化后，前端跨平台化之前，我们还需要了解前台和后台之间怎么通讯。从现有的一些技术上来看，Ajax和WebSocket是比较受欢迎的。

###Ajax

AJAX即“Asynchronous Javascript And XML”（异步JavaScript和XML），是指一种创建交互式网页应用的网页开发技术。这个功能在之前的很多年来一直被Web开发者所忽视，直到最近Gmail、Google Suggest和Google Maps的出现，才使人们开始意识到其重要性。通过在后台与服务器进行少量数据交换，AJAX 可以使网页实现异步更新。这意味着可以在不重新加载整个网页的情况下，对网页的某部分进行更新。传统的网页如果需要更新内容，必须重载整个网页页面。

![Ajax请求](chapters/chapter2/ajax_request.png)

说起Ajax，我们就需要用JavaScript向服务器发送一个HTTP请求。这个过程要从XMLHttpRequest开始说起，它是一个 JavaScript 对象。它最初由微软设计，随后被 Mozilla、Apple和Google采纳。如今，该对象已经被W3C组织标准化。

如下的所示的是一个Ajax请求的示例代码：

```javascript
var xhr = new XMLHttpRequest();
xhr.onreadystatechange = function() {
    if (xhr.readyState == XMLHttpRequest.DONE) {
        alert(xhr.responseText);
    }
}
xhr.open('GET', 'http://example.com', true);
xhr.send(null);
```

我们只需要简单的创建一个请求对象实例，打开一个URL，然后发送这个请求。当传输完毕后，结果的HTTP状态以及返回的响应内容也可以从请求对象中获取。

而这个返回的内容可以是多种格式，如XML和JSON，但是从近年的趋势来看，XML基本上已经很少看到了。这里我们以JSON为主，来简单地介绍一下返回数据的解析。

###JSON

> JSON(JavaScript Object Notation) 是一种轻量级的数据交换格式。它基于ECMAScript的一个子集。 JSON采用完全独立于语言的文本格式，但是也使用了类似于C语言家族的习惯（包括C、C++、C#、Java、JavaScript、Perl、Python等）。这些特性使JSON成为理想的数据交换语言。 易于人阅读和编写，同时也易于机器解析和生成(一般用于提升网络传输速率)。

####XML VS JSON

JSON格式的数据具有以下的一些特点：

 - 容易阅读
 - 解析速度更快
 - 占用空间更少

如下所示的是一个简单的对比过程：

```javascript
myJSON = {"age" : 12, "name" : "Danielle"}
``` 

如果我们要取出上面数值中的age，那么我们只需要这样做：

```javascript
anObject = JSON.parse(myJSON);
anObject.age === 12 // True
```

同样的，对于XML来说，我们有下面的格式:

```
<person>
    <age>12</age>
    <name>Danielle</name>
</person>
```

而如果我们要取出上面数据中的age的值，他将是这样的：

```javascript
myObject = parseThatXMLPlease();
thePeople = myObject.getChildren("person");
thePerson = thePeople[0];
thePerson.getChildren("age")[0].value() == "12" // True
```

对比一下，我们可以发现XML的数据不仅仅解析上比较麻烦，而且还繁琐。

####JSON WEB Tokens

> JSON Web Token (JWT) 是一种基于token 的认证方案。

在人们大规模地开始Web应用的时候，我们在授权的时候遇到了一些问题，而这些问题不是Cookie所能解决的。Cookie存在一些明显的问题：不能支持跨域、并且不是无状态的、不能使用CDN、与系统耦合等等。除了解决上面的问题，它还可以提高性能等等。基于Session的授权机制需要服务端来保存这个状态，而使用JWT则可以跳过这个问题，并且使我们设计出来的API满足RESTful规范。即，我们API的状态应该是没有状态的。因此人们提出了JWT来解决这一系列的问题。

通过JWT我们可以更方便地写出适用于前端应用的认证方案，如登陆、注册这些功能。当我们使用JWT来实现我们的注册、登陆功能时，我们在登陆的时候将向我们的服务器发送我们的用户名和密码，服务器验证后将生成对应的Token。在下次我们进行页面操作的时候，如访问/Dashboard时，发出的HTTP请求的Header中会包含这个Token。服务器在接收到请求后，将对这个Token进行验证并判断这个Token是否已经过期了。

![JWT流程](chapters/chapter2/jwt-process.jpeg)

需要注意的一点是：在使用JWT的时候也需要注意安全问题，在允许的情况下应该使用HTTPS协议。

###WebSocket

在一些网站上为了实现推送技术，都采用了轮询的技术。即在特定的的时间间隔里，由浏览器对服务器发出HTTP请求，然后浏览器便可以从服务器获取最新的技术。如下图所示的是Google Chrome申请开发者账号时发出的对应的请求：

![Chrome Ajax轮询](chapters/chapter2/chrome-ajax-poll.jpg)

从上图中我们可以看到，Chrome的前台正在不断地向后台查询API的结果。由于浏览器需要不断的向服务器发出请求，而HTTP的Header是非常长的，即使是一个很小的数据也会占用大量的带宽和服务器资源。为了解决这个问题，HTML5推出了一种在单个TCP连接上进行全双工通讯的协议WebSocket。

WebSocket可以让客户端和服务器之间存在持久的连接，而且双方都可以随时开始发送数据。
