#software-engineering
AJAX stands for **Asynchronous JavaScript and XML**. AJAX is not a technology, but rather a programming concept. AJAX make it possible to update parts of a web page without reloading the entire page, making the application faster and more responsive to user actions. Here's an example of a simple AJAX call using only HTML and JavaScript without any third-party libraries:
```html
<!DOCTYPE html>
<html>
<head>
<title>AJAX Example</title>
</head>
<body>
<h1>Simple AJAX Example</h1>
<button onclick="loadData()">Load Data</button>
<div id="result"></div>
<script>
function loadData() {
var xmlhttp = new XMLHttpRequest();
xmlhttp.onreadystatechange = function() {
if (this.readyState == 4 && this.status == 200) {
document.getElementById("result").innerHTML = this.responseText; // using innerHTML replacement, there is no page reload
}
};
xmlhttp.open("GET", "data.txt", true);
xmlhttp.send();
}
</script>
</body>
</html>
```
In this example, we have a simple HTML page with a button and a `<div>` element to display the result of the AJAX call. When the button is clicked, the `loadData()` function is called.
Inside the `loadData()` function, we create a new `XMLHttpRequest` object. We then define the `onreadystatechange` event handler, which will be called whenever the `readyState` property of the `XMLHttpRequest` object changes.
In the event handler, we check if the `readyState` is 4 (indicating that the request has been completed) and the `status` is 200 (indicating a successful response). If both conditions are met, we update the content of the `<div>` element with the response text using the `responseText` property of the `XMLHttpRequest` object.
Finally, we open the AJAX request using the `open()` method, specifying the HTTP method (in this case, "GET"), the URL of the data file ("data.txt"), and the `true` parameter to make the request asynchronous. We then send the request using the `send()` method.
When you open this HTML file in a web browser and click the "Load Data" button, the content of the "data.txt" file will be loaded and displayed in the `<div>` element without refreshing the page.
## Problem of Ajax and why People Switch to Develop Framework like React?