Ajax (programming)

Asynchronous JavaScript and XML, usually referred to as Ajax (sometimes capitalized AJAX, ) is a set of web development techniques that uses various asynchronous web technologies on the client-side to create web applications. With Ajax, web applications can send and retrieve data from a server asynchronously (in the background) without interfering with the display and behavior of the existing page. By decoupling the data interchange layer from the presentation layer, Ajax allows web pages and, by extension, web applications, to change content dynamically without the need to reload the entire page. In practice, modern implementations commonly return JSON instead of XML; and can return anything, e.g. HTML when used with htmx. Ajax is not a technology, but rather a programming pattern. The webpage can be modified by JavaScript to dynamically display (and allow the user to interact with) retrieved information without refreshing the page. The built-in XMLHttpRequest object can be used to execute Ajax requests on webpages, and the built-in fetch() function is a newer alternative to XMLHttpRequest that can also be used to perform Ajax.

Asynchronous JavaScript and XML, usually referred to as Ajax (sometimes capitalized AJAX, ) is a set of web development techniques that uses various asynchronous web technologies on the client-side to create web applications. With Ajax, web applications can send and retrieve data from a server asynchronously (in the background) without interfering with the display and behavior of the existing page. By decoupling the data interchange layer from the presentation layer, Ajax allows web pages and, by extension, web applications, to change content dynamically without the need to reload the entire page. In practice, modern implementations commonly return JSON instead of XML; and can return anything, e.g. HTML when used with htmx. Ajax is not a technology, but rather a programming pattern. The webpage can be modified by JavaScript to dynamically display (and allow the user to interact with) retrieved information without refreshing the page. The built-in XMLHttpRequest object can be used to execute Ajax requests on webpages, and the built-in fetch() function is a newer alternative to XMLHttpRequest that can also be used to perform Ajax. // This is the client-side script. // Initialize the HTTP request. let xhr = new XMLHttpRequest(); // Define the request. xhr.open('GET', 'send-ajax-data.php'); // Track the state changes of the request. xhr.onreadystatechange = function() { const DONE = 4; // readyState 4 means the request is done. const OK = 200; // status 200 is a successful return. if (xhr.readyState === DONE) { if (xhr.status === OK) { console.log(xhr.responseText); // 'This is the output.' } else { console.log('Error: ' + xhr.status); // An error occurred during the request. } } }; // Send the request to send-ajax-data.php. xhr.send(null); send-ajax-data.php: // This is the client-side script. fetch('send-ajax-data.php') .then(res => res.text()) .then(data => console.log(data)) .catch(error => console.log('Error: ' + error)); The same script using JavaScript's async/await syntax: // This is the client-side script. try { const res = await fetch('send-ajax-data.php'); const data = await res.text(); console.log(data); } catch (error) { console.log('Error: ' + error); }

Text derived from https://en.wikipedia.org/w/index.php?oldid=1375191013 under CC BY-SA 4.0; modifications have been made.