Introduction to AJAX
Well, if we go to a web site, we are doing several things like scrolling up and down(just like we are doing in the Facebook feed 😅 😅), clicking on some random buttons we want, filling up some text fields and many many more. What I'm trying to say is normally we are not interacting with one web page if we visit a web site. We navigate through several web pages using hyperlinks. Sometimes is a headache 😩. I mean it takes some time, if we want to go back then we have to press the back button, sometimes the data we have entered in the previous page might be not there.
So don't we have a solution to this? like send and receive data in the background without refreshing or navigating to another web page.
Yes, we do have a solution and that's called AJAX. What exactly this AJAX means. AJAX stands for Asynchronous Javascript and XML. Using ajax we can send requests to the server, send and receive data from a text file, XML, JSON, or even from a PHP file.
All we have to know is HTML and vanilla JavaScript.(There is a way to use AJAX in the Jquery. it will be the upcoming parts. 😋)
By using AJAX we can update the content of a section in our web page, or we can send data a server without refreshing the browser.
As an example: Facebook feed is refreshed without refreshing the browser, we get messages from the messenger without refreshing the browser.
So likewise AJAX is very important in the business. Moreover, we can user AJAX in the application created by using the react or angular.
As the first step, let's fetch some data from a TXT file to our web site without reloading.
01) Create a simple HTML markup that contains a button and a div with the ID of “data”.
Here we are going to fetch the data to the div container when we click the button.
inside the text file, I have saved a couple of texts.
02) In order to use the AJAX, we have to use the XMLHttpRequest object. Therefore at the beginning, we have to declare create the XMLHttpRequest object.
Here at the beginning, I have declared an event listener to the button. When the button is clicked it should fire up the loadData() function.
Inside the loadData() function, declare the XMLHttpRequest object(xhr). Then we are using the open() method to parse parameters to the xhr object.
OPEN() method parameters meaning… 🤗
The 1st parameter is the method type we are using. (In HTML forms we user “GET” and “POST” as the methods. In this case, also we can user “GET/POST”)
The 2nd parameter is the file that we want to fetch data from. Or the file that we want to send data. It could be either text file or PHP or XML or JSON. We can parse an URL if we want. (EX: https://api.github.com/users)
The 3rd parameter is used to define we are using our connection asynchronously. That should be TRUE.
Then we are using load property of the xhr object to check whether we have set up our connection successfully.
Inside the load property function, we are checking the state of our HTTP connection. Basically there are 3 connection states.
01) 200: OK 😀
02)403: Forbidden 😶
03)404: Not Found 😑
So if the state is equal to 200 we are good to go. That means the connection has been established. Inside the if condition we can use the Response text which is the fetched data from our Text file to display inside our page. As per the above image, I have used the div Id “data” to insert the fetched data.
HERE IS THE COMPLETE CODE 👇 👇 👇 👇 👇 👇 👇 👇 👇 👇 👇 👇 👇
