How Can I Make AJAX Calls Using Only Vanilla JavaScript?

Making AJAX Calls Without jQuery: Exploring the Vanilla JavaScript Approach

Making AJAX calls without jQuery is a common requirement for developers seeking to leverage the power of asynchronous communication without relying on extensive third-party libraries. Here's a detailed exploration of how to achieve this using plain JavaScript:

Vanilla JavaScript XHR Object

The XMLHttpRequest (XHR) object is a cornerstone of AJAX calls in vanilla JavaScript. To begin, instantiate an XHR object using the new XMLHttpRequest() constructor.

Event Handling and Callback Functions

Next, define an event listener that monitors the XHR object's state (readyState). When the state transitions to XMLHttpRequest.DONE (typically 4), it signals that the request has completed.

HTTP Request and Response Processing

The open() method initializes an HTTP request, specifying the request method (e.g., GET, POST), the target URL, and whether the request should be asynchronous (set to true for AJAX). The send() method sends the request.

Upon receiving a response, evaluate the XHR object's status property. A status code of 200 indicates a successful request, while other codes (such as 400 or 500) indicate errors. Handle these scenarios accordingly.

Example Code

The following code snippet demonstrates how to create and process an AJAX call using vanilla JavaScript:

function loadXMLDoc() {
    var xmlhttp = new XMLHttpRequest();

    xmlhttp.onreadystatechange = function() {
        if (xmlhttp.readyState == XMLHttpRequest.DONE) { // XMLHttpRequest.DONE == 4
           if (xmlhttp.status == 200) {
               document.getElementById("myDiv").innerHTML = xmlhttp.responseText;
           }
           else if (xmlhttp.status == 400) {
              alert('There was an error 400');
           }
           else {
               alert('something else other than 200 was returned');
           }
        }
    };

    xmlhttp.open("GET", "ajax_info.txt", true);
    xmlhttp.send();
}

Conclusion

Understanding how to make AJAX calls without jQuery expands your toolkit as a developer. By leveraging the vanilla JavaScript XHR object, you gain complete control over the asynchronous communication process, allowing for flexible and efficient data transfer in web applications.

The above is the detailed content of How Can I Make AJAX Calls Using Only Vanilla JavaScript?. For more information, please follow other related articles on the PHP Chinese website!