index.html

ajax 框价．是个好工具．javascript 矿家．可以用在任何平台．

shown below.</p>
<p style="text-align: center"><img src="images/sample_scr.png" alt="Screenshot of test client"></p>
<p>At the top of the test client's UI is the <strong>information area</strong>. The information area displays general information
on the accessed web service and the sample client. This includes a link to the web service stub source code
file, the sample application source code file, and the WSDL file on which the stub is based.
</p>
<p>
Under the information area, to the left, resides the <strong>services list</strong>. The services list includes all services
supported by the stub (these may consist of all the services of the WSDL file, or only those services specified by the
<code><strong>--service=</strong></code><strong>[servicename]</strong> or <code><strong>-s</strong></code><strong>[servicename]</strong> as described in
section <a href="#2.4.1">2.4.1</a>). Each service's name is displayed in the form
<code>[</code><strong>[namespace-uri]</strong><code>]</code><strong>[service-name]</strong> where <strong>[namespace-uri]</strong> is the URI of the
namespace within which the service is defined and <strong>[service-name]</strong> is the name of the service.
By selecting a service from the services list, you can choose which service you want to interact with. You can
switch between services at any stage.
</p>
<p>
Selecting a service from the services list causes all of the service's ports to be displayed in the <strong>service port
tabs</strong>; each port is represented by a single page in the tabs list. In this page, there are <strong>operation invokers</strong>
for each of the operations in the port. An operation invoker consists of a title stating the operation it's bound to,
an edit-box for each parameter the operation accepts, and buttons to invoke the operation; depending on the web service
stub, the invocation buttons may include a button for synchronous invocation (Labeled <strong>Invoke sync</strong>), and a
button for asynchronous invocation (Labeled <strong>Invoke async</strong>).
</p>
<p>
To invoke an operation, you start by inputting parameters for the invocation in the edit boxes of the operation's invoker.
Parameters are input as JavaScript expressions; initially, the expected type of each parameter is shown in its
corresponding edit-box, in schema datatype terms. The expressions input for the different parameters must muatch these
data types.</p>
<p>
Once expressions for the parameters have been input in the operation invoker edit-boxes, the operation can be invoked by
clicking on one of the invocation buttons of the operation invoker. Whether the operation is invoked synchronously or
asynchronously, the operation's result is displayed once it's available in a pop-up message box. The pop-up message box
lists all properties of the result if it's an object, or simply displays its value if it's a simple scalar.
</p>
<div class="SampleTrail">
<p>We'll use the sample test application generated in the previous step to test the Bindows&trade; Center stub.
To do so, load the file <code>BCServiceTester.html</code> in a web browser, and try the following:
</p>
<ol>
<li>
Try invoking the <code>GetLatestVersionId</code> operation synchronously. Input the literal <code>"bindows"</code>
in the <code>aProduct</code> edit-box and click the <strong>Invoke sync</strong> button. A string identifying the latest version of
Bindows&trade; will be returned.
</li>
<li>
Try out the <code>GetNews</code> operation, asynchronously. Input the array literal <code>["release", "kb"]</code>
in the <code>aCategories</code> edit-box and click the <strong>Invoke async</strong> button. After a short delay, you will receive
an XML file encoding a news feed.
</li>
<li>
Try out the <code>GetProductDownloadUrl</code> operation. Input the literal <code>"bindows"</code> into the
<code>aProduct</code> edit-box, and the literal <code>"1.10"</code> in the <code>aVersion</code> edit-box, and click
the <strong>Invoke sync</strong> button. A URL for downloading version 1.10 of Bindows&trade; will be returned.
</li>
</ol>
</div>
<h3><a name="2.6"></a>2.6 Writing an Application Using the Web Service Stub</h3>
<p>
Once a stub has been generated, it can be used in an application to invoke web services. To do so, a reference to the stub
source file should be first included in the application's ADF. This is done by adding a
<code>&lt;script src="..."&gt;</code> element to the <code>&lt;resources&gt;</code> element of the ADF. The example below
shows how to add reference to file <code>SampleStub.js</code> generated in section <a href="#2.4.1">2.4.1</a> to an
ADF file located diretory <code>c:\appcode</code>:
</p>

<pre><code>&lt;?xml version="1.0"?>
&lt;application>
   ...
   &lt;resources>
	    &lt;script src="..\SampleStub.js"/>   &lt;!-- Relative path to stub file specified -->
	    ...
   &lt;/resources>
   ...
&lt;/application></code></pre>

<div class="SampleTrail">
<p>For our Bindows&trade; Center sample application, we add the service stub we've tested in the previous step to the
application skeleton's ADF file.
Add the line in bold to file <code>c:\bindows\samples\BindowsCenter\BindowsCenterApp.xml</code>:
</p>

<pre><code>&lt;?xml version="1.0"?&gt;
&lt;application&gt;
  &lt;window caption="Bindows Center"/&gt;
  &lt;resources&gt;
    <strong>&lt;script src="BCService.js"/&gt;</strong>
    &lt;script src="BindowsCenterApp.js"/&gt;
  &lt;/resources&gt;
&lt;/application&gt;</code></pre>

</div>

