Ajax Plugin

Back to plugins | Download plugin

The Ajax plugin adds a complete Ajax library to the nano JavaScript framework. The plugin includes a function to extract arguments from the query string of the URL, 2 constructors for building resquest and response objects, 2 simple functions for calling standard GET and POST requests, 2 methods to the API wrapper, and a new parameter to use when creating new DOM nodes.

Query String

If the page was loaded with a query string containing arguments, you may want to easily extract those arguments and their values. A basic URL with a query string would look similar to this: 

  http://www.domain.com/page.html?example=value

To get the value of the argument example all you need to do is call nano.ajax.query(). 

  var foo = nano.ajax.query('example');

Request Object

The nano.ajax.request() constructor lets you create a custom HTTP request using Ajax. The constructor accepts these arguments in the following order:

To create a request you'll need at least a URL. To create a basic GET request object we would use this: 

  var req = new nano.ajax.request('path/to/file.txt', 'get', true);

A more complex request might look like this: 

  var req = new nano.ajax.request(
      'path/to/file.txt',
      'post',
      true,
      {
          page: 'help',
          id: 5023
      },
      null,
      null,
      {
          'X-Request-Type': 'form',
          'X-Session-ID': 5023
      },
      {
          time: nano.time(),
          page: 'help'
      }
  );

Response Object

The nano.ajax.response() constructor lets you create a object for handling Ajax responses. The constructor accepts these arguments in the following order:

A common response may look like this: 

  var rsp = new nano.ajax.response(
      request,
      function() {
          if (this.response.header('X-My-Header')) {
              nano('result').set(this.response.text);
          }
      },
      {
          message: function(msg) {
              nano('messages').add({tag: 'li', css: 'message-' + (msg[1] || 0), text: msg[0]});
          },
          error: function(e) {
              alert('Error: ' + e.message);
          }
      }
  );

Within the callback function this references the main Ajax object. This object contains a reference to the original request object in this.request, and the response object, this.response.

The response object holds the server response in 2 formats, this.response.text for the plain text response, and this.response.xml which contains an XML response format. Additionally, if the HTTP response includes an X-JSON header, this.response.json will contain the serialized object in the header, or null if the value of the header cannot be converted to an object. Also, if the HTTP response includes an X-Messages header (www.xmessages.org) containing a serialized array of messages, the response will check for a message method specified in the evt object and, if it exists, will iterate over the messages array with that function.

The response object also has a method for retreiving server response headers, this.response.header(). This function returns the header as a string, or null if it does not exist.

Get Request

The nano.ajax.get() method lets you make a GET request without creating the request and response objects. The method accepts these arguments in the following order: 

  nano.ajax.get('my_data.txt', null, function() { nano('result').set(this.response.text); });

Post Request

The nano.ajax.post() method lets you make a POST request without creating the request and response objects. The method accepts these arguments in the following order: 

  nano.ajax.post('process.php', {data: 'foo'}, function() { nano('result').set(this.response.text); });

Load

The Ajax plugin adds the load method to the API wrapper which lets you load content from the server into an element. This lets you easily create placeholders on the page to receive content dynamically. The default method if not specified is GET. 

  nano('content').load('my_content.txt');

Send

The Ajax plugin also adds the send method which sends the content of an element to the server. With this you can have single inputs which send their value to the server to be verified or processed. The default method if not specified is POST. 

  nano('input').send('validate.php');