This content originally appeared on DEV Community and was authored by ManuTheCoder
Ajax is a set of web development techniques using many web
technologies on the client-side to create asynchronous web applications. With Ajax, web applications can send and retrieve data from a server asynchronously without interfering with the display and behaviour of the existing page. (Wikipedia)
AJAX is very useful for building single page apps.
It's also very powerful because you can submit forms and send requests, without reloading the page!
How to use AJAX
AJAX is very simple to use.
- Just create an index.html file, and insert this code in a
<script>tag. - Create another file named
ajax_is_awesome.php. Write whatever you want in that file! - View your website!
var ajax = new XMLHttpRequest();
ajax.onreadystatechange = function() {
if (this.readyState == 4 && this.status == 200) {
document.getElementById("demo").innerHTML = ajax.responseText;
}
};
ajax.open("GET", "ajax_is_awesome.php", true);
ajax.send();
Explained
var ajax - Creates a new variable for the class XMLHttpRequest
XMLHttpRequest - XMLHttpRequest is an API in the form of an object whose methods transfer data between a web browser and a web server. (Wikipedia)
onreadystatechange - When the file has loaded
this.readyState == 4 && this.status == 200 - If the document's status isn't 404, 500, etc. Must be 200
ajax.open("GET", "index.php", true); - Opens the ajax file. Using GET this time.
ajax.send(); - Sends the request
How to use AJAX in jQuery
Remember to include the <script src="https://ajax.googleapis.com/ajax/libs/jquery/3.5.1/jquery.min.js"></script> line in your code
$("#someform").submit(function(e) {
e.preventDefault();
var form = $(this);
var url = form.attr('action');
$.ajax({
type: "POST",
url: url,
data: form.serialize(),
success: function(data) {
document.getElementById("demo").innerHTML = data;
}
});
});
See? AJAX is cool! Implement it, and you won't have redirects when submitting forms, or doing very simple things, such as checking for new notifications every few seconds.
Example of a single page documentation I made using AJAX
pls star it on github if you like this!
This content originally appeared on DEV Community and was authored by ManuTheCoder
ManuTheCoder | Sciencx (2021-04-26T14:48:40+00:00) The Powers of AJAX. Retrieved from https://www.scien.cx/2021/04/26/the-powers-of-ajax/
Please log in to upload a file.
There are no updates yet.
Click the Upload button above to add an update.