How to make a complete POST XMLHttpRequest?

Question

Background

I am studying a website, that performs a POST request when a user presses a button. My objective is to simulate that POST request using the JavaScript XMLHttpRequest, or any other small library for that matter.

What I tried

My first step was to use Google Chrome and to use the Network tab. Upon doing this I got the following information:

General:

Request URL:https://bananaswebsite.com/_ui/common/list/ListServlet
Request Method:POST
Status Code:200 OK
Remote Address:00.00.000.000:000

Request Headers:

Accept:*/*
Accept-Encoding:gzip, deflate, br
Accept-Language:en-US,en;q=0.8,es;q=0.6
Connection:keep-alive
Content-Length:173
Content-Type:application/x-www-form-urlencoded; charset=UTF-8
Cookie:LONG_STRING_HERE
DNT:1
Host:bananaswebsite.com
Origin:https://bananaswebsite.com
Referer:https://bananaswebsite.com/500?fcf=00B60000007Ewl7
User-Agent:Mozilla/5.0 (X11; CrOS x86_64 9000.58.0) AppleWebKit/537.36 (KHTML, like Gecko) Chrome/56.0.2924.58 Safari/537.36

Form Data:

action:filter
filterId:00B60000007Ewl7
filterType:t
page:1
rowsPerPage:100
search:
sort:
rolodexIndex:-1
retURL:/500?fcf=00B60000007Ewl7&rolodexIndex=-1&page=1

And immediately, I got overwhelmed. I believe I have all the data I need here, but I at the same time, I have no idea on how to use it to make a POST request.

I searched StackOverflow for similar questions:

• Send POST data using XMLHttpRequest
• JavaScript post request like a form submit

And even though they are very good, I cannot apply my understanding of them to my case.

Problem

I don't understand what I am supposed to do regarding cookies, nor if I have to add every request header manually.

Regarding the form data, I understand I need to create a JSON object and send it in my XMLHttpRequest with all the Form Data fields.

Can someone help me make an HTTP POST request with all this information? A code sample would be appreciated.

Answer 1

My solution

By following a suggestion from @lucavgobbi I brute forced myself into the cookie world, trying all the combinations and seeing which cookies I needed and which ones I didn't need.

By the end, I realized I didn't need the cookies to make my request! Which was a huge help.

As for the request, I used XMLHttpRequest with the URI.js library for parsing URLs, which was a huge help.

In the end I am able to easily make requests, and my code is smaller and easier to understand than all of the previous answers.

Code

I encapsulated the following instructions into a function, but you can easily do without one:

    let http = new XMLHttpRequest();

    let formParams = {
        action: "filter",
        filterId: "blah"
        //other parameters
    };

    let requestURL = URI("https://www.bananaswebsite.com");

    http.open("POST", requestURL.toString(), true);

    //Send the proper header information along with the request
    http.setRequestHeader("Content-type", "application/x-www-form-urlencoded; charset=UTF-8");

    //Call a function when the state changes.
    http.onreadystatechange = function() {
        if (http.readyState == 4 && http.status == 200) {
            console.log(http.responseText);
        }
    };
    requestURL.addSearch(formParams);
    http.send(requestURL.query());

And that's it!

It was a blast reading through everything, honestly I never though I could go this far. Thanks everyone for the tips !

Answer 2

here is an example of using JQuery with XMLHTTPRequest (used by the ajax method). The code can be simplified but it contains what it needed for the posting via XMLHTTPRequest.

$(document).on('click', '.button_deleteFileUpload', function () {
            var $this = $(this);
            // reference for deleting the row upon success
            var $currentRow = $this.closest('tr');

            // get information about the file
            var fileTitle = $this.attr('data-fileTitle');
            var fileName = $this.attr('data-fileName');
            var fileType = $this.attr('data-fileType')
            var producerCode = $this.attr('data-producerCode');

            // If the user confirms that they would like to delete the document, fire off the ajax call to attempt to delete it.
            var confirmation = confirm("Are you sure that you would like to delete the " + fileType + " file '" + fileTitle + "'?");
            if (confirmation) {
                $.ajax({
                    type: "POST",
                    url: "/WebServices/PMWebServices.asmx/DeleteLocationMaintenanceFile",
                    data: '{fileTitle: "' + fileTitle + '", fileName: "' + fileName + '", producerCode: "' + producerCode + '" }',
                    contentType: "application/json; charset=utf-8",
                    dataType: 'json',
                    success: function (data) {
                        // on success, remove the row from the page
                        $currentRow.remove();
                    }, // success
                    error: function (xhr, httpStatusMessage, customErrorMessage) {
                        alert("An error occurred while attempting to delete the following : \n"
                        + "File Title : " + fileTitle + "\n"
                        + "File Name : " + fileName + "\n"
                        + "Producer Code : " + producerCode + "\n\n\n"
                        + "Please contact IT for additional support with this issue.");
                    } // error
                }); // ajax()
            } // if
        });    // .on(...)