ajax programming

1 $.ajax({
2    type: 'GET',
3    dataType: 'json',
4    url: url,
5    timeout: 5000,
6    success: function(data, textStatus ){
7       alert('request successful');
8    },
9    fail: function(xhr, textStatus, errorThrown){
10       alert('request failed');
11    }
12  });
13

1// For a plain JS solution, use these functions:
2
3function _GET_REQUEST(url, response) {
4  var xhttp;
5  if (window.XMLHttpRequest) {
6    xhttp = new XMLHttpRequest();
7  } else {
8    xhttp = new ActiveXObject("Microsoft.XMLHTTP");
9  }
10
11  xhttp.onreadystatechange = function() {
12    if (this.readyState == 4 && this.status == 200) {
13      response(this.responseText);
14    }
15  };
16
17  xhttp.open("GET", url, true);
18  xhttp.send();
19}
20
21function _POST_REQUEST(url, params, response) {
22  var xhttp;
23  if (window.XMLHttpRequest) {
24    xhttp = new XMLHttpRequest();
25  } else {
26    xhttp = new ActiveXObject("Microsoft.XMLHTTP");
27  }
28
29  xhttp.onreadystatechange = function() {
30    if (this.readyState == 4 && this.status == 200) {
31      response(this.responseText);
32    }
33  };
34
35  xhttp.open("POST", url, true);
36  xhttp.setRequestHeader("Content-type", "application/x-www-form-urlencoded");
37  xhttp.send(params);
38}
39
40// and apply like this:
41_GET_REQUEST('http://someurl', (response) => {
42	// do something with variable response
43});
44_POST_REQUEST('http://someurl', 'paramx=y', (response) => {
45	// do something with variable response
46});

1With Ajax, web applications can send and retrieve data from a server asynchronously without interfering with the display and behaviour of the existing page.

1// BEGIN
2// JavaScript example
3// An example of a simple Ajax request using the GET method, written in JavaScript.
4
5// get-ajax-data.js:
6
7// This is the client-side script.
8// Initialize the HTTP request.
9var xhr = new XMLHttpRequest();
10xhr.open('GET', 'send-ajax-data.php');
11
12// Track the state changes of the request.
13xhr.onreadystatechange = function () {
14	var DONE = 4; // readyState 4 means the request is done.
15	var OK = 200; // status 200 is a successful return.
16	if (xhr.readyState === DONE) {
17		if (xhr.status === OK) {
18			console.log(xhr.responseText); // 'This is the output.'
19		} else {
20			console.log('Error: ' + xhr.status); // An error occurred during the request.
21		}
22	}
23};
24
25// Send the request to send-ajax-data.php
26xhr.send(null);
27// END
28
29// BEGIN
30// send-ajax-data.php:
31<?php
32// This is the server-side script.
33// Set the content type.
34header('Content-Type: text/plain');
35
36// Send the data back.
37echo "This is the output."; ?>
38// END 
39  
40// BEGIN  
41// Fetch is a new native JavaScript API  
42fetch('send-ajax-data.php')
43    .then(data => console.log(data))
44    .catch (error => console.log('Error:' + error));
45// END
46
47// BEGIN
48// ES7 async/await example:  
49async function doAjax() {
50    try {
51        const res = await fetch('send-ajax-data.php');
52        const data = await res.text();
53        console.log(data);
54    } catch (error) {
55        console.log('Error:' + error);
56    }
57}
58
59doAjax();
60// END