Nano Ajax Library

Setup

Simply include the .js file in the web page:
<script src="nano.js"></script>

Functions

gid(id)
Shorthand for document.getElementById(id);
example:
<div id="example1_container">click the button to change text</div>
<button onclick="gid('example1_container').innerHTML='Hello';">
  Change Text
</button>
sample:
click the button to change text
hb()
internally used to generate a timestamp (heartbeat) to prevent unwanted caching
ajxb(url, post_data)
Makes a synchronous (blocking) XMLHttpRequest (XHR) call and returns the server response

example:
<div id="example2_container">click the button to change text</div>
<button onclick="alert(ajxb('docs/servertime.php?delay=5'));">
  Server Time
</button>
sample:
click the button to get server time
Note a delay is added to the server response to highlight the asynchronocy behavior.
ajxnb(xhr_object, url, callback_function, post_data)
Mostly used by ajxpgn to send and handle asynchronous XHR calls
example:
<div id="example3_container">click the button to get server time</div>
<button onclick="example3_click();">Server Time</button>
<script>
function example3_click(){
  gid('example3_container').innerHTML='loading...';
var xhr_object=xmlHTTPRequestObject();
ajxnb(xhr_object,'docs/servertime.php?delay=2',example3_callback(xhr_object));
}

function example3_callback(xhr_object){return function(){
if (xhr_object.readyState==4)
gid('example3_container').innerHTML=xhr_object.responseText;
}}
</script>
sample:
click the button to get server time
ajxpgn(container_id, url, optional force_display, optional evaluate_scripts, post_data, callback_function)
One of the most used functions in nano.js
It loads the response of an XHR server response to a specified container
When force_display is set to true (false by default), even a hidden container becomes visible
Evaluate_scripts is set to false by default

ajxpgn displays the response to the most recent request (in-order delivery) by discarding in-flight XHR requests

example:
<div id="example4_container">click the button to get server time</div>
<button
onclick="ajxpgn('example4_container','docs/servertime.php?delay=2')">
 Server Time
</button>
sample:
click the button to get server time
ajxjs(function_identifier,javascript_filename)
Loads javascript functions on-demand

The following snippet will load a sayhi.js only once when clicking on the Load button.
Then you can type in javascript:sayhi();void(0); in the browser address to verify that it is dynamically loaded.
<button onclick="ajxjs(self.sayhi,'docs/sayhi.js')">Load</button>

Note the JavaScript function has to be functional variables:
sayhi=function(){...} //works
function sayhi(){...} //doesn't work
ajxcss(singleton_identifier,css_filename)
Dynamically loads and applies CSS file

Clicking on the Load button will change the look of all the buttons on this page:
<button onclick="ajxcss(self.cssloader,'docs/button.css')">Load</button>

xajx(url)
Makes a cross-domain request without refreshing the current page

Note this experimental function does not XHR. It sends data to the server-side script using the url string, and executes the returned JavaScript code asynchronously.
xmlHTTPRequestObject()
Returns an XHR object. See ajxnb for sample use.

Windows 8 Metro App

Although the Windows 8 Metro App is a different run-time environment from a standard web browser, nano.js can still be used after the following patch:

Locate the following line in the ajxpgn function:
ct.innerHTML=rq.responseText;
Then wrap around the code with the following lines:
MSApp.execUnsafeLocalFunction(function() {
    ct.innerHTML=rq.responseText;
})
If you manually alter the innerHTML content, for example when using ajxb, use the above treatment to allow script injection.

Our Services

Targeted Crawlers

Crawlers for content extraction, restoration and competitive intelligence gathering.

Learn More

Gyroscope™ ERP Solutions

Fully integrated enterprise solutions for rapid and steady growth.

Learn More

E-Commerce

Self-updating websites with product catalog and payment processing.

Learn More

Featured Download

Nano AJAX Library v2.3

Tiny JavaScript library that brings you most of the AJAX functionality

Download    Documentation