大家好，又见面了，我是你们的朋友全栈君。

出处：http://www.blogjava.net/amigoxie/archive/2010/12/21/341257.html

1.    Web Service接口

1.1 接口方式说明和优点

在笔者的开发生涯中，当作为接口提供商给第三方提供接口时，以及作为客户端去调用第三方提供的接口时，大部分时候都是使用Web  Service接口，Web Service作为接口使用广泛的原因，与它的特点息息相关。

Web Service的主要目标是跨平台的可互操作性，为了实现这一目标，Web Service 完全基于XML（可扩展标记语言）、XSD（XML Schema）等独立于平台、独立于软件供应商的标准，是创建可互操作的、分布式应用程序的新平台。因此使用Web Service有许多优点：

1.1.1 跨防火墙的通信

如果应用程序有成千上万的用户，而且分布在世界各地，那么客户端和服务器之间的通信将是一个棘手的问题。因为客户端和服务器之间通常会有防火墙或者代理服务器。要调用Web Service，可以直接使用SOAP客户端，然后把它和应用程序连接起来。不仅缩短了开发周期，还减少了代码复杂度，并能够增强应用程序的可维护性。
   1.1.2 跨程序语言的应用程序集成

在企业的各种应用系统中，很多系统不是使用相同的语言编写的，例如有的使用Java，有的使用php、C#、asp。当各种系统之间需要交互时，可使用各种语言都通用的WSDL定义接口，对外将需要的接口暴露给指定的客户。

XML Web services 提供了在松耦合环境中使用标准协议（HTTP、XML、SOAP 和 WSDL）交换消息的能力。消息可以是结构化的、带类型的，也可以是松散定义的。 
       1.1.3 软件和数据重用

Web Service在允许重用代码的同时，可以重用代码背后的数据。使用Web Service，再也不必像以前那样，要先从第三方购买、安装软件组件，再从应用程序中调用这些组件；只需要直接调用远端的Web Service就可以了。

另一种软件重用的情况是，把好几个应用程序的功能集成起来，通过Web Service “暴露”出来，就可以非常容易地把所有这些功能都集成到你的门户站点中，为用户提供一个统一的、友好的界面。

可以在应用程序中使用第三方的Web Service 提供的功能，也可以把自己的应用程序功能通过Web Service 提供给别人。两种情况下，都可以重用代码和代码背后的数据。

1.2 重要概念

 1.2.1 何为Web Service？
        Web Service是构建互联网分布式系统的基本部件，它是一个应用程序，它向外界暴露出一个能够通过Web进行调用的API。这就是说，别人能够用编程的方法通过Web来调用这个应用程序。

它通过标准通信协议，在互联网上以服务的方式发布有用的程序模块，目前大部分是用SOAP作为通信协议。

 它提供一份详细的接口说明书，来帮助用户构建应用程序，这个接口说明书叫WSDL（Web服务描述语言，Web Service Description Language）。

通常已发布的Web Service要注册到管理服务器，便于使用者查询和使用。这个是通过UDDI（统一描述、发现和集成，Universal Discovery Description and Integration）来完成的。 
       1.2.2 何为SOAP协议？

SOAP定义SOAP消息的XML格式（XML格式），如果你用一对SOAP标记（SOAP Elements）把XML文档括起来，那么这个就是一个SOAP消息。 

SOAP规范还定义了怎样用XML来描述程序数据，怎样执行RPC（远程过程调用，Remote Procedure Call）。大多数SOAP解决方案都支持RPC-style应用程序，因为很多程序员已对DCOM或CORBA熟悉。它还支持Document-style应用程序（SOAP消息只包含XML文本信息）。Document-style应用程序有很好的灵活性，所以很多用RPC很难构建的Web Service用这种方式构建。 

最后SOAP规范还定义了HTTP消息是怎样传输SOAP消息的。这并不代表SOAP只能用HTTP来作为传输协议，MSMQ、SMTP、TCP/IP都可以做SOAP的传输协议。

安全性对于应用程序来说是很重要的。那么SOAP的安全性如何呢？对于把HTTP作为传输协议的SOAP来说是没有问题的，因为HTTP协议已经有很好的安全构架。那么用其他传输协议会出现安全问题吗？这方面也已经有相关规范

