JavaScript JS Tutorial JS Objects JS Functions JS Classes JS Async JS HTML DOM JS Browser BOM JS Web APIs JS AJAX JS JSON JS vs jQuery JS Graphics



AJAX Examples

AJAX (Asynchronous JavaScript and XML) is a technique used in web development to create dynamic and interactive web pages. It allows web pages to update content without reloading the entire page, resulting in a faster and more responsive user experience. In this article, we will explore some examples of AJAX in action.

Example 1: Live Search

Live search is a common use case for AJAX. It allows users to search for content on a website without having to reload the entire page. Here's an example:

<input type="text" id="search" onkeyup="search()">
<div id="results"></div>

<script>
function search() {
  var input = document.getElementById("search").value;
  var xmlhttp = new XMLHttpRequest();
  xmlhttp.onreadystatechange = function() {
    if (this.readyState == 4 && this.status == 200) {
      document.getElementById("results").innerHTML = this.responseText;
    }
  };
  xmlhttp.open("GET", "search.php?q=" + input, true);
  xmlhttp.send();
}
</script>

In this example, we have an input field with an ID of "search" and a div with an ID of "results". When the user types in the input field, the search() function is called. This function creates a new XMLHttpRequest object and sends a GET request to a PHP script called "search.php" with the search query as a parameter. When the response is received, the contents of the "results" div are updated with the response text.

Example 2: Dynamic Content

Another common use case for AJAX is to load dynamic content into a web page. Here's an example:

<button onclick="loadContent()">Load Content</button>
<div id="content"></div>

<script>
function loadContent() {
  var xmlhttp = new XMLHttpRequest();
  xmlhttp.onreadystatechange = function() {
    if (this.readyState == 4 && this.status == 200) {
      document.getElementById("content").innerHTML = this.responseText;
    }
  };
  xmlhttp.open("GET", "content.php", true);
  xmlhttp.send();
}
</script>

In this example, we have a button with an onclick event that calls the loadContent() function. This function creates a new XMLHttpRequest object and sends a GET request to a PHP script called "content.php". When the response is received, the contents of the "content" div are updated with the response text.

Example 3: Form Submission

AJAX can also be used to submit form data without reloading the entire page. Here's an example:

<form onsubmit="submitForm(event)">
  <input type="text" name="name">
  <input type="email" name="email">
  <button type="submit">Submit</button>
</form>
<div id="message"></div>

<script>
function submitForm(event) {
  event.preventDefault();
  var form = event.target;
  var xmlhttp = new XMLHttpRequest();
  xmlhttp.onreadystatechange = function() {
    if (this.readyState == 4 && this.status == 200) {
      document.getElementById("message").innerHTML = this.responseText;
    }
  };
  xmlhttp.open("POST", "submit.php", true);
  xmlhttp.setRequestHeader("Content-type", "application/x-www-form-urlencoded");
  xmlhttp.send(new FormData(form));
}
</script>

In this example, we have a form with two input fields and a submit button. The onsubmit event calls the submitForm() function, which prevents the default form submission behavior and creates a new XMLHttpRequest object. The form data is then sent to a PHP script called "submit.php" using a POST request. When the response is received, the contents of the "message" div are updated with the response text.

Conclusion

AJAX is a powerful technique that can greatly enhance the user experience of web applications. By allowing web pages to update content without reloading the entire page, AJAX can make web applications faster and more responsive. The examples we've explored in this article are just a few of the many ways AJAX can be used in web development.

References

Activity