Using the Majax Framework

What does Majax stand for? It stands for “Minimalistic Ajax,” and this package comes pretty close to implementing just that-an easy way of using Ajax. There are two primary Ajax-enabled functions here: majax_get, which uses the GET method to download Ajax content, and majax_post, which uses the POST method.

On the Web

You can get Majax for free at http://sourceforge.net/projects/unips/. Click the green Download unips-Universal Portal Scripting button-and download the unips package, which unzips to give you majax.js.

How about an example putting Majax to work? For example, say you wanted to download this text from the file majax.txt on the server:

 This text was downloaded with Majax.

You might put together a Web page called testMajax.html to use the Majax framework to download this text. You start testMajax.html by including majax.js like this:

 <html>   <head>     <title>Testing the Majax framework</title>     <script type="text/javascript" src="/books/1/252/1/html/2/majax.js"></script>          .          .          .

Doing so gives you access to the majax_get and majax_post functions. To get the action started, add a button with the caption Display the text to the Web page:

 <H1>Testing the Majax framework</H1> <form>   <input type = "button" value = "Display the text"     .     .     . </form>

And you can connect this new button to a function named, for example, useMajax, to put Majax to work downloading the text when the user clicks the button:

 <H1>Testing the Majax framework</H1> <form>   <input type = "button" value = "Display the text"     onclick = "useMajax()"> </form>

You’ll also need a <div> element in which to display the results:

 <H1>Testing the Majax framework</H1> <form>   <input type = "button" value = "Display the text"     onclick = "useMajax()"> </form> <div >   <p>The fetched data will go here.</p> </div>

Next, add the useMajax function to a <script> element in the page:

 <html>   <head>     <title>Testing the Majax framework</title>     <script type="text/javascript" src="/books/1/252/1/html/2/majax.js"></script>     <script language = "javascript">       function useMajax()       {         .         .         .       }

Getting text from the server is easy: simply use a function such as majax_get. Start by declaring a variable containing the URL you want to access:

 <html>   <head>     <title>Testing the Majax framework</title>     <script type="text/javascript" src="/books/1/252/1/html/2/majax.js"></script>     <script language = "javascript">       function useMajax()       {         var url = "majax.txt";          .          .          .       }

then call majax_get with the URL and the data to send to the server, which is null when you use the GET method:

 <html>   <head>     <title>Testing the Majax framework</title>     <script type="text/javascript" src="/books/1/252/1/html/2/majax.js"></script>     <script language = "javascript">       function useMajax()       {       var url = "majax.txt";       majax_get (url, null);     }       .       .       .

Similarly, if you wanted to post data to the server, you could use majax_post(url, data).

How do you read data downloaded from the server? As with most client-side Ajax frameworks, you use a callback function. In this case, you might name the callback function “handler”:

 <script language = "javascript">   function useMajax()   {     var url = "majax.txt";     majax_get (url, null);   }   function handler()   {     .     .     .   } </script>

 <script language = "javascript">   function useMajax()   {     var url = "majax.txt";     majax_get (url, null);   }   function handler()   {     .     .     .   }   MAJAXCM_COMPLETE.register(handler); </script>

The downloaded data is stored in a variable named MAJAX_RESPONSE, and when the handler function is called, that data is ready to be used. This example simply displays the downloaded text, and you can do that like this in the handler function:

 <script language = "javascript">   function useMajax()   {     var url = "majax.txt";     majax_get (url, null);   }   function handler()   {     var div = document.getElementById ("targetDiv");     div.innerHTML = MAJAX_RESPONSE;   }   MAJAXCM_COMPLETE.register(handler); </script>

That completes testMajax.html, which you can see at work in Figure 6.1.

image from book
Figure 6.1: Using the Majax Ajax framework

When the user clicks the button, the text in majax.txt is downloaded and displayed, as you can see in Figure 6.2.

image from book
Figure 6.2: Downloading text with the Majax Ajax framework

Majax is just one of the JavaScript client-side frameworks available. Another popular framework is the Sack framework, which is discussed next.