（http://msdn.microsoft.com/library/default.asp?url=/library/en-us/dnglobspec/html/ws-security.asp）。
     1.2.3 何为WSDL？

WSDL是一种XML文档，它定义SOAP消息和这些消息是怎样交换的。IDL（Interface Description Language，接口描述语言）是用于COM和CORBA的，WSDL是用于SOAP的。WSDL是一种XML文档，所以可以阅读和编辑，但很多时候是用工具来创建、由程序阅读。

举个实例，当读者需要使用第三方的Web Service构建应用程序。你可以向接口提供商索取使用WSDL文档，在该文档中详细的说明了各个方法的方法名、参数和参数类型等信息。在Java等编程语言的IDE（例如My Eclipse）中，可以根据Web Servie生成对应的测试代码，稍微修改一下即可。
   1.2.4 何为UDDI？

UDDI可以比喻成电话本，电话本里记录的是电话信息，而UDDI记录的是Web Service信息。可以不把Web Service注册到UDDI。但如果要让全球的人知道这个Web Service，最好还是注册到UDDI。 

UDDI目录说明文件也是一个XML文档，它包括三个部分。“白页（White Paper）”说明提供Web Service的公司（人）信息，比如说名称、地址和联系方式等等。“黄页（Yellow Paper）”说明UDDI目录的分类，比如说金融、服务和印刷等等。“绿页（green Paper）”说明接口（Web Service 提供的）的详细信息。 UDDI提供多种查询方式，来帮助你找到需要的Web Service。如果你查询与财务有关的Web Service，那么UDDI会提供详细的信息。
   1.2.5 何为XML？

XML（Extensible Markup Language）即可扩展标记语言，它与HTML一样，都是SGML(Standard Generalized Markup Language,标准通用标记语言)。在Web Service接口中，WSDL和UDDI目录文件都是一种XML文档，XML解决了数据表示的问题。
   1.2.6 何为XSD？

XML解决了数据表示的问题，但它没有定义一套标准的数据类型，更没有说怎么去扩展这套数据类型。例如，整型数到底代表什么？16位，32位，还是64位？

W3C制定的XML Schema(XSD)就是专门解决这个问题的一套标准。它定义了一套标准的数据类型，并给出了一种语言来扩展这套数据类型。Web Service就是用XSD来作为其数据类型系统的。

1.3 开发Web Service接口和调用测试

在Java IDE环境中开发Web Service接口，以及如何调用第三方的WSDL文档如何进行接口测试的参考文章详见：

1）《使用XFire+Spring构建Web Service（一）——helloWorld篇》：

http://www.blogjava.net/amigoxie/archive/2007/09/26/148207.html

2）《使用XFire+Spring构建Web Service（二）》：

      http://www.blogjava.net/amigoxie/archive/2007/09/28/149074.html

3）《根据wsdl生成对应的Java代码进行接口测试（一）》：

      http://www.blogjava.net/amigoxie/archive/2009/11/20/303038.html

1.4 开发举例

1.4.1 作为提供商提供hello world的接口
   参见：《使用XFire+Spring构建Web Service（一）——helloWorld篇》：

http://www.blogjava.net/amigoxie/archive/2007/09/26/148207.html
   1.4.2作为提供商提供用户信息查询接口

   参见：《使用XFire+Spring构建Web Service（二）》：

   http://www.blogjava.net/amigoxie/archive/2007/09/28/149074.html

2.    js接口

2.1 接口方式说明和优缺点

在开发的过程中，也遇到过需要调用第三方接口的情况，例如笔者在完成的一个股票查询的小demo中，就需要调用新浪提供的股票查询的js接口。另外有一次，在系统中使用了第三方的GIS系统，调用的也是js接口。因为调用js接口的门槛很低，所以有的接口供应商会提供多种调用接口的方式，例如Web Servivce接口和js接口等。
   对于浏览器来说，script标签的src属性所指向资源就跟img标签的src属性所指向的资源一样，都是一个静态资源，浏览器会在适当的时候自动去加 载这些资源，而不会出现所谓的跨域问题。这样我们就可以通过该属性将要访问的数据对象引用进当前页面而绕过js跨域问题。当然，前提是接口必须是返回一段js脚本，如一个json对象数组定义的脚本：

