Rus / Eng

AJAX

Download AJAX function

ajax(url, func, arg, par) description

The ajax() function sends a request to the specified address and defines the handler of the received data.

ParameterData typeDefault valueDescription
urlstringundefinedThe address of the request
funcstringundefinedThe name of the function to which the object containing the received data will be transferred.
If the function is not specified, the server response will be shown by the standard alert() function
argdata of any typeundefinedAn additional argument passed to the processing function of the received data.
If it is necessary to transfer several variables, they can be combined and transferred as an object
parstring or FormDataundefinedData in a string format should be presented in the following form: "var1=100&var2=150".
If this parameter is specified, the data will be transmitted by the POST method. In other cases, the GET method will be used

Download AJAX function

Example 1. A simple example of getting data through AJAX using the GET method

Example of use: Get the result of (3+5)

<script type="text/javascript" src="ajax.js"></script>
<a href="" onClick="return ajax('?aj=1&v1=3&v2=5')">Get the result of (3+5)</a>

Example 2. A simple example of getting data through AJAX using the POST method

Example of use: Get the result of (8+6) via POST request

<script type="text/javascript" src="ajax.js"></script>
<a href="" onClick="return ajax('?aj=1', '', '', 'v1=8&v2=6')">Get the result of (8+6) via POST request</a>

Example 3. Example of obtaining data via AJAX using the selected method using custom data and its functions

Example of use:

+ = Send


HTML

<script type="text/javascript" src="ajax.js"></script>
<p>
	<input type="text" value="3" size="5" id="v1">
	+ <input type="text" value="4" size="5" id="v2">
	= <input type="text" value="" size="6" id="datsum" readonly>
	<a href="" onClick="return myClick()" class="btn big">Send</a>
</p>
<p>
	<label for="sndpost">
		<input type="checkbox" id="sndpost"> Send POST request
	</label>
</p>

CSS

p input {
	transition: all 1.5s ease;
	padding: 10px;
	font-size: 20px;
	border-radius: 5px;
	text-align: right;
}

PHP

if( !empty($_GET['aj']) ) {
	if( isset($_GET['v1']) )
		echo ( (int)$_GET['v1'] + (int)$_GET['v2'] );
	else
		echo ( (int)$_POST['v1'] + (int)$_POST['v2'] );
	exit;
}

JavaScript

Functions for this particular task

var wait=0; // Protect your server against accidental retries

// Function for collecting and sending data
function myClick() {
	var url = "",
	v1 = document.getElementById('v1'),
	v2 = document.getElementById('v2'),
	post;
	
	if(wait!=0) return false;
	wait = 1;
	v1.readOnly = v2.readOnly = true;
	
	v1.value = parseInt(v1.value);
	v2.value = parseInt(v2.value);
	if(isNaN(v1.value)) v1.value = 0;
	if(isNaN(v2.value)) v2.value = 0;
	post = 'v1=' + v1.value + '&v2=' + v2.value;
	
	document.getElementById('datsum').value = "~";
	document.getElementById('datsum').style.background = "purple";
	
	if(!document.getElementById('sndpost').checked) {
		url = "&" + post;
		post = "";
	}
	
	setTimeout( // Making a delay of one second (for this example)
		function() {
			ajax(
				"?aj=1"+url, // Send request to this address
				"myFunc", // Pass the response to a function with this name
				"", // No additional data
				post // Here is the data for the POST request only
			);
		}
	, 1000);
	
	return false;
}

// Function for processing received data and displaying the result
function myFunc(req) {
	var vs = document.getElementById("datsum");
	wait = 0;
	v1.readOnly = v2.readOnly = false;
	vs.style.background = "";
	if(req.status!=200) {
		vs.value = "ajax error: ("+req.status+") "+req.statusText;
		return;
	}
	vs.value = req.responseText;
}