Exploring how to integrate a jQuery ajax request within Javascript's XmlHttpRequest technique

Question

Exploring how to integrate a jQuery ajax request within Javascript's XmlHttpRequest technique

My current setup involves an ajax call structured like this:

var data = {"name":"John Doe"} $.ajax({ dataType : "jsonp", contentType: "application/json; charset=utf-8", data : JSON.stringify(data), success : function(result) { alert(result.success); // result is an object which is created from the returned JSON }, });

However, I am now looking to convert it into JavaScript's XmlHttpRequest. I understand the basic syntax, but I am unsure how to specifically translate this jQuery ajax functionality into XmlHttpRequest.

In particular, I am seeking guidance on how to specify the dataType when using XmlHttpRequest.

javascript ajax

Answer 1

Answer №1

Here is an example of how you could achieve this:

let xmlhttp = new XMLHttpRequest();
let url = "request/url";
let data = {"name":"John Doe"};

xmlhttp.onreadystatechange = function() {
    if (this.readyState == 4 && this.status == 200) {
        let myArr = JSON.parse(this.responseText);
        successCallback(myArr);
    }
};
xmlhttp.setRequestHeader("Content-Type", "application/json; charset=utf-8")
xmlhttp.responseType = "json";
xmlhttp.open("POST", url, true);
xmlhttp.send(JSON.stringify(data));

function successCallback(arr) {

}

Note: This code has not been tested yet.

Answer 2

Here is an example of how you could achieve this:

let xmlhttp = new XMLHttpRequest();
let url = "request/url";
let data = {"name":"John Doe"};

xmlhttp.onreadystatechange = function() {
    if (this.readyState == 4 && this.status == 200) {
        let myArr = JSON.parse(this.responseText);
        successCallback(myArr);
    }
};
xmlhttp.setRequestHeader("Content-Type", "application/json; charset=utf-8")
xmlhttp.responseType = "json";
xmlhttp.open("POST", url, true);
xmlhttp.send(JSON.stringify(data));

function successCallback(arr) {

}

Note: This code has not been tested yet.

Exploring how to integrate a jQuery ajax request within Javascript's XmlHttpRequest technique

Answer №1

Similar questions

Exploring VueJs 3's Composition API with Jest: Testing the emission of input component events

JavaScript does not run when triggered by ajax

Selecting a color in Vuetify's color picker triggers the @

How can we achieve the same functionality as React Native's { flex: 1 } in React JS?

Tips for customizing table cell styling in editable cells with React material table

Utilize Launchdarkly in React by incorporating it through a custom function instead of enclosing it within

Exploring alternative methods of iterating over the values in a key-value pair within an AngularJS framework

React-virtualized list experiencing performance problems due to react-tether integration within its elements

Is it possible to assign the margin-bottom property of one element to be equal to the dynamic height of a sibling element?

A Complication Arises with Browser Functionality When Embedding an Iframe within

The content in the div tag isn't showing up properly because of Ajax

Is there a way to prevent the annoying "Reload site? Changes you made may not be saved" popup from appearing during Python Selenium tests on Chrome?

How can I implement automatic column updates in Yii2 GridView at regular intervals?

What is the best technology to implement for a band website design?

Pass the ID parameter to the AJAX jQuery function

Error encountered: The function 'showErrorMessage' is not exported from the file '../helpers/alerts'

Guide to saving an Object to a file (JSON) within the project directory using React Native for Debuggingpurposes

Issue with React ChartJS rendering – Title not visibleWhen using React Chart

Enhance with Laravel combined with AngularJS

Tips for creating precise dots on a polished slideshow