What is the best way to transmit data using a 'GET' request with XMLHttpRequest in JavaScript?

Question

What is the best way to transmit data using a 'GET' request with XMLHttpRequest in JavaScript?

Thank you for taking the time to read this post.

I'm looking to send data in a GET request using XMLHttpRequest.

function useAjax(url,data){
        const xhttp = new XMLHttpRequest();
        xhttp.onload = function(e) {
            const resData = JSON.parse(xhttp.responseText) ;
            setResponseData(true,resData)
        }
        xhttp.open("GET", url, false);
        xhttp.setRequestHeader("Content-type", "application/x-www-form-urlencoded");
        xhttp.send(data);
   }

I attempted to modify the parameters in the open function like xhttp.open("GET", url, [false,data]);

However, I still did not see any results.

javascript ajax get xmlhttprequest

Answer 1

Answer №1

The "GET" method does not have a request body, for sending data, use the "POST" method instead

When using GET or HEAD methods, the body parameter is ignored and set to null

Answer 2

The "GET" method does not have a request body, for sending data, use the "POST" method instead

When using GET or HEAD methods, the body parameter is ignored and set to null

Answer 3

Answer №2

When working with a C# based API, you have the option to utilize [FromHeader] in your method signature and then pass the object in the header using XMLHttpRequest.setRequestHeader...

const xhr = new XMLHttpRequest();
xhr.open('GET', 'http://your-host/route/endpoint');
...
xhr.setRequestHeader('MyFilter', {"item":"value", "item":"value" })
xhr.send();

Next, in your controller (C#):

[HttpGet("route/endpoint")]
public async Task<IActionResult> GetListOfMyObject([FromHeader] MyFilter filter)
{
    var result = QueryForDataUsingObject(filter);
    ...
}

The object will be automatically deserialized into the necessary type.

Answer 4

When working with a C# based API, you have the option to utilize [FromHeader] in your method signature and then pass the object in the header using XMLHttpRequest.setRequestHeader...

const xhr = new XMLHttpRequest();
xhr.open('GET', 'http://your-host/route/endpoint');
...
xhr.setRequestHeader('MyFilter', {"item":"value", "item":"value" })
xhr.send();

Next, in your controller (C#):

[HttpGet("route/endpoint")]
public async Task<IActionResult> GetListOfMyObject([FromHeader] MyFilter filter)
{
    var result = QueryForDataUsingObject(filter);
    ...
}

The object will be automatically deserialized into the necessary type.

What is the best way to transmit data using a 'GET' request with XMLHttpRequest in JavaScript?

Answer №1

Answer №2

Similar questions

What are the methods to alter validation for a Formfield based on the input from other Formfields?

If you refer to a function, are you personally calling the function or asking the reference to call it?

Acquire Laravel notification data through the power of AJAX

Is it possible to combine ng-class with conditional expression and ng-class with string syntax in a single statement?

The error message "AmCharts: Uncaught TypeError: Unable to retrieve the property 'mouseX' as it is undefined" appeared

Utilizing the HTML method of jQuery on a jQuery element

Playing with JSON data in React

Angular - Switching Displayed Information

Can you explain how I can use AJAX in HTML to change the text of a link once it has been clicked on?

the width of the table body is narrower than the table itself

React Redux Connect MapState not refreshing when filtering an item from a list

Leveraging spread syntax and styling for array string interpolation in JavaScript

Differences between utilizing computed variables versus useState and useEffect

Creating a "return" button for an editing form in AngularJS Datatables with the help of a form directive

My desire is for every circle to shift consecutively at various intervals using Javascript

Transforming an ASP.NET webpage into a PDF format using Ajax Tab Container

Retrieving metadata using breeze is taking too long

Trying to update React and Electron, encountering the error message "global is not defined"

Select the picture to update the content of the text box

Trouble with Basic JavaScript Comparison Function