modlist = [
{“modname”: “mod1”, “usernum”: 200, “url”: “/widget/info/1”},
{“modname”: “mod2”, “usernum”: 300, “url” : “/widget/info/2”},
…
];

但script标签也有一定的局限性，并不能解决所有js跨域问题。script标签的src属性值不能动态改变以满足在不同条件下获取不同数据的需求， 更重要的是，不能通过这种方式正确访问以xml内容方式组织的数据。

2.2 开发举例

   2.2.1 新浪股票查询的js接口
  功能说明：stockDetail.jsp根据传入的stockId参数，调用新浪股票查询提供的js接口返回股票结果信息，并解析返回结果，将股票信息在页面展示出来。

stockDetail.jsp代码参考如下：

<%
@ page language=“java“ contentType=“text/html; charset=UTF-8“ pageEncoding=“UTF-8“
%>


<!
DOCTYPE HTML PUBLIC “-//W3C//DTD HTML 4.01 Transitional//EN”
>


<%

String stockId = request.getParameter(“stockId“);
if (stockId == null) {

    stockId = “000001“;
}

%>


<
html
>

  
<
head
>

    
<
meta 
http-equiv
=”Content-Type”
 content
=”text/html; charset=UTF-8″
 
/>

    
<
title
>
股票查询结果
</
title
>

    
<
link 
href
=”<%=request.getContextPath() %>/css/style.css”
 type
=”text/css”
 rel
=”stylesheet”
>

    
<
script 
type
=”text/javascript”
 src
=”http://hq.sinajs.cn/list=s_sh<%=stockId %>”
 charset
=”gb2312″
></
script
>

        
<
meta 
http-equiv
=”pragma”
 content
=”no-cache”
>

        
<
meta 
http-equiv
=”cache-control”
 content
=”no-cache”
>

        
<
meta 
http-equiv
=”expires”
 content
=”0″
>

  
</
head
>

    
<
body 
onload
=””
>

        
<
div 
class
=”bodyDiv”
>

            
<
table
>

                
<
tr
>

                    
<
td 
colspan
=”2″
 valign
=”bottom”
 align
=”left”
 
                        style
=”width:176px; background: url(<%=request.getContextPath() %>/images/line2_bg.gif) repeat-x;border-bottom: 1px solid #b0bec7;”

                        height
=”19″
>

                        
<
span 
class
=”titleFont”
>

                    
<
font 
class
=”newTitleFont”
><
b
>
股票查询结果
</
b
></
font
>

                        
</
span
>

                    
</
td
>

                
</
tr
>

                
<
tr
>

                    
<
td
>
指数名称: 
</
td
>

                    
<
td
><
span 
id
=”stockName”
>
&nbsp;
</
span
></
td
>

                
</
tr
>

                
<
tr
>

                    
<
td
>
当前点数: 
</
td
>

                    
<
td
><
span 
id
=”currentPoint”
>
&nbsp;
</
span
></
td
>

                
</
tr
>

                
<
tr
>

                    
<
td
>
当前价格: 
</
td
>

                    
<
td
><
span 
id
=”currentPrice”
>
&nbsp;
</
span
></
td
>

                
</
tr
>

                
<
tr
>

                    
<
td
>
涨跌率: 
</
td
>

                    
<
td
><
span 
id
=”ratio”
>
&nbsp;
</
span
></
td
>

                
</
tr
>

                
<
tr
>

                    
<
td
>
成交额(w): 
</
td
>

                    
<
td
><
span 
id
=turnVolume
>
&nbsp;
</
span
></
td
>

                
</
tr
>

                
<
tr
>

                    
<
td 
colspan
=”2″
 valign
=”bottom”
 align
=”right”
 
                        style
=”width:176px; background: url(<%=request.getContextPath() %>/images/line2_bg.gif) repeat-x;border-bottom: 1px solid #b0bec7;”

                        height
