I attempted to implement an AJAX function, but unfortunately, it is not displaying any output

Question

I attempted to implement an AJAX function, but unfortunately, it is not displaying any output

I attempted to implement an AJAX function but the output is not displaying anything.

var ajaxFunction = function(url, method, data = "") {
                var xhr = new XMLHttpRequest();
                xhr.onreadystatechange = function() {
                    if (xhr.readyState == 4 && x.status == 200) {
                        this.responseAjax = this.responseText;
                    }
                }
                xhr.open(method, url, true);
                xhr.setRequestHeader("Content-Type", "application/x-www-form-urlencoded");
                xhr.send(data);
    
            }
    
            function showSuggestion(inputStr) {
                var xhttp = new ajaxFunction("gethint.php?q=" + inputStr, "GET");
                if (inputStr.length == 0) {
                    document.getElementById("txtHint").innerHTML = "";
                    return;
                }
                document.getElementById("txtHint").innerHTML = xhttp.responseAjax;
            }

<!DOCTYPE html>
    <html>
    
    <body>
    
        <h3> Start typing a name in the input field below :</h3>
    
        <form action="">
            First Name : <input type="text" id="txt1" onkeyup="showSuggestion(this.value)">
    </form>
    
        <p>Suggestions:
            <sapn id="txtHint"></sapn>
        </p>
        
    </body>

</html>

I tried to retrieve suggested names from the gethint.php file when a user starts typing into the text box. However, it appears that the value of responseAjax is obtained after the showSuggestion() call. Can someone please assist me?

javascript ajax

Answer 1

Answer №1

It's important to handle the AJAX request asynchronously. When you are using the showHint function and trying to set the inner HTML of "txtHint" element with xhttp.responseAjax, you need to be aware that the AJAX call might not have returned yet. This means that the xhttp.responseAjax object is not defined at that moment. To properly handle the response, it's crucial to wait for the response to arrive. One way to do this is by passing a callback function into the ajaxObj definition. The object will call this function once it receives the response.

var ajaxObj = function(url, method, callback, data = "") {
    var xhr = new XMLHttpRequest();
    xhr.onreadystatechange = function() {
        if (xhr.readyState == 4 && xhr.status == 200) {

            // Handle the response data
            callback(xhr.responseText);
        }
    }
    xhr.open(method, url, true);
    xhr.setRequestHeader("Content-Type", "application/x-www-form-urlencoded");
    xhr.send(data);

}

// The callback function to execute when AJAX finishes
function fillTxtHint(responseHtml)
{
    document.getElementById("txtHint").innerHTML = responseHtml;
}

function showHint(str) {

    if (str.length == 0) {
        document.getElementById("txtHint").innerHTML = "";
    }

    // Pass in the callback function to be executed after AJAX returns
    ajaxObj("gethint.php?q=" + str, "GET", fillTxtHint);
}

Answer 2

It's important to handle the AJAX request asynchronously. When you are using the showHint function and trying to set the inner HTML of "txtHint" element with xhttp.responseAjax, you need to be aware that the AJAX call might not have returned yet. This means that the xhttp.responseAjax object is not defined at that moment. To properly handle the response, it's crucial to wait for the response to arrive. One way to do this is by passing a callback function into the ajaxObj definition. The object will call this function once it receives the response.

var ajaxObj = function(url, method, callback, data = "") {
    var xhr = new XMLHttpRequest();
    xhr.onreadystatechange = function() {
        if (xhr.readyState == 4 && xhr.status == 200) {

            // Handle the response data
            callback(xhr.responseText);
        }
    }
    xhr.open(method, url, true);
    xhr.setRequestHeader("Content-Type", "application/x-www-form-urlencoded");
    xhr.send(data);

}

// The callback function to execute when AJAX finishes
function fillTxtHint(responseHtml)
{
    document.getElementById("txtHint").innerHTML = responseHtml;
}

function showHint(str) {

    if (str.length == 0) {
        document.getElementById("txtHint").innerHTML = "";
    }

    // Pass in the callback function to be executed after AJAX returns
    ajaxObj("gethint.php?q=" + str, "GET", fillTxtHint);
}

