Can you provide a step-by-step guide on creating a JSONP Ajax request using only vanilla

// Performing an ajax request in jQuery
$.ajax( { url : '', data: {}, dataType:'jsonp',  jsonpCallback: 'callbackName', type: 'post'
        ,success:function (data) {
        console.log('ok');
        },
        error:function () {
        console.log('error');
        }
        });

Is there a way to achieve the same functionality using pure JavaScript?

Answer №1

let request = new XMLHttpRequest();
request.open("POST", 'http://forexplay.net/ajax/quotes.php');
request.onreadystatechange = function() {
    if (request.readyState == XMLHttpRequest.DONE) {
        if(request.status == 200){
            console.log('Server Response: ' + request.responseText );
        }else{
            console.log('Error Occurred: ' + request.statusText )
        }
    }
}
request.send(data);

I often overlook the case sensitivity in XMLHttpRequest requests.

Answer №2

This scenario involves not making an ajax call, but rather initiating a JSONP request. The good news is that replicating this process is quite simple and functions smoothly across all browsers.

var s = document.createElement("script"),
    callback = "jsonpCallback_" + new Date().getTime(),
    url = "http://forexplay.net/ajax/quotes.php?callback=" + callback;
window[callback] = function (data) {
    // Success!
    console.log(data);
};
s.src = url;
document.body.appendChild(s);

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

Exporting data from a jQuery table to CSV format

I have customized the jQuery Table to CSV Plugin so that it triggers a browser download of a CSV file. The original function was: function popup(data) { var generator = window.open('', 'csv', 'height=400,width=600'); ge ...

Establishing a connection to a remote Mongo database using Node.js

I have a remote MongoDB server and I am looking to establish a connection with it using Node.js. I was able to successfully connect directly with the Mongo shell, but for some reason, I cannot establish a connection to the MongoDB server in Node.js. The co ...

JavaScript does not allow executing methods on imported arrays and maps

In my coding project, I created a map named queue in FILE 1. This map was fully built up with values and keys within FILE 1, and then exported to FILE 2 using module.exports.queue = (queue). Here is the code from FILE 1: let queue = new.Map() let key = &q ...

Ways to eliminate existing information when conducting a search

Recently, I was tasked with integrating a search engine into a website that already has a list of data displayed on the first page. The challenge I faced was figuring out how to hide or remove this existing data when a new search request is made. You can v ...

What is the most efficient method for implementing absolute imports in Webpack 2?

I'm currently working on configuring Webpack for a React project and I'm looking to streamline how I import my components. Ideally, I want to import components like this: import ComponentName from "components/ComponentName" Instead of the more ...

Tips for sorting through the state hook array and managing the addition and removal of data within it

Having trouble finding a solution for filtering an array using the React useState hook? Let me assist you. I have declared a string array in useState- const [filterBrand, setFilterBrand] = useState<string[]>([]); Below is my function to filter this ...

Enhanced Slider Display featuring Multiple Posts for Improved Performance

My Sample Page features a slider that displays over 200 posts, each containing 5 images. However, the slider loads all the images at once, causing my page speed to be very slow. I am looking for an optimized way to display the slider without compromising l ...

Cross-origin resource sharing in Express.js servers

Encountering a minor issue with the connection setup between my Express.js API and React client. The Express API is running on http://localhost:3001, while React is hosted at http://exampleip:3000 (both on the same Windows server). To address Cross-Origi ...

What causes the empty gap to appear during animated transitions between two 'div' elements?

Is there a way to eliminate the white space in between elements during animation? Should I wrap both divs into another div to achieve this? I am using position-top to adjust my div animations. Could this be causing the issue? What other methods can you s ...

What is the best way to filter an array based on the property of its inner array?

I am grappling with the following array of objects: let a = [ { b: [1, 11, 12], c: "a1" }, { b: [2, 56, 1], c: "a2" }, { b: [1, 2, 3], c: "a3" } ] In search of an operation that is b ...

Challenges encountered while using Selenium WebDriver to upload images

I'm having trouble adding an image as a normal attachment to an email (not as an inline image). When inspecting the HTML DOM with Firebug, I noticed there are two elements with xpath //input@type='file', which is due to the presence of two b ...

Vue js for filtering and replacing prohibited words

For this scenario, our objective is to screen the words in our input: <input type="text" class="form-control" placeholder="Write something..." v-model="todoInput""> Below are the restricted words that we aim to substitute in the input "restrict ...

Steps to incorporate this jQuery script

After receiving a solution to my problem, I'm struggling with how to actually put it into practice. $(function(){ $.get('file1.php', function(data){ $('#dropdown1').html( data ); }); // when dropdown1 is chang ...

JavaScript encountering a NaN value

I'm encountering an issue where I am receiving a NaN when attempting to summarize columns of a report. Additionally, my query is only retrieving 1 row of data, but the grid is displaying 2 rows. Does anyone have any suggestions on how to resolve this ...

Guide on transferring data from a component to App.vue in Vue 3, even with a router-view in the mix

I have the following layout: src components Footer.vue views Page.vue App.vue I want to access the 'message' vari ...

Storing POST Request Data in Express

I want to use a single API endpoint for both GET and POST requests. My goal is as follows: Send multiple POST requests to /api/users with data like: {'id': 2, is_valid: 'true'} Retrieve this data by fetching the same API URL later on ...

Checking for null variables in returned data using AJAX in Laravel 7

Currently in the process of developing a Laravel 7 project, I have encountered an issue with mapping returned data from my controller to a modal. Specifically, I am looking to validate if a certain value is null below the 'Appointment' section wi ...

An error has occurred as ByChained is not recognized

Recently, I have been experimenting with selenium webdriverjs in javascript to locate an element that includes the partial text "hoi" as well as the text "hoe gaat het". I attempted to use ByChained for this purpose, but encountered an error stating that ...

Issue with Material UI select component not displaying the label text

I've been struggling with Material UI's "Select" for quite some time now - spent about 10 hours trying to make it work the way I want. Any help would be greatly appreciated. This question is connected to a previous one: Select MenuItem doesn' ...

Adding styling to my project using @material-ui v5 has resulted in a CSS rule being injected, although I did not define it myself

I'm in the process of incorporating a simple menu component into my project, and I followed the instructions provided in the documentation. When viewing it in a CodeSandbox, everything appears as expected. However, within my actual project, the menu ...