Qatrix

$ajax

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"  =>  "[email protected]"
		),
		"Tom"  =>  array(
			"age"  =>  20,
			"phone"  =>  "39-2039-492",
			"email"  =>  "[email protected]"
		)
	);

	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