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:

url [string] (path to the file)
method [string] (request method, for example, get or post)
async [boolean] (set to true to make request asyncronous)
params [object] (object of arguments to send, for example, {foo: bar} would be sent as "url?foo=bar")
user [string] (username for authentification)
password [string] (password for authentification)
headers [object] (object of headers to send, for example, {'my-header': 'hello'} would send "my-header: hello;")
data [object] (object to pass to the response object for use within the callback function)

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:

request [object] (an Ajax request object)
callback [function] (callback function)
evt [object] (object of events, for example, error or message)

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:

url [string] (path to the file)
params [object] (object of arguments to send, for example, {foo: bar} would be sent as "url?foo=bar")
callback [function] (callback function)
evt [object] (object of events, for example, onload, onprogress and onerror)
headers [object] (object of headers to send, for example, {'my-header': 'hello'} would send "my-header: hello;")
data [object] (object to pass to the response object for use within the callback function)

  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:

url [string] (path to the file)
params [object] (object of arguments to send, for example, {foo: bar} would be sent as "url?foo=bar")
callback [function] (callback function)
evt [object] (object of events, for example, onload, onprogress and onerror)
headers [object] (object of headers to send, for example, {'my-header': 'hello'} would send "my-header: hello;")
data [object] (object to pass to the response object for use within the callback function)

  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.

url [string] (path to the file)
method [string] (request method, for example, get or post)
params [object] (object of arguments to send, for example, {foo: bar} would be sent as "url?foo=bar")
headers [object] (object of headers to send, for example, {'my-header': 'hello'} would send "my-header: hello;")

  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.

url [string] (path to the file)
method [string] (request method, for example, get or post)
params [object] (object of additional arguments to send, for example, {foo: bar} would be sent as "url?foo=bar")
headers [object] (object of headers to send, for example, {'my-header': 'hello'} would send "my-header: hello;")

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

Code	Message	Line	File
2	session_start(): open(/var/cpanel/php/sessions/ea-php82/sess_16aba97c32614712b5dbdd99daf0a1cd, O_RDWR) failed: No such file or directory (2)	67	/home2/njsorg/public_html/pagetype/cms.php
2	session_start(): Failed to read session data: files (path: /var/cpanel/php/sessions/ea-php82)	67	/home2/njsorg/public_html/pagetype/cms.php
8192	Creation of dynamic property PageTypeCMS::$html is deprecated	43	/home2/njsorg/public_html/pagetype/plugins/html/pagetype.plugin.php

nano(JavaScript).framework;