Introduction

You've stumbled upon SimpleJax, the easy, low calorie JHR interfacing library!

This library is written to be of no great difficulty for anyone to implement JHR technology into their web based projects. There is no requirement to edit anything in the downloaded file, everything is set and configured through use of the instantiated SimpleJax object, enough of the techno-babble, time for some basic examples!

For more advanced examples, refer to the documentation.

Simple page retrieval:


         <html>

         <head>

         <script type="text/javascript" src="simplejax.js"></script>

         <script type="text/javascript">

         function myCallBack(response)

         {

            alert(response);

         }

         

         simplejax = new simplejax('hello.txt', myCallBack);Instantiates the simplejax object, first argument is the file to retrieve, second argument is the 'call-back', this is the function called on when the request is successful.

         </script>

         </head>

         <body>

         <input type="button" value="Click me!" onclick="simplejax.invoke()Triggers the request. />

         </body>

         </html>

First we create our 'call-back' this is the function called when the request is successful. In this example, when it's successful, a small 'alert' box will appear with the text inside the file 'hello.txt' being displayed..

Download this example |

View this example

Dynamic text div:


         <html>

         <head>

         <script type="text/javascript" src="simplejax.js"></script>

         <script type="text/javascript">

         function myCallBack(response)

         {

            document.getElementById('content').innerHTML = response;

         }

         

         simplejax = new simplejax('hello.txt', myCallBack);Instantiates the simplejax object, first argument is the file to retrieve, second argument is the 'call-back', this is the function called on when the request is successful.

         </script>

         </head>

         <body>

         <div id="content"></div>

         <input type="button" value="Click me!" onclick="simplejax.invoke()Triggers the request." />

         </body>

         </html>

In this example, the only thing that has changed in the javascript, is the call-back function; here instead of simply alerting the data contained in the file, we shall have it display on the page in a div container.

InnerHTML is a property for valid block and inline elements, in this scenario it's a div. When the JHR request has retrived the data from the file, the call-back is triggered and the data retrieved from the file is passed to the call-back and then the 'content' div is set to the read data.

In the HTML, a new div container has been added, this is named 'content'.

Download this example |

View this example

Using the simplejax object to retrieve more than one url:


         <html>

         <head>

         <script type="text/javascript" src="simplejax.js"></script>

         <script type="text/javascript">

         function setUrl(url)

         {

            simplejax.simplejax.set('URL', url);Set the 'URL' property of the simplejax object to that of the parameter of the function 'function setUrl(url)'.

            simplejax.invoke()Triggers the request.

         }

         
         function myCallBack(response)

         {

            document.getElementById('content').innerHTML = response;

         }

         

         simplejax = new simplejax('hello.txt', myCallBack);Instantiates the simplejax object, first argument is the file to retrieve, second argument is the 'call-back', this is the function called on when the request is successful.

         </script>

         </head>

         <body>

         <div id="content"></div>

         <a href="javascript:void(0);" onclick="setUrl('recipe1.html');Set the simplejax object url to retrieve 'recipe1.html';">Recipe 1</a>

         <a href="javascript:void(0);" onclick="setUrl('recipe2.html');Set the simplejax object url to retrieve 'recipe2.html';">Recipe 2</a>

         </body>

         </html>

Download this example |

View this example

Using the simplejax object and providing an optional parameter:


         <html>

         <script type="text/javascript" src="simplejax.js"></script>

         <script type="text/javascript">

         function callback(response, layer)

         {

            document.getElementById(layer).innerHTML = response;

         }

         

         simplejax = new simplejax('', callback);

         

         function setURL(layer)

         {

            var d = new Date();

            // For the example this avoids IE's caching

            simplejax.set('URL', 'hello.txt?' + d.getTime());

            simplejax.invoke(layer);

         }

         </script>

         </head>

         <body>

         <div id="firstLayer"><a href="javascript:void(0);" onclick="setURL(this.parentNode.id)">Click</a></div>

         <div id="secondLayer"><a href="javascript:void(0);" onclick="setURL(this.parentNode.id)">Click</a></div>

         <div id="thirdLayer"><a href="javascript:void(0);" onclick="setURL(this.parentNode.id)">Click</a></div>

         </body>

         </html>

By providing an extra parameter in your callback function you can take advantage of simplejax's optional arguments, there is no limit to how many you can provide.

Download this example |

View this example