Using an external function to implement Javascript and AJAX interactions

function makeAjaxRequest(destination_full_url) {

    if (window.XMLHttpRequest) {// code for modern browsers
        xmlhttp = new XMLHttpRequest();
    } else {// code for old Internet Explorer versions
        xmlhttp = new ActiveXObject("Microsoft.XMLHTTP");
    }

    xmlhttp.onreadystatechange = function () {
        if (xmlhttp.readyState == 4 && xmlhttp.status == 200) {
            alert("Response: \n" + xmlhttp.responseText);
            return xmlhttp.responseText;

        }
    }

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



    function callThirdPartyFunction(obj) {
       var response;
       response = makeAjaxRequest("info.php?keyword=obj.value");
       alert(response);         
    }


<textarea onkeypress="callThirdPartyFunction(this);"></textarea>

A "undefined" message box shows up first and then a message box with the ajax request data appears.

The question is why the alert(response); runs before the ajax_request() function finishes and how to make it wait until the function is complete before moving to the next line?

Answer №1

due to the asynchronous nature of ajax, it operates in the background by default. To change this and make it synchronous, you can switch from

xmlhttp.open("GET", destination_full_url, true);

to

xmlhttp.open("GET", destination_full_url, false);

=== latest update ===

function perform_ajax_request(destination_full_url, callback){
.....
xmlhttp.onreadystatechange = function () {
        if (xmlhttp.readyState == 4 && xmlhttp.status == 200) {
            alert("server response: \n" + xmlhttp.responseText);
           callback(xmlhttp.responseText);

        }
    }
...
}

....


function execute_third_party_function(obj) {
       perform_ajax_request("info.php?keyword=obj.value", function(response){alert(response) });

    }

Similar questions

If you have not found the answer to your question or you are interested in this topic, then look at other similar questions below or use the search

How can I fill the data array of arrays using an Angular Table component?

I am struggling to populate an Angular Table with data in the array of arrays format. Despite my efforts, the code I have written does not seem to work. Any suggestions for a solution would be greatly appreciated. Here is the data that I am trying to popu ...

How can I retrieve the name of the upcoming middleware function in Express.JS?

Hey there, I'm currently facing a challenge with retrieving the names of middleware functions in a specific request route. Let's consider the code snippet below as an example: const authorizeRoute = (req,res,next) => { let nextFunctionName = ...

Deactivate additional fields when choosing an option from the drop-down selection menu

When designing a form with a select dropdown that displays various options, I encountered an issue. I want to disable certain fields if a specific option is chosen from the dropdown. For instance, if "Within Company" is selected in the transaction type, I ...

Utilize ramda.js to pair an identifier key with values from a nested array of objects

I am currently working on a task that involves manipulating an array of nested objects and arrays to calculate a total score for each identifier and store it in a new object. The JSON data I have is structured as follows: { "AllData" : [ { "c ...

Eliminate all blank spaces at the top and bottom of Span by squishing it

Imagine I have this code snippet: <span class="labels" style="background-color: #FFFFFF;border: 1px solid #000000;font-family: Verdana;font-size: 11px; ">74.58 ft.</span> I am looking for a way to compress the span element so that only the te ...

Is the next function triggered only after the iframe has finished loading?

First and foremost, I understand the importance of running things asynchronously whenever possible. In my code, there exists a function known as wrap: This function essentially loads the current page within an iframe. This is necessary to ensure that Jav ...

Linking an intricate property in ExtJS to a text field

Here is an example of JSON data: { name: { firstname: 'First Name', lastname: 'Last Name' } } How do I go about loading this data into a form field in ExtJS? First Name: [ First Name ] Last Name: [ Last Name ] UPDATE: After imp ...

What ways can I leverage JavaScript to convert a provided array into multiple different arrays?

I am in need of a function that meets the following criteria: Given the dimensions of an array, return all possible combination arrays based on the given numbers. The length of the given array should be equal to the length of the array returned. The size ...

Likelihood of triggering a function based on percentage

Hey everyone, I'm looking to add some randomness to the buttons on my website. I have a Button that could activate function one, function two or function three. However, I want to make it so there is a 60% chance that function one gets called from the ...

AngularJS factory or filter failing to update properly

I have been working on a system that manages translations in my factory. I set the language as a string and then use a filter to update the view when the language changes. Everything works fine if I define the language in the view beforehand, but when I t ...

Angular 2 orderByPipe not displaying any results initially

At first, I thought the reason for not displaying anything initially was due to it not being async and returning an empty array. Everything worked fine without the pipe, but the posts weren't shown on startup. After submitting a post, all the posts ap ...

JavaScript condensed into a single table cell rather than occupying an entire webpage

Hey there, I have a simple question that I can't seem to find the answer to anywhere. I'm working on a JavaScript function that pulls data from my database and I want it to display in one cell of a table instead of outputting to the entire page. ...

Tips for personalizing react-show-more text length with Material-UI Icons

In my SharePoint Framework webpart using React, I am currently utilizing the show more text controller. However, I am interested in replacing the "Show More" and "Show Less" string links with the ExpandMore and ExpandLess Material UI icons. Is there a way ...

What is the best way to sum up multiple checkbox values in JavaScript?

var bookRate = new Array('The Right to differ', 'Issues In Contemporary Documentary', 'Writing, Directing and Producing', 'Lee Kuan Yew My Lifelong Challenge'); var selection = document.rate.checkbox; var sum = 0.00 ...

Error: A colon was unexpectedly encountered while trying to access the JSON API on tickets.com

I've been attempting to retrieve data from the following URL: http://api.master18.tiket.com/search/autocomplete/hotel?q=mah&token=90d2fad44172390b11527557e6250e50&secretkey=83e2f0484edbd2ad6fc9888c1e30ea44&output=json To do this, I am ut ...

Monitoring WooCommerce order submissions through AJAX

I'm exploring the world of Ajax for the first time. My goal is to submit an order tracking form and show the results using AJAX. I attempted to use Ajax to display the results within div track_result. The issue I'm facing is that the following ...

Encountering difficulties launching development server for Next.js 14 using the latest version of Yarn Berry

I'm encountering an issue when trying to run the development server in nextjs 14 using yarn. It works perfectly fine with pnpm and npm, but I am facing this problem only with yarn The error message: E:/Programming/TM/test/.yarn/__virtual__/next-virtu ...

Having trouble getting Fullcalendar to show up on my cordova app

Currently, I am in the process of building a mobile application using ionic and cordova. My goal is to incorporate a timetable system utilizing Fullcalendar and a PHP page that showcases MySQL data in JSON format. Despite my efforts, I am encountering diff ...

Unveiling an HTML file using the express.static middleware on Replit

When using Replit to render an HTML file with res.sendFile within an app.get function, everything works smoothly. I can include logos, styles, and JavaScript logic files by utilizing the express.static middleware. However, if I attempt to also make the HTM ...

"Automatically scroll back to the top of the page once new content

Is there a way to automatically scroll the page to the top after content has been loaded via Ajax? Here is the code I am using to display the content: $(document).ready(function () { var my_layout = $('#container').layout(); $("a.item_l ...