=”19″
>

                        
<
span 
class
=”titleFont”
>

                            
<
font 
class
=”newTitleFont”
><
b
>
1日K线
&nbsp;&nbsp;&nbsp;
0返回
</
b
></
font
>

                        
</
span
>

                    
</
td
>

                
</
tr
>

            
</
table
>

        
</
div
>

        
<
script 
language
=”javascript”
>

        <!–
        // 查询结果的格式为：指数名称,当前点数,当前价格,涨跌率,成交量（手）,成交额（万元）
        // 解析字符串
        var stockValue = hq_str_s_sh<%=stockId %>;
        var stockArray = stockValue.split(“,“);
        document.getElementById(“stockName“).innerText = stockArray[0];
        document.getElementById(“currentPoint“).innerText = stockArray[1];
        document.getElementById(“currentPrice“).innerText = stockArray[2];
        document.getElementById(“ratio“).innerText = stockArray[3];
        document.getElementById(“turnVolume“).innerText = stockArray[5];
        –>
        
</
script
>

  
</
body
>


</
html
>

带上6位stockId参数（例如：值为000002），实时的A股（代号为s_sh000002）查询结果如下图所示：
   

   在文件头部可看到如下一句引入了新浪提供的js：

<
script 
type
=”text/javascript”
 src
=”http://hq.sinajs.cn/list=s_sh<%=stockId %>”
 charset
=”gb2312″
></
script
>

   用如下语句获得通过接口查询到的数据：

var stockValue = hq_str_s_sh
<%
=
stockId 
%>
;

   2.2.2 对外提供js接口

 

对外提供js接口只需要通过<script src=”…” type=”…”/>请求的地址返回的是JSON字符串即可。
   在本实例中，用到了笔者一篇JSON文章的实例（《JSON知识总结入门篇》：http://www.blogjava.net/amigoxie/archive/2010/09/25/332832.html），在上面进行了小幅修改，简便起见，没有创建任何的Java类，提供的对外的js接口是直接通过json.txt，通过该文件返回一个JSON字符串，在实际的应用情况中，可以是一个Ation等。
   json.txt定义了JSON格式的字符串，并定义放在json这个变量中，jsInterface.html文件请求远端的一个路径，而后解析返回的JSON串，并打印出来。json.txt在远端的一个服务器上，例如该文件访问地址为：http://test.com/json.txt，文件的内容如下：

var json={

 “programmers”: [
    { “firstName”: “阿蜜果”, “lastName”:”McLaughlin”, “email”: “brett@newInstance.com” },
    { “firstName”: “范范”, “lastName”:”Hunter”, “email”: “jason@servlets.com” },
    { “firstName”: “高子”, “lastName”:”Harold”, “email”: “elharo@macfaq.com” }
   ],
 “authors”: [
    { “firstName”: “安安”, “lastName”: “Asimov”, “genre”: “science fiction” },
{ “firstName”: “Tad”, “lastName”: “Williams”, “genre”: “fantasy” },
{ “firstName”: “Frank”, “lastName”: “Peretti”, “genre”: “christian fiction” }
   ],
 “musicians”: [
    { “firstName”: “茂茂”, “lastName”: “Clapton”, “instrument”: “guitar” },
{ “firstName”: “Sergei”, “lastName”: “Rachmaninoff”, “instrument”: “piano” }
   ]
}

在本地创建一个jsInterface.html网页，使用<script type=”text/javascript” src=”…”/>请求返回json字符串的路径信息，接着进行打印，该文件代码如下：

<
html
>

    
<
head
>

        
<
title
>
JS Interface Test
</
title
>

        
<
meta 
http-equiv
=”Content-Type”
 content
=”text/html; charset=UTF-8″
>

        
<
script 
type
=”text/javascript”
 src
