Do You Even Know About `AJAX`
AJAX is a developer’s dream, because you can:
- Update a web page without reloading the page
- Request data from a server — after the page has loaded
- Receive data from a server — after the page has loaded
- Send data to a server — in the background
Now Understand the Theory with Example If Still Have Doubts
// Create a new XMLHttpRequest object
var xhr = new XMLHttpRequest();
// Configure the request by specifying the HTTP method (GET, POST, etc.) and the URL endpoint
xhr.open('GET', 'https://api.example.com/data', true);
// Define a callback function to handle the response
xhr.onload = function() {
// Check if the request was successful (status code 200 indicates success)
if (xhr.status === 200) {
// Process the response data
var responseData = xhr.responseText;
console.log(responseData);
} else {
console.error('Request failed with status:', xhr.status);
}
};
// Define a callback function to handle any error that occurs during the request
xhr.onerror = function() {
console.error('Request failed.');
};
// Send the request to the server
xhr.send();Explanation:
Create a new XMLHttpRequest object: The XMLHttpRequest object is the key component of AJAX that allows us to make HTTP requests from the browser.
Configure the request: Use the open method to specify the HTTP method (GET, POST, etc.) and the URL endpoint. The third parameter, set to true, indicates that the request should be asynchronous.
Define a callback function for the onload event: This function will be called when the response is received. It checks if the request was successful (status code 200) and processes the response data accordingly.
Define a callback function for the onerror event: This function will be called if an error occurs during the request, such as a network failure.
Send the request: Use the send method to send the request to the server.
Real-life example: Let’s say you have a web page that displays live weather updates. You can use AJAX to fetch weather data from a remote server without reloading the entire page. The AJAX request would be made to the server’s API endpoint that provides weather information. Once the response is received, the page can be updated dynamically to show the latest weather conditions.
Note: AJAX is not limited to XML data. Despite the name, it can be used to send and receive data in various formats such as JSON, plain text, or HTML.
COPY PASTE THIS EXAMPLE AND LIVE TEST IN YOUR EDITOR
<!DOCTYPE html>
<html>
<head>
<title>AJAX Example</title>
<script>
function getData() {
var xhr = new XMLHttpRequest();
xhr.open('GET', 'https://api.publicapis.org/entries', true);
xhr.onload = function() {
if (xhr.status === 200) {
var responseData = xhr.responseText;
document.getElementById('result').textContent = responseData;
} else {
console.error('Request failed with status:', xhr.status);
}
};
xhr.onerror = function() {
console.error('Request failed.');
};
xhr.send();
}
</script>
</head>
<body>
<button onclick="getData()">Get Data</button>
<div id="result"></div>
</body>
</html>— — — — — — — — — — — — — -The End — — — — — — — — — — — —
If you enjoyed reading this blog, please share it with your friends and make sure to subscribe to our YouTube channel for more exciting content. Help us spread the word about our expertise in MERN stack development, cloud computing, React Native, and Next.js, and stay tuned for more informative articles to come. Together, we can take the tech world by storm!
In the Mern Stack Projects section you can find tutorials, tips, cheat sheets, and other projects. Our talks also focus on React Frameworks like NextJs,AWS Cloud So join us today to keep up with the latest technology🩷
📠 🏅:- Mern Stack Projects
🎦 🥇:- Jara diary — YouTube 🚦
🎦 🥈 :- Errormania — YouTube 🚦
On GITHUB :- raj-28 (Raj) (github.com)
💌 Do Subscribe To Our Mailing List To stay Updated With All New Blogs 👍
…………🚦…🛣… ……………🚧🛑………………..▶……………….️
Use Emojis From Here In Case You Need Any….🚦🛣️🥇🥈🥉🏅🎖️🎦👍
