Started

Selectors

Utilities

Animation

AJAX

CSS

Event

Manipulation

Cookie

String

Attributes

Data

Storage

Miscellaneous

$ajax

Submit an asynchronous HTTP (Ajax) request.
$ajax( url, options )
  1. url [string]
    The target url will be submitted to. (Optional, also able to set it on options: url)
  2. options [object]
    The options of ajax request.
  3. options: url [string]
    The target url will be submitted to. It will be ignored if url is provided as first argument.
  4. options: data [object]
    The data will be sent to the target url.
  5. options: type [string]
    The method type of request "GET" or "POST". "POST" method is default.
  6. options: header [object]
    The customized header of request
  7. options: success(data) [function]
    The callback function will be called when the request is submited successfully. This function will get passed the return data from server and this data will be automatically covert into JSON data when possible.
  8. options: error(status) [function]
    The callback function will be called if the request fails.

Notes

This is most common function in modern web application. Qatrix ajax function will automatically format server callback data into JSON object, so it is recommend to output JSON data from server as possible.

Example

PHP code
<?php
if ($_POST["profile"]["city"] == 'New York' && $_POST["foo"] == "bar")
{
	$output = array(
		"John"  =>  array(
			"age"  =>  20,
			"phone"  =>  "39-2039-492",
			"email"  =>  "john@email.com"
		),
		"Tom"  =>  array(
			"age"  =>  20,
			"phone"  =>  "39-2039-492",
			"email"  =>  "john@email.com"
		)
	);

	echo json_encode($output);
}
?>
HTML code
<div id="box"></div>
<button onclick="start_ajax()">start ajax request</button>
CSS code
#box {
	font-size: 12px;
	padding: 10px;
}
JavaScript code
function start_ajax()
{
	$ajax("../ajax.example.php", {
		data: {
			profile: {
				"city": "New York"
			},
			foo: "bar"
		},
		success: function (data)
		{
			$html($("box"), "[Tom]<br />age: " + data["Tom"]["age"] + "<br />phone: " + data["Tom"]["phone"] + "<br />email: " + data["Tom"]["email"] );
		},
		error: function (status)
		{
			$html($("box"), "Ajax error! Status code: " + status);
		}
	});
}
Demonstration