Zimki Documentation - CookBook.WebService.Client

Let's create a client that can talk to the web service we just created. In the same realm as the web service, create a template called quotes, with the following content:

<html>  
<head>   
  <title>My AJAX quote service</title>

  <!-- import the zimki client-side library -->
  <script language="JavaScript" src="http://service.zimki.com/u/js/zimki.js"></script>
  <script type="text/JavaScript">

  zimki = new zimkiClient('${zimki.apikey}');

  function GetQuote() {
    zimki.call('myQuotes', {}, UpdateQuotes);
  }

  function UpdateQuotes(data) {
    var table = '<table><tr><th>Item</th><th>Quantity</th><th>Price</th></tr>';
    for (var i = 0; i < data.stock.length; i++) {
      var p = data.stock[i];
      table += "<tr>";
      table += "<td>" + p.name + "</td>";
      table += "<td>" + p.quantity + "</td>";
      table += "<td>" + p.price + "</td>";
      table += "</tr>";
    }
    table += "</table>";

    document.getElementById('QuoteArea').innerHTML = table;
  }
  </script>
</head>

<body>
  <p>The time is: ${time}</p> 
  <form>
    <input type="button" value="Get quote info" onClick="GetQuote()"/>
  </form>
  <div id="QuoteArea" />
</body>
</html>

Next, add a new JavaScript instance with the following content:

zimki.library.require('trimpath.js');
zimki.publishPath('/', function() {
  var data = { time: new Date() };
  return zimki.render.trimpath('quotes', data);
});

(Alternately you can add it to the instance that defines the service.)

Now visit the root of your realm. You should get a very simple page, containing a timestamp and a button with the text "Get quote info". Click this button and a table should appear with data returned from the service you have published. Notice that the timestamp on the page is not changing, which means the page is not reloaded; you're making an AJAX call to get the quote information.

See also

Parent