<p>
With the reference to the stub source file added to the ADF, stub classes can be used throughout the application to access
the web service. A complete reference of stub classes structure is given in section <a href="#3.2">3.2</a>.
The following paragraphs provide the principles of working with web service stubs.
</p>
<p>
In order to access a web service through a stub, you must first construct the stub for the service. The stub is an object
of a class named after the service (excluding the service namespace URI), which uses a delegate <code>BiWebService</code>
object to interact with the service. The stub object implements methods corresponding to web service operations; these
methods are called by the client application in order to invoke web service operations.<br>
The delegate <code>BiWebService</code> object is provided to the stub upon construction, along with a URL to a WSDL
describing the service (this will usually be the URL which originally used to generate the stub, but may also be any other
compatible WSDL).
</p>
<p>
Notice that the <code>BiWebService</code> object passed to the stub's constructor must be in <strong>complete</strong> state (that
is, the object's <code>readyState</code> property must be <code>"complete"</code>). You can ensure this condition is
met by attaching an <code>onreadystatechange</code> handler to the <code>BiWebService</code> object, and constructing the
stub after verifying the object state in the context of this event. The code for constructing the web service stub will
typically look like the following:
</p>

<pre><code>// Function to construct a BiWebService object and hook a handler for
// onreadystatechange.
MyApp.protoype.SetupWebServiceConnection = function ()
{
  this._ws = new BiWebService();
  var lThis = this;
  this._ws.onreadystatechange = function () { lThis.onWebServiceStateChanged(); };
}

// BiWebService's onreadystatechange event handler -- constructs stub connected to
// BiWebService object if it's in "completed" state.
MyApp.protoype.onWebServiceStateChanged = function ()
{
  if ( this._webService.readyState == "complete" )
  {
    this._sampleService = new Sample(this._ws, "http://www.samples.com/sample.wsdl");
  }
}</code></pre>

<div class="SampleTrail">
<p>We will now add the code to setup a service stub and connect it to the Bindows&trade; Center service using the
techniques discussed above.
First, we add code to construct a <code>BiWebService</code> object and connect its <code>onreadystatechange</code> event
to an event handler. Add the lines in bold to file <code>c:\bindows\samples\BindowsCenter\BindowsCenterApp.js</code>:
</p>

<pre><code>BindowsCenterApp.prototype.setupWebService = function()
{
  // Implement web service setup code here.
  <strong>
  this._webService = new BiWebService();
  var lThis = this;
  this._webService.onreadystatechange = function() { lThis.onWebServiceStateChanged(); }
  </strong>
}</code></pre>

<p>Next, we should add the <code>onreadystatechange</code> event handler itself. Our event handler will construct a
stub for the Bindows&trade; Center service, then enable the <strong>Get Data</strong> button in the UI to allow the user to retrieve
data from the Bindows&trade; Center. To do so, append the following lines to file
<code>c:\bindows\samples\BindowsCenter\BindowsCenterApp.js</code>:</p>

<pre><code>BindowsCenterApp.prototype.onWebServiceStateChanged = function()
{
  if(this._webService.readyState == "complete" )
  {
    this._bindowsCenter = new BindowsCenter(this._webService, "$BindowsCenterWsdl");
    this._getData.setEnabled(true);
  }
}</code></pre>

</div>
<p>
Given an instance of a service stub, you can call its methods to invoke web service operations. There are may be two types
of service invocation methods generated for the stub: asynchronous and synchronous. Which of these are generated is
governed by the Wsdl2BiWs <code><strong>-t</strong></code> parameter described in section <a href="#2.4.1">2.4.1</a>.
Methods of the service stubs are named according to their corresponding opertaion name, the operation's port name and the
method type. For instance, the synchronous invocation method for operation <code>FooOperation</code> of port
<code>BarPort</code> will be named <code>sync_BarPort_FooOperation</code>. The asynchronous invocation method for the
same operation will be named <code>async_BarPort_FooOperation</code>.
</p>
<p>
To invoke a service operation synchronously, simply call the <code>sync_</code> method with the appropriate parameters.
The method will return the result from the web service, or throw an exception if an error will occur during invocation.
This looks like the following:
</p>

<pre><code>MyApp.protoype.showFooValue = function ()
{
  var lRes;
  lRes = this._sampleService.sync_BarPort_FooOperation("Hello", "World!");
  alert('Result: ' + lRes);
}</code></pre>

<div class="SampleTrail">
<p>When the user clicks the <strong>Get Data</strong> button, we'd like our sample application to do a couple of things: first,
we'd like it to display the latest version of Bindows&trade; at the bottom of the window as a hyperlink which will
allow downloading this version. Second, we'd like the application to load and display Bindows&trade; Center news in its
main pane. We'll deal with the first task using synchronous calls (we're using synchronous calls here because, as you'll
see, the task requires <strong>two</strong> subsequent short calls to complete -- and the synchronous mode is much simpler to use
in this case). In order to implement the version update functionality, add the code in bold in the following listing:
</p>

<pre><code>BindowsCenterApp.prototype.onGetDataClick = function()
{
  // Implement behavior of GetData buton here.
  <strong>
  // Get the Bindows latest version and URL for download from the web service
  var lLatestVer = this._bindowsCenter.sync_BindowsCenterSoap_GetLatestVersionId("bindows");
  var lLatestVerUrl = this._bindowsCenter.sync_BindowsCenterSoap_GetProductDownloadUrl("bindows", lLatestVer);

  // Build link at bottom of screen
  var lLinkHtml = '&lt;p align="center"&gt;&lt;a href="' + lLatestVerUrl + '"&gt;Latest Bindows&amp;trade; Version is ' + lLatestVer + '.&lt;/a&gt;&lt;/p&gt;';
  this._versionLabel.setHtml(lLinkHtml);
  </strong>
}</code></pre>

</div>