| |
| <!DOCTYPE html PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN" "http://www.w3.org/TR/html4/loose.dtd"> |
| <!-- |
| |
| Licensed to the Apache Software Foundation (ASF) under one or more |
| contributor license agreements. See the NOTICE file distributed with |
| this work for additional information regarding copyright ownership. |
| The ASF licenses this file to You under the Apache License, Version 2.0 |
| (the "License"); you may not use this file except in compliance with |
| the License. You may obtain a copy of the License at |
| |
| http://www.apache.org/licenses/LICENSE-2.0 |
| |
| Unless required by applicable law or agreed to in writing, software |
| distributed under the License is distributed on an "AS IS" BASIS, |
| WITHOUT WARRANTIES OR CONDITIONS OF ANY KIND, either express or implied. |
| See the License for the specific language governing permissions and |
| limitations under the License. |
| --> |
| <html> |
| <head> |
| |
| <link type="text/css" rel="stylesheet" href="/resources/site.css"> |
| <script src='/resources/space.js'></script> |
| |
| <meta http-equiv="Content-type" content="text/html;charset=UTF-8"> |
| <meta name="keywords" content="business integration, EAI, SOA, Service Oriented Architecture, web services, SOAP, JBI, JMS, WSDL, XML, EDI, Electronic Data Interchange, standards support, integration standards, application integration, middleware, software, solutions, services, CXF, open source"> |
| <meta name="description" content="Apache CXF, Services Framework - JavaScript Client Code"> |
| |
| |
| <link type="text/css" rel="stylesheet" href="/resources/highlighter/styles/shCoreCXF.css"> |
| <link type="text/css" rel="stylesheet" href="/resources/highlighter/styles/shThemeCXF.css"> |
| |
| <script src='/resources/highlighter/scripts/shCore.js'></script> |
| <script src='/resources/highlighter/scripts/shBrushXml.js'></script> |
| <script src='/resources/highlighter/scripts/shBrushJava.js'></script> |
| <script src='/resources/highlighter/scripts/shBrushJScript.js'></script> |
| <script> |
| SyntaxHighlighter.defaults['toolbar'] = false; |
| SyntaxHighlighter.all(); |
| </script> |
| |
| |
| <title> |
| Apache CXF -- JavaScript Client Code |
| </title> |
| </head> |
| <body onload="init()"> |
| |
| |
| <table width="100%" cellpadding="0" cellspacing="0"> |
| <tr> |
| <td id="cell-0-0" colspan="2"> </td> |
| <td id="cell-0-1"> </td> |
| <td id="cell-0-2" colspan="2"> </td> |
| </tr> |
| <tr> |
| <td id="cell-1-0"> </td> |
| <td id="cell-1-1"> </td> |
| <td id="cell-1-2"> |
| <!-- Banner --> |
| <div class="banner" id="banner"><div><table border="0" cellpadding="0" cellspacing="0" width="100%"><tr><td align="left" colspan="1" nowrap> |
| <a shape="rect" href="http://cxf.apache.org/" title="Apache CXF"><span style="font-weight: bold; font-size: 170%; color: white">Apache CXF</span></a> |
| </td><td align="right" colspan="1" nowrap> |
| <a shape="rect" href="http://www.apache.org/" title="The Apache Sofware Foundation"><img border="0" alt="ASF Logo" src="http://cxf.apache.org/images/asf-logo.png"></a> |
| </td></tr></table></div></div> |
| <!-- Banner --> |
| <div id="top-menu"> |
| <table border="0" cellpadding="1" cellspacing="0" width="100%"> |
| <tr> |
| <td> |
| <div align="left"> |
| <!-- Breadcrumbs --> |
| <a href="index.html">Index</a> > <a href="dynamic-languages.html">Dynamic Languages</a> > <a href="javascript-clients.html">JavaScript Clients</a> > <a href="javascript-client-code.html">JavaScript Client Code</a> |
| <!-- Breadcrumbs --> |
| </div> |
| </td> |
| <td> |
| <div align="right"> |
| <!-- Quicklinks --> |
| <div id="quicklinks"><p><a shape="rect" href="http://cxf.apache.org/download.html">Download</a> | <a shape="rect" href="http://cxf.apache.org/docs/index.html">Documentation</a></p></div> |
| <!-- Quicklinks --> |
| </div> |
| </td> |
| </tr> |
| </table> |
| </div> |
| </td> |
| <td id="cell-1-3"> </td> |
| <td id="cell-1-4"> </td> |
| </tr> |
| <tr> |
| <td id="cell-2-0" colspan="2"> </td> |
| <td id="cell-2-1"> |
| <table> |
| <tr valign="top"> |
| <td height="100%"> |
| <div id="wrapper-menu-page-right"> |
| <div id="wrapper-menu-page-top"> |
| <div id="wrapper-menu-page-bottom"> |
| <div id="menu-page"> |
| <!-- NavigationBar --> |
| <div id="navigation"><ul class="alternate"><li><a shape="rect" href="overview.html">Overview</a></li><li><a shape="rect" href="how-tos.html">How-Tos</a></li><li><a shape="rect" href="frontends.html">Frontends</a></li><li><a shape="rect" href="databindings.html">DataBindings</a></li><li><a shape="rect" href="transports.html">Transports</a></li><li><a shape="rect" href="configuration.html">Configuration</a></li><li><a shape="rect" href="debugging-and-logging.html">Debugging and Logging</a></li><li><a shape="rect" href="tools.html">Tools</a></li><li><a shape="rect" href="restful-services.html">RESTful Services</a></li><li><a shape="rect" href="wsdl-bindings.html">WSDL Bindings</a></li><li><a shape="rect" href="service-routing.html">Service Routing</a></li><li><a shape="rect" href="dynamic-languages.html">Dynamic Languages</a></li><li><a shape="rect" href="ws-support.html">WS-* Support</a></li><li><a shape="rect" href="advanced-integration.html">Advanced Integration</a></li><li><a shape="rect" href="deployment.html">Deployment</a></li><li><a shape="rect" href="schemas-and-namespaces.html">Use of Schemas and Namespaces</a></li></ul><hr><ul class="alternate"><li><p>Search</p></li></ul><form enctype="application/x-www-form-urlencoded" method="get" id="cse-search-box" action="http://www.google.com/cse"> |
| <div> |
| <input type="hidden" name="cx" value="002890367768291051730:o99qiwa09y4"> |
| <input type="hidden" name="ie" value="UTF-8"> |
| <input type="text" name="q" size="21"> |
| <input type="submit" name="sa" value="Search"> |
| </div> |
| </form> |
| <script type="text/javascript" src="http://www.google.com/cse/brand?form=cse-search-box&lang=en"></script><hr><ul class="alternate"><li><a shape="rect" href="http://cxf.apache.org/javadoc/latest/">API 3.2.x (Javadoc)</a></li><li><a shape="rect" href="http://cxf.apache.org/javadoc/latest-3.1.x/">API 3.1.x (Javadoc)</a></li><li><a shape="rect" href="http://cxf.apache.org/">CXF Website</a></li></ul><p> </p><p><a shape="rect" class="external-link" href="http://www.apache.org/events/current-event.html"><span class="confluence-embedded-file-wrapper"><img class="confluence-embedded-image confluence-external-resource" src="http://www.apache.org/events/current-event-125x125.png" data-image-src="http://www.apache.org/events/current-event-125x125.png"></span></a></p></div> |
| <!-- NavigationBar --> |
| </div> |
| </div> |
| </div> |
| </div> |
| </td> |
| <td height="100%"> |
| <!-- Content --> |
| <div class="wiki-content"> |
| <div id="ConfluenceContent"><h1 id="JavaScriptClientCode-StructureoftheCode">Structure of the Code</h1> |
| |
| <p>There are three types of JavaScript code:</p> |
| <ul><li>Utilities</li><li>Schema</li><li>Service</li></ul> |
| |
| |
| <h1 id="JavaScriptClientCode-Utilities">Utilities</h1> |
| |
| <p>The utilities code is a fixed set of JavaScript that provides some browser compatibility and XML management. This code is delivered in the distribution in the file etc/cxf-utils.js. If you are using the ?js URL handler, it is delivered at the beginning of the response (<em>unless</em> you add &nojsutils to the URL). If you are generating JavaScript using the tools, it is up to you to copy this file and to use it.</p> |
| |
| <h1 id="JavaScriptClientCode-SchemaCode">Schema Code</h1> |
| |
| <p>The Schema code generates one object for each 'bean' used in your service. This code is organized by XML Schema. The code for each schema starts with a comment like:</p> |
| |
| <div class="code panel pdl" style="border-width: 1px;"><div class="codeContent panelContent pdl"> |
| <pre class="brush: java; gutter: false; theme: Default"> |
| // |
| // Definitions for schema: http://apache.org/hello_world_soap_http/types |
| // file:/home/benson/cxf/trunk/distribution/src/main/release/samples/js_browser_client/wsdl/hello_world.wsdl#types1 |
| // |
| </pre> |
| </div></div> |
| |
| <p>The generator generates a JavaScript constructor for each global complex type and element in the schema. Generally, you will find that the service methods are defined in terms of types, not elements. However, depending on whether you use Document or RPC, and depending on exactly how you configure your parts and types, you may find that a particular method is defined in terms of an 'element'-based JavaScript type instead of a 'type'-based class.</p> |
| |
| <p>A typical JavaScript class for a type looks like:</p> |
| |
| <div class="code panel pdl" style="border-width: 1px;"><div class="codeContent panelContent pdl"> |
| <pre class="brush: java; gutter: false; theme: Default"> |
| function apache_org_hello_world_soap_http_types_sayHiResponse () { |
| this._responseType = ''; |
| } |
| |
| function apache_org_hello_world_soap_http_types_sayHiResponse_getResponseType() { return this._responseType;} |
| apache_org_hello_world_soap_http_types_sayHiResponse.prototype.getResponseType = |
| apache_org_hello_world_soap_http_types_sayHiResponse_getResponseType; |
| function apache_org_hello_world_soap_http_types_sayHiResponse_setResponseType(value) {this._responseType = value;} |
| apache_org_hello_world_soap_http_types_sayHiResponse.prototype.setResponseType = |
| apache_org_hello_world_soap_http_types_sayHiResponse_setResponseType; |
| |
| </pre> |
| </div></div> |
| |
| <p>This is very simple type, derived from the return part of a Document/Literal service. It has one piece of data in it, called 'responseType'. Note that the code style here is to define getters and setters over 'private' properties. The code does not go to elaborate lengths to make the properties <em>private</em>; it just puts an _ on the front of the names.</p> |
| |
| <h1 id="JavaScriptClientCode-ServiceCode">Service Code</h1> |
| |
| <p>The code for a service starts with a comment, followed by a constructor for the per-service object:</p> |
| |
| <div class="code panel pdl" style="border-width: 1px;"><div class="codeContent panelContent pdl"> |
| <pre class="brush: java; gutter: false; theme: Default"> |
| // Javascript for {http://apache.org/hello_world_soap_http}Greeter |
| |
| function apache_org_hello_world_soap_http_Greeter () { |
| this.jsutils = new CxfApacheOrgUtil(); |
| this.synchronous = false; |
| this.url = null; |
| this.client = null; |
| this.response = null; |
| this._onsuccess = null; |
| this._onerror = null; |
| } |
| </pre> |
| </div></div> |
| |
| <p>There are two important properties defined here: <strong>url</strong> and <strong>synchronous</strong>. </p> |
| |
| <h2 id="JavaScriptClientCode-URL">URL</h2> |
| |
| <p>You are responsible for setting the url property with the URL of the web service. The generated JavaScript does not include any concept of services and ports. You simply put the appropriate URL into the property. <strong>Note:</strong> CXF's JavaScript clients don't support cross-scripting. If you want to cross-script, you have some choices:</p> |
| <ul><li>Stick with Mozilla/Firefox and sign the code.</li><li>Modify the utils to use some of the common workarounds that permit cross-scripting in some browsers in some circumstances.</li></ul> |
| |
| |
| <h2 id="JavaScriptClientCode-SynchronousandAsynchronousprocessing">Synchronous and Asynchronous processing</h2> |
| |
| <p>The CXF JavaScript code generator is designed to facilitate typical, AJAX, asynchronous processing. As described below, the per-operation functions take callbacks as parameters, and call them back when the server responds. If you want to use synchronous communications, you can set the 'synchronous' property to 'true'. That does not change the API, but rather changes the behavior. With this setting, the operation functions do not return until after the server has responded and the callbacks have been called back.</p> |
| |
| <h2 id="JavaScriptClientCode-Per-OperationFunctions">Per-Operation Functions</h2> |
| |
| <p>The code generator generates a function for each operation. Unless the operation is <strong>one way</strong>, the function will take two callback parameters, plus the parameters for the operation itself. The first two parameters are the success callback and the error callback. OneWay operations have no callbacks; they are "fire and forget."</p> |
| |
| <p>The success callback is called back with one parameter: the JavaScript object corresponding to the response.</p> |
| |
| <p>What is that object? Well, that depends on the schema of the operation. If you are using Document/Literal/Wrapped, it will be a JavaScript object corresponding to the wrapper object for the output part. If you are using Document/Literal/Bare, it will correspond to the output part. If the output part has a simple type, such as String, the response callback will be called with a simple JavaScript object.</p> |
| |
| <p>The error callback will be called only when the server responds with an HTTP error status. It will be called with two parameters: the HTTP status number and the HTTP status text.</p> |
| |
| <p>When/if the client JavaScript generator is improved to have more comprehensive support for faults, the protocol will change to pass <br clear="none"> |
| fault information as a third parameter to the error callback.</p> |
| |
| <h2 id="JavaScriptClientCode-UnderstandingtheParametersofOperationFunctions">Understanding the Parameters of Operation Functions</h2> |
| |
| <p>If you have a choice in the matter, and you are using Document/Literal, the present author recommends <strong>bare</strong> as opposed to <strong>wrapped</strong> methods. This pushes all the type management from the front end (JAX-WS or Simple) to the data binding (JAXB or Aegis). The data bindings offer much clearer configuration control over namespaces, minOccurs, and such than the frontends.</p> |
| |
| <p>In general, you will probably feel the need to read the JavaScript code to understand the binding in complex cases. One possible future enhancement of the generator is to generate more comments, or perhaps even an HTML explanation, to assist in this process.</p> |
| |
| <h2 id="JavaScriptClientCode-ExamplesofCallingServices">Examples of Calling Services</h2> |
| |
| <p>Here are some snippets of calls to services. You should expect to inspect the generated JavaScript to learn the names of classes and functions.</p> |
| |
| <h3 id="JavaScriptClientCode-ADocument/Literal/BareService">A Document/Literal/Bare Service</h3> |
| |
| <p>The present author finds that, at least for JAX-WS, BARE has a lot to recommend it, as it avoids surprising interactions between JAX-WS and JAXB. </p> |
| |
| <div class="code panel pdl" style="border-width: 1px;"><div class="codeContent panelContent pdl"> |
| <pre class="brush: java; gutter: false; theme: Default"> |
| |
| function errorCallback(httpStatus, httpStatusText) |
| { |
| globalErrorStatus = httpStatus; // integer HTTP status |
| globalStatusText = httpStatusText; // Textual HTTP status |
| } |
| |
| function successCallback(responseObject) |
| { |
| // the parameter is an object of the type declared for the |
| // method. |
| globalResponseObject = responseObject; |
| } |
| |
| function compliantTest(url) |
| { |
| var intf; |
| // class for the service. |
| intf = new org_apache_cxf_javascript_fortest_SimpleDocLitBare(); |
| intf.url = url; |
| var bareParam = new my_param_class_object(); |
| bareParam.setWhatever(someValue); |
| // ... |
| intf.compliant(successCallback, errorCallback, bareParam); |
| } |
| |
| </pre> |
| </div></div> |
| |
| <h3 id="JavaScriptClientCode-xs:anyExample:UsingaDescribedType">xs:any Example: Using a Described Type</h3> |
| |
| <p>The following function calls a Document/Literal/Bare method. The bare parameter element is declared as:</p> |
| |
| <div class="code panel pdl" style="border-width: 1px;"><div class="codeContent panelContent pdl"> |
| <pre class="brush: java; gutter: false; theme: Default"> |
| <element name="acceptAny1"> |
| <complexType> |
| <sequence> |
| <element name='before' type='string' /> |
| <any minOccurs='1' maxOccurs='1' namespace='##other' /> |
| <element name='after' type='string' /> |
| </sequence> |
| </complexType> |
| </element> |
| </pre> |
| </div></div> |
| |
| <p>The target namespace for this schema is <strong>uri:cxf.apache.org:jstest:types:any</strong>.</p> |
| |
| <p>This particular xs:any allows any single XML element from some namespace other than the target namespace of the schema containing 'acceptAny1'.<br clear="none"> |
| (Note that JAXB only supports xs:any for ##other, and interprets it to forbid unqualified elements. If you need more flexibility, consider<br clear="none"> |
| another data binding.)</p> |
| |
| <p>The WSDL contains a reference to another schema, with target namespace <strong>uri:cxf.apache.org:jstest:types:any:alts</strong>. That namespace includes<br clear="none"> |
| an element named <strong>alternative1</strong>. In the function below, the JavaScript creates an object for the service, and then an object for the acceptAny1 element.</p> |
| |
| <p>It fills in the slots for the simple <strong>before</strong> and <strong>after</strong> elements. </p> |
| |
| <p>For the xs:any element, it creates an object of type <strong>org_apache_cxf_any_holder</strong>. This type, defined in cxf-utils.js, holds an object for an element<br clear="none"> |
| defined in the WSDL's schemas. To construct one, you supply the URI and local names of the element, and then the value. For built-in types, use the XML Schema URI<br clear="none"> |
| (<a shape="rect" class="external-link" href="http://www.w3.org/2001/XMLSchema" rel="nofollow">http://www.w3.org/2001/XMLSchema</a>) and the name of the type (e.g. 'string').</p> |
| |
| |
| <div class="code panel pdl" style="border-width: 1px;"><div class="codeContent panelContent pdl"> |
| <pre class="brush: java; gutter: false; theme: Default"> |
| function testAny1ToServerChalk(url) |
| { |
| var service = new cxf_apache_org_jstest_any_AcceptAny(); |
| service.url = url; |
| var param = new cxf_apache_org_jstest_types_any_acceptAny1(); |
| param.setBefore("before chalk"); |
| var anyOb = new cxf_apache_org_jstest_types_any_alts_alternative1(); |
| anyOb.setChalk("bismuth"); |
| var holder = new org_apache_cxf_any_holder("uri:cxf.apache.org:jstest:types:any:alts", "alternative1", anyOb); |
| param.setAny(holder); |
| param.setAfter("after chalk"); |
| service.acceptAny1(param); |
| } |
| </pre> |
| </div></div> |
| |
| <p>What if your xs:any calls for more than one item? You supply an array of holders, since each holder could be some different element.</p> |
| |
| <h3 id="JavaScriptClientCode-xs:anyUsingRawXML">xs:any Using Raw XML</h3> |
| |
| <p>CXF also allows you to provide the XML yourself. The XML you provide must be valid. If the elements are qualified, you must<br clear="none"> |
| define the namespace definitions with appropriate xmlns attributes. Here is an example. Note in this example that the <br clear="none"> |
| element is qualified; it lives in the <strong>uri:iam</strong> namespace. JAXB does not permit unqualified elements (at least in the current version<br clear="none"> |
| of the reference implementation that CXF uses).</p> |
| |
| <p>If your xs:any accepts multiple elements, you supply a single holder with a XML fragment containing multiple elements.</p> |
| |
| <p>Note the use of <strong>org_apache_cxf_raw_any_holder</strong> to pass the XML to CXF.</p> |
| |
| <p>Also note that CXF does not support raw XML passed from the server to the client. In a return value, you will always find a <br clear="none"> |
| org_apache_cxf_any_holder. However, the raw holder has a 'raw' property with value 'true', and the non-raw holder has a 'raw' property with value<br clear="none"> |
| 'false'. CXF may be enhanced to support passing non-described elements to JavaScript at a later time. </p> |
| |
| <div class="code panel pdl" style="border-width: 1px;"><div class="codeContent panelContent pdl"> |
| <pre class="brush: java; gutter: false; theme: Default"> |
| function testAny1ToServerRaw(url) |
| { |
| var service = new cxf_apache_org_jstest_any_AcceptAny(); |
| service.url = url; |
| var param = new cxf_apache_org_jstest_types_any_acceptAny1(); |
| param.setBefore("before chalk"); |
| var holder = new org_apache_cxf_raw_any_holder("<walrus xmlns='uri:iam'>tusks</walrus>"); |
| param.setAny(holder); |
| param.setAfter("after chalk"); |
| service.acceptAny1(param); |
| } |
| </pre> |
| </div></div></div> |
| </div> |
| <!-- Content --> |
| </td> |
| </tr> |
| </table> |
| </td> |
| <td id="cell-2-2" colspan="2"> </td> |
| </tr> |
| <tr> |
| <td id="cell-3-0"> </td> |
| <td id="cell-3-1"> </td> |
| <td id="cell-3-2"> |
| <div id="footer"> |
| <!-- Footer --> |
| <div id="site-footer"> |
| <a href="http://cxf.apache.org/privacy-policy.html">Privacy Policy</a> - |
| (<a href="https://cwiki.apache.org/confluence/pages/editpage.action?pageId=72736">edit page</a>) |
| (<a href="https://cwiki.apache.org/confluence/pages/viewpage.action?pageId=72736&showComments=true&showCommentArea=true#addcomment">add comment</a>)<br> |
| Apache CXF, CXF, Apache, the Apache feather logo are trademarks of The Apache Software Foundation.<br> |
| All other marks mentioned may be trademarks or registered trademarks of their respective owners. |
| </div> |
| <!-- Footer --> |
| </div> |
| </td> |
| <td id="cell-3-3"> </td> |
| <td id="cell-3-4"> </td> |
| </tr> |
| <tr> |
| <td id="cell-4-0" colspan="2"> </td> |
| <td id="cell-4-1"> </td> |
| <td id="cell-4-2" colspan="2"> </td> |
| </tr> |
| </table> |
| |
| <script type="text/javascript"> |
| var gaJsHost = (("https:" == document.location.protocol) ? "https://ssl." : "http://www."); |
| document.write(unescape("%3Cscript src='" + gaJsHost + "google-analytics.com/ga.js' type='text/javascript'%3E%3C/script%3E")); |
| </script> |
| <script type="text/javascript"> |
| try { |
| var pageTracker = _gat._getTracker("UA-4458903-1"); |
| pageTracker._trackPageview(); |
| } catch(err) {}</script> |
| |
| </body> |
| </html> |
| |
