RESTful Web Service(3):使用ajax创建客户端

上个文章中使用eclipse创建的web service。根据rest的思想，每一个资源都有唯一标识的URI。在REST Web service explorer 中可以看到每个资源的URI。

这里放出一些调用的例子：

1.get请求获得Category xml 数据。

$("#btncall").click(function (){
    $.ajax({
        url:"/restblog/services/category",
        type:"GET",
        dataType:'xml',
        success :function (data){
            var tablehtml="<table class='tableresult' border='1' bordercolor='#ccc'><tr><th>编号</th><th>名称</th></tr>";
            $("category",data).each(function (i,category){
                var id=$("id",category).text();
                var name=$("name",category).text();
                tablehtml+=("<tr><td>"+id+"</td><td>"+name+"</td></tr>");
            });
            tablehtml+="</table>";
        $(tablehtml).appendTo("#result");
        },error:function (){
            alert("get category list failed!");
    }});
});

jquery的ajax调用有一个参数dataType是期望得到的数据格式，目前版本的可选值为xml,json,html,jsonp.默认的是html。指定了该属性，jquery会自动解析数据格式。

上面的例子接受到的数据形如：

<?xml version="1.0" encoding="UTF-8"?>
?? <Categories>
?????? <category>
?????????? <id>1</id>
?????????? <name>第一个分类</name>
?????? </category>
?????? <category>
?????????? <id>2</id>
?????????? <name>第二个分类</name>
?????? </category>
?? </Categories>

data是一个xml对象，在没有jquery的情况下解析xml是一件很麻烦的事情。但是使用jquery，xml解析起来和html一样。

$("category",data)是查找标签名(tagName)为category节点，返回jquery对象。注意获得节点值用的是text()方法。

还得注意的地方就是url 这里的路径和请求jsp的规则是一样。

2.发送json的例子。

$("#btnAddbyjson").click(function (){
    $.ajax({
        url:"/restblog/services/category/add",
        type:"PUT",
        data:"{\"id\":1,\"name\":\"category1\"}",
        contentType:'application/json',
        success :function (result){
            alert(result);
        },error:function (){
            alert("add category failed!");
    }});
});

注意type: 通常的ajax调用都只是GET POST 这里用的是PUT，要回过神来。

contentType:与服务方法上的Consume 标注属性一样。在ajax调用的时候会在请求的Header添加{"contentType","application/json"}的键/值标明发送的数据格式是json。

即便发送的数据格式是json,但是真正的数据是以字符串的形式在网络传输的，所以data属性只是json的字符串，由服务器端解析成Category对象。这里的json字符串格式比较严格，不能适用单引号' ,这里要注意。

data属性即可以是字符串又可以是json,jquery会根据contentType解析成需要发送的格式。

下面的截图是在FireBug下看到的数据发送情况：

?

这张图旨在说明发送的数据不是一个键/值类型。区别与下面的例子。

3.POST的表单提交。

$("#btnAdd").click(function (){
    $.ajax({
        url:"/restblog/services/category/addbyname",
        type:"POST",
        data:{'categoryname':$("#txtName").val()},
        success :function (result){
            alert(result);
        },error:function (){
            alert("add category failed!");
    }});
});

addbyname方法的categoryname标识为@FormParam 所以用POST提交的数据被当做Form提交的数据。下面的截图说明浏览器发送的是一个标准的键/值数据

4.调用带@Context标识参数的方法

$("#btncommonProcess").click(function (){
    $.ajax({
        url:"/restblog/services/category/commonProcess",
        type:"GET",
        data:"a=b&a=e&c=d",
        success :function (result){
            alert(result);
        },error:function (){
            alert("commonProcess failed!");
    }});
});

服务端的代码见上一篇文章。

控制台上打印：

c : [d]
a : [b, e]

总结

REST Web service 不但提供了标准的调用方法，同时拥有非常简便的ajax调用。由于请求的纯数据，所以他更适合于ajax调用。而且的客户端可以跨平台，跨应用。他的优势是无可比拟的，我相信他的未来不可估量。