Ajax与REST架构简单示例

      （本文于2010.10.01发表在 《草根》杂志 第四期）

 

话说某日有见哥学社陈哥真人秀，在六体膜拜之后，鉴于之前也有看过REST 的一些东东，于是便有了本文，正文如下：

 

REST(Representational State Transfer 表述性状态转移) 是一种体系架构，它为客户端和服务器之间的数据交互提供了指导。它将客户/ 服务器通信这种计算模型抽象到了Web 层面。

 

REST 最早是在Roy Thomas Fielding 博士的博士论文中提出的，REST 是一种针对网络应用的设计和开发方式，是一种风格 ，可以降低开发的复杂性，提高系统的可伸缩性。

REST 强调如下的体系架构概念。

　　1 、网络上的所有事物都被抽象为资源（resource ）；

　　2 、每个资源对应一个唯一的资源标识（resource identifier ），

　　3 、通过通用的连接器接口（generic connector interface ）对资源进行操作；

　　4 、对资源的各种操作不会改变资源标识；

5 、所有的操作都是无状态的（stateless ）。

 

REST 对于信息的核心抽象是资源，一个资源是一组实体的概念上的映射，而REST 使用一个资源标识符来标识组件之间交互所涉及到的特定资源。REST 连接器提供了访问和操作资源的值集合的一个通用接口。在这里所有的操作中，它们都是无状态的，这样就不必在多个请求之间保存状态，不必考虑上下文的约束，从而允许服务器组件迅速释放资源，并进一步简化其实现 ，从而提高系统的可伸缩性。

 

现在我们就一个简单的示例演示下REST 。

在我们的示例中以Javascript 为客户端，与HTTP 服务器体系架构配合工作，使用URL 作为资源标识，并将HTTP 作为连接器接口。

客户端的代码：

       function rest() {

                var XMLHttpFactories = [

                    function () {return new XMLHttpRequest()},

                    function () {return new ActiveXObject("Msxml2.XMLHTTP")},

                    function () {return new ActiveXObject("Msxml3.XMLHTTP")},

                    function () {return new ActiveXObject("Microsoft.XMLHTTP")}

                ];

 

                var xmlhttp = false;

                for (var i = 0; i < XMLHttpFactories.length; i++) {

                    try {

                        xmlhttp = XMLHttpFactories[i]();

                    } catch (e) {

                        continue;

                    }

                    break;

                }

                // 建立XMLHttpRequest 对象

                this.xmlhttp = xmlhttp;

            }

          

            rest.prototype._get = function(url, data) {

                var xmlhttp = this.xmlhttp;

                xmlhttp.open ('GET', url + "&" + data, false);

                xmlhttp.send (null);

                return xmlhttp.responseText;

            };

 

            rest.prototype._post = function(url,  data) {

                var xmlhttp = this.xmlhttp;

                xmlhttp.open ('POST', url, false);

                xmlhttp.setRequestHeader("Content-Type", "application/x-www-form-urlencoded; charset=UTF-8");

                xmlhttp.setRequestHeader ("Content-Length", data.length);

                xmlhttp.send (data);

                return xmlhttp.responseText;

            };

           

            rest.prototype.get = function(url, data) {

                url = url += "?op=GET";

                return this._get(url, data);

            }

 

            rest.prototype.post = function(url,  data) {

                url = url += "?op=POST";

                return this._post(url, data);

            }

 

            rest.prototype.put = function(url, data) {

                url = url += "?op=PUT";

                return this._post(url, data);

            };

 

            rest.prototype.del = function(url, data) {

                url = url += "?op=DELETE";

                return this._get(url, data);

            };

 

            function t() {

                var restobj = new rest();

 

                document.write (restobj.get("http://localhost/test/service.php", "content=GET Content"));

                document.write (restobj.post("http://localhost/test/service.php", "content=POST Content"));

                document.write (restobj.put("http://localhost/test/service.php", "content=PUT Content"));

                document.write (restobj.del("http://localhost/test/service.php",  "content=DELETE Content"));

            }

 

            t();

 

如上所示，我们在客户端创建XMLHttpRequest 对象，并且通过这个对象实现通过HTTP 对服务器的操作GET 、PUT 、POST 和DELETE 以检索和修改资源。 HTTP 则把对每一个资源的操作都限制在了4 个之内：GET 、POST 、PUT 和DELETE 。HTTP 的这四个方法分别对应我们常见的CRUD 操作，具体对应关系如下 ：

 

C(Create)                <==>   POST

R( Read/Retrieve ) <==>   GET

U( Update )         <==>   PUT

D( Delete/Destroy ) <==>   DELETE

 

虽然HTTP 提供了这4 个方法，但是在某些情况下，PUT 和DELETE 方法是不可用的，于是我们在这里使用GET 方法和POST 方法进行替代。另外，在JS 操作时，需要注意同源策略（ Same Origin Policy ，SOP ） ，考虑跨域的问题。

服务端代码：

<?php

/**

 * REST 后台程序简单示例

 */

class Resource {

    public function get($request) {

        echo 'content=', $request['content'], "; get resource Successful<br />";

    }

 

    public function post($request) {

        echo 'content=', $request['content'], "; post resource Successful<br />";

    }

 

    public function put($request) {

        echo 'content=', $request['content'], "; update resource Successful<br />";

    }

 

    public function delete($request) {

        echo 'content=', $request['content'], "; delete resource Successful<br />";

    }

}

 

$request = $_REQUEST;

$op = $request['op'];

$op = strtolower($op);

 

$ops = array(

    'get' => 1,

    'post' => 1,

    'put' => 1,

    'delete' => 1,

        );

 

if (!isset($ops[$op])) {

    die('input error!');

}

 

$resource = new Resource();

$resource->$op($request);

 

 

?>

 

如上所示，是我们提供REST 数据的服务器端的代码。这里只是简单的应答请求，输出标识内容。

 

以上就是我们这个示例的全部了，在这个示例中，我们的整体架构是基于最简单的客户端/ 服务器模式，客户端使用Javascript ，以Ajax 实现。我们不需要使用PHP 之类的语言生成客户端的页面，所有的客户端的工作都交给Javascript 去做, 包括从服务器端读取数据，生成页面内容，页面布局等等。在服务器端，我们需要做的是提供资源，针对客户端的请求返回对应的资源，此时的服务器是无状态的。客户与服务器之间的数据交换不依赖于服务器，由客户端来维护状态。

 

另外：REST 只是一种体系架构风格，它并没有改变服务器，它改变的是我们的编码风格。