You are viewing a plain text version of this content. The canonical link for it is here.
Posted to commits@thrift.apache.org by bu...@apache.org on 2014/07/01 12:15:30 UTC

svn commit: r914572 - in /websites/staging/thrift/trunk/content: ./ tutorial/js.html

Author: buildbot
Date: Tue Jul  1 10:15:30 2014
New Revision: 914572

Log:
Staging update by buildbot for thrift

Modified:
    websites/staging/thrift/trunk/content/   (props changed)
    websites/staging/thrift/trunk/content/tutorial/js.html

Propchange: websites/staging/thrift/trunk/content/
------------------------------------------------------------------------------
--- cms:source-revision (original)
+++ cms:source-revision Tue Jul  1 10:15:30 2014
@@ -1 +1 @@
-1607025
+1607030

Modified: websites/staging/thrift/trunk/content/tutorial/js.html
==============================================================================
--- websites/staging/thrift/trunk/content/tutorial/js.html (original)
+++ websites/staging/thrift/trunk/content/tutorial/js.html Tue Jul  1 10:15:30 2014
@@ -92,7 +92,7 @@
 </ol>
 <h3 id="prerequisites">Prerequisites</h3>
 <ul>
-<li>This tutorial depends on an existing Thrift server. See either the <a href="/tutorial/java">Java tutorial</a> or <a href="/tutorial/cpp">C++ tutorial</a> for how to build and setup one of these servers.</li>
+<li>This tutorial depends on an existing Thrift server. See either the <a href="/tutorial/java">Java tutorial</a> or <a href="/tutorial/nodejs">node.js tutorial</a> for how to build and setup one of these servers.</li>
 </ul>
 <h3 id="client">Client</h3>
 <pre><code class="language-js">
@@ -187,12 +187,33 @@ function calc() {
 <p>Unfortunately, the Javascript object isn't just called Calculator and there are a lot of other functions defined as well, but how those are used are out of the scope of this tutorial.  </p>
 <h3 id="inspecting-the-thriftjs-file">Inspecting the Thrift.js file</h3>
 <ul>
-<li>The Thrift.js library currently uses jQuery.js in it's usage.</li>
 <li>The main goal of the library is to define the Transport and Protocol layers.</li>
-<li>The Transport layer only uses AJAX as of right now.  </li>
-<li>The Protocol layer handles the encoding/decoding to JSON format.</li>
+<li>The Transport layer can use AJAX or WebSockets.  </li>
+<li>The Protocol layer handles the encoding/decoding to JSON or Binary format.</li>
 <li>There are also the Thrift object types and call functions defined here as well.</li>
+<li>The Thrift.js library can use jQuery.js if provided.</li>
 </ul>
+<h4 id="jquery-api">jQuery API</h4>
+<p>jQuery aware JS source files can generated using the <em>jq</em> compiler option:</p>
+<div class="codehilite"><pre><span class="n">thrift</span> <span class="o">--</span><span class="n">gen</span> <span class="n">js</span><span class="p">:</span><span class="n">jq</span> <span class="n">tutorial</span><span class="p">.</span><span class="n">thrift</span>
+</pre></div>
+
+
+<p>This does not change the default behavior of the library, i.e. service calls will be done synchronously. However, services will start using jQuery.ajax when a callback function is provided as showed below.</p>
+<div class="codehilite"><pre><span class="n">client</span><span class="p">.</span><span class="n">calculate</span><span class="p">(</span>1<span class="p">,</span> <span class="n">work</span><span class="p">,</span> <span class="k">function</span><span class="p">(</span><span class="n">result</span><span class="p">)</span> <span class="p">{</span> <span class="n">alert</span><span class="p">(</span><span class="n">result</span><span class="p">);</span> <span class="p">});</span>
+</pre></div>
+
+
+<p>This method call will return immediately but the callback function (and its <em>alert</em>) will be called as soon as a response is received from the server. The service call also returns a jqXHR object, which has more callback options:</p>
+<div class="codehilite"><pre><span class="n">client</span><span class="p">.</span><span class="n">calculate</span><span class="p">(</span>1<span class="p">,</span> <span class="n">work</span><span class="p">,</span> <span class="k">function</span><span class="p">(){}</span> <span class="p">)</span>
+<span class="p">.</span><span class="n">fail</span><span class="p">(</span> <span class="k">function</span><span class="p">(</span><span class="n">jqXHR</span><span class="p">,</span> <span class="n">status</span><span class="p">,</span> <span class="n">error</span><span class="p">)</span> <span class="p">{</span>  <span class="n">alert</span><span class="p">(</span><span class="n">error</span><span class="p">.</span><span class="n">message</span><span class="p">);</span> <span class="p">}</span> <span class="p">)</span>
+<span class="p">.</span><span class="n">done</span><span class="p">(</span> <span class="k">function</span><span class="p">(</span><span class="n">result</span><span class="p">)</span> <span class="p">{</span> <span class="o">/*</span> <span class="n">success</span>! <span class="n">do</span> <span class="n">something</span> <span class="o">*/</span> <span class="p">}</span> <span class="p">)</span>
+<span class="p">.</span><span class="n">always</span><span class="p">(</span> <span class="k">function</span><span class="p">()</span> <span class="p">{</span> <span class="o">/*</span> <span class="n">do</span> <span class="n">something</span> <span class="n">more</span> <span class="o">*/</span> <span class="p">}</span> <span class="p">);</span>
+</pre></div>
+
+
+<p>For more information refer to: http://api.jquery.com/jquery.ajax/
+Note: Synchronously calls are easy to debug and good for testing but should not be used on a front-end browser, as it will normally result on the a whole browser freeze until the response is back.</p>
 	</div>
 	<div class="container">
 	<hr>