Answer 3

Answer №2

this within the context of onreadystatechange's handler is actually referring to an instance of XMLHttpRequest, hence the line

this.responseAjax = this.responseText

seems redundant as it creates a field in the object that already exists and sets its value to another existing field. In the function showHint, the variable xhttp represents an instance of ajaxObj, however there is no pre-existing responseAjax field defined for this particular object. Instead, you can directly manipulate the innerHTML property of the element displaying suggestions inside the event handler of onreadystatechange like below:

function getSuggestions (method, data) {
    method = method.toUpperCase();
    var params = "q=" + data;
    var url = (method == "GET") ? "gethint.php?" + params : "gethint.php";

    var elem = document.getElementById("txtHint");

    if (data.length == 0) {
        elem.innerHTML = "";
        return;
    }

    var x = new XMLHttpRequest();

    x.onreadystatechange = function() {
        if (x.readyState == 4 && x.status == 200) {
            elem.innerHTML = this.responseText;
        }
    }
    x.open(method, url, true);
    x.setRequestHeader("Content-Type", "application/x-www-form-urlencoded");
    if (method == "GET") { 
        x.send(); 
    } else { 
        x.send(params); 
    }

}

Then, the modified showHint function will look like:

function showHint(str) {
    getSuggestions ("GET", str);
}

Answer 4

this within the context of onreadystatechange's handler is actually referring to an instance of XMLHttpRequest, hence the line

this.responseAjax = this.responseText

seems redundant as it creates a field in the object that already exists and sets its value to another existing field. In the function showHint, the variable xhttp represents an instance of ajaxObj, however there is no pre-existing responseAjax field defined for this particular object. Instead, you can directly manipulate the innerHTML property of the element displaying suggestions inside the event handler of onreadystatechange like below:

function getSuggestions (method, data) {
    method = method.toUpperCase();
    var params = "q=" + data;
    var url = (method == "GET") ? "gethint.php?" + params : "gethint.php";

    var elem = document.getElementById("txtHint");

    if (data.length == 0) {
        elem.innerHTML = "";
        return;
    }

    var x = new XMLHttpRequest();

    x.onreadystatechange = function() {
        if (x.readyState == 4 && x.status == 200) {
            elem.innerHTML = this.responseText;
        }
    }
    x.open(method, url, true);
    x.setRequestHeader("Content-Type", "application/x-www-form-urlencoded");
    if (method == "GET") { 
        x.send(); 
    } else { 
        x.send(params); 
    }

}

Then, the modified showHint function will look like:

function showHint(str) {
    getSuggestions ("GET", str);
}

I attempted to implement an AJAX function, but unfortunately, it is not displaying any output

Answer №1

Answer №2

Similar questions

I recently designed a form using a combination of HTML and JavaScript in order to display different dialogues depending on the number of selections made. Unfortunately, the alert function does not seem to be functioning

How can I delete an item from an array when I click on a selected element using Material React Select Multiple?

loop through an array and use splice to select items and modify the array

Tips for executing a jQuery nested template in a recursive manner

I am unable to select the first item when using select2.js and setting a placeholder

Tips for preventing directly mutating a prop within a recursive component

XMLHttpRequest Refusing to Send Data

A guide to incorporating nested loops with the map method in React JS

I seem to be having trouble using my markers on my istamap

Continue iterating using (forEach, map,...) until the object (children) has no more elements

Please ensure that all files have finished downloading before proceeding to create the object

Initiate a follow-up function once the initial one has been finished

Is it possible to generate a component dynamically using a string template?

Examining the scroll-down feature button

Is it possible to set up multiple registries within a single package.json configuration?

The NodeJS application experiences a crash if incorrect parameters are provided to the API

Tips for testing parallel, mocked data requests in JEST by simulating cached responses with a 500ms limit

When a property is passed as a prop in a Vue component, it is received

Encountering an AJAX issue while attempting to retrieve data

Avoiding the unnecessary re-rendering of input fields in React when their values change