=”http://test.com/json.txt”
></
script
>

        
<
script 
type
=”text/javascript”
>

            alert(json.programmers[0].firstName + ‘,’ + json.programmers[0].lastName + ‘,’ + json.programmers[0].email);
            alert(json.programmers[1].firstName + ‘,’ + json.programmers[1].lastName + ‘,’ + json.programmers[1].email);
            alert(json.programmers[2].firstName + ‘,’ + json.programmers[2].lastName + ‘,’ + json.programmers[2].email);
            
            alert(json.authors[0].firstName + ‘,’ + json.authors[0].lastName + ‘,’ + json.authors[0].genre);
            alert(json.authors[1].firstName + ‘,’ + json.authors[1].lastName + ‘,’ + json.authors[1].genre);
            alert(json.authors[2].firstName + ‘,’ + json.authors[2].lastName + ‘,’ + json.authors[2].genre);
            
            alert(json.musicians[0].firstName + ‘,’ + json.musicians[0].lastName + ‘,’ + json.musicians[0].instrument);
            alert(json.musicians[1].firstName + ‘,’ + json.musicians[1].lastName + ‘,’ + json.musicians[1].instrument);
        
</
script
>

    
</
head
>

    
<
body
>

    
</
body
>


</
html
>

         
运行后可看到运行结果与《
JSON
知识总结入门篇》第一个实例的运行结果一致。

3.    http接口

3.1 接口方式说明和优缺点

需要为第三方提供一个接口，本来打算继续使用Web Service接口，结果那边的开发人员说，他们没有使用过Web Service接口（是做IPTV的一个公司），希望我们能够提供http方式的接口。

另外我们一般在提供Web Sservice接口的同时，也对外提供http接口。

3.2 开发实例

3.2.1 向http接口发送消息的使用小程序
   本实例对自己提供请求信息为xml格式的http接口，将xml格式的请求信息发给http接口的地址后，将调用接口的返回消息简单的显示在页面，为了简便起见，笔者没有对js代码进行包装。
   该html文件代码如下：

<!
DOCTYPE HTML PUBLIC “-//W3C//DTD HTML 4.01 Transitional//EN”
>


<
html
>

  
<
head
>

      
<
meta 
http-equiv
=”Content-Type”
 content
=”text/html; charset=GB2312″
>

      
<
title
>
http interface test
</
title
>

        
<
meta 
http-equiv
=”pragma”
 content
=”no-cache”
>

        
<
meta 
http-equiv
=”cache-control”
 content
=”no-cache”
>

        
<
meta 
http-equiv
=”expires”
 content
=”0″
>

        
<
script
>

        // XMLHttpRequest
        var http_request = false;
        function send_request(method, url, content, responseType, callback) {

            http_request = false;
            // XMLHttpRequest
            if(window.XMLHttpRequest) {

                //Mozilla
                http_request = new XMLHttpRequest();
                if(http_request.overrideMimeType) {

                    //MIME
                    http_request.overrideMimeType(“text/xml“);
                }
            } else if(window.ActiveXObject) {

                //IE
                try {

                    http_request = new ActiveXObject(“Msxml2.XMLHTTP“);
                } catch (e) {

                    try {

                        http_request = new ActiveXObject(“Microsoft.XMLHTTP“);
                    }
                    catch (e){}
                }
            }
            if(!http_request) {

                window.alert(“XMLHttpRequest create Error.“);
                return false;
            }
            if(responseType.toLowerCase() == “text“ || responseType.toLowerCase() == “xml“) {

                http_request.onreadystatechange = callback;
            }  else {

                window.alert(“error responseType.“);
                return false;
            }

            if(method.toLowerCase() == “get“) {

                http_request.open(method, url, true);
            } else if(method.toLowerCase() == “post“) {

                http_request.open(method, url, true);
                http_request.setRequestHeader(“Content-Type“, “text/xml“);
            } else {

                window.alert(“http method error.“);
                return false;
            }
            http_request.send(content);
        }
        
        function submitInfo()
        {

            var form = document.httpTestForm;
            var pathInfo = form.pathInfo.value;
            var xmlInfo = form.xmlInfo.value;
            form.returnInfo.value = “wait“;
            send_request(“POST“, pathInfo, xmlInfo, “xml“, showHttpTestBack);
            
        }
        function showHttpTestBack() {

            if(http_request.readyState == 4) 
            {

                if(http_request.status == 200) 
                {

                    var responseInfo = http_request.responseText;
                    var form = document.httpTestForm;
                    form.returnInfo.value = responseInfo;
                }
            }
        }
        
</
script
>

  
</
head
>

  
<
body
>

      
<
form 
name
=”httpTestForm”
 action
=””
 method
=”post”
>

          
<
table 
width
=”100%”
 border
=”1″
>

              
<
tr
>

                  
<
td 
colspan
=”2″
 align
=”center”
>

                      
<
b
>
http interface Test
</
b
>

                  
</
td
>

              
</
tr
>

              
<
tr
>

                  
<
td
>
xmlInfo:
</
td
>

                  
<
td
>

                      
<
textarea 
id
=”xmlInfo”
 name
=”xmlInfo”
 cols
=”100″
 rows
=”5″
></
textarea
>

                  
</
td
>

              
</
tr
>

              
<
tr
>

                  
<
td
>
pathInfo:
</
td
>

                  
<
td
>

                      
<
input 
type
=”text”
 name
=”pathInfo”
 value
=”http://192.168.2.154:16000/Mbd/http/video”
 size
=”100″
 
/>

                  
</
td
>

              
</
tr
>

              
<
tr
>

                  
<
td
>
returnInfo:
</
td
>

                  
<
td
>

                     
<
textarea 
name
=”returnInfo”
 id
=”returnInfo”
 cols
=”100″
 rows
=”5″
></
textarea
>

                  
</
td
>

              
</
tr
>

              
<
tr
>

                  
<
td 
colspan
=”2″
 align
=”center”
>

                      
<
input 
type
=”button”
 name
=”submitButton1″
 value
=”Submit”
 onclick
=”javascript:submitInfo()”
 
/>

                  
</
td
>

              
</
tr
>

              
          
</
table
>

      
</
form
>

  
</
body
>


</
html
>

访问该页，页面很简单，输入正确的xml请求消息，和正确的路径信息，点击“Submit”按钮，通过ajax调用http端口，并在成功取得信息后将返回结果显示在最后一个文本框：

   3.2.2 作为提供商提供http接口

在这个实例中，服务器提供了一个http接口，在这里是一个jsp页面的访问地址，实际应用过程中，可以是Servlet或Action的访问地址，在这个实例中，客户端发送http get发送请求，带上了hotel（宾馆信息）和name（顾客姓名），http接口程序拿到参数信息后，根据一定算法检查分配空闲房间号，这里为了简便起见，只是随机的生成一个数字返回给客户端。http接口的简单程序httpInterface.jsp如下所示：

<%
@ page language=“java“ contentType=“text/html; charset=UTF-8“ pageEncoding=“UTF-8“
%>


<!
DOCTYPE HTML PUBLIC “-//W3C//DTD HTML 4.01 Transitional//EN”
>


<%

Double room = 500 * Math.random();
out.write(“hotel=“ + request.getParameter(“hotel“)
            + “;name=“ + request.getParameter(“name“)
            + “;room=“ + room.intValue());
out.close();

%>


<
html
>

      
<
head
>

        
<
meta 
http-equiv
=”Content-Type”
 content
=”text/html; charset=UTF-8″
 
/>

        
<
title
>
http Interface
</
title
>

        
<
meta 
http-equiv
=”pragma”
 content
=”no-cache”
>

        
<
meta 
http-equiv
=”cache-control”
 content
=”no-cache”
>

        
<
meta 
http-equiv
=”expires”
 content
=”0″
>

      
</
head
>

    
<
body
>

      
</
body
>


</
html
>

可在IE上带上参数访问这个地址，可看到参考的结果信息，例如访问http://IP:端口/应用名称/httpInterface.jsp?hotel=motel&name=amigo，参考返回结果如下：

hotel=motel;name=amigo;room=407

4.    参考文章

1）《Web Service入门》：http://tech.it168.com/j/2007-09-09/200709092111735.shtml

2）《Web Service简介特点,优点,缺点》：

http://hi.baidu.com/linjk03/blog/item/4ee93b03a5d29a8dd43f7cd5.html

3）《Web Service百度百科》：

http://baike.baidu.com/view/67105.htm

4）《如何解决js跨域问题》：

http://www.yaronspace.cn/blog/index.php/archives/542