How to use XMLHttpRequest while telling site to do something?

Question

First of all I have to say that I have NO EXPERIENCE in Ajax and I just need this one explanation in order for me to create a simple chrome extension. There is not much I could find on internet even tho I believe this is very simple. I need a part of code where I would "call" url from website and I need to adjust certain arguments in that url.

Request URL:http://URL_OF_THE_WEBSITE/v1/send?token=TOKEN_VALUE

Request Method:POST

Request Payload :

{amount: 1, user_id: 12345678}

amount: 1 user_id: 12345678

(this is something I get from Network panel- with url and token changed to real things - while calling url automatically from website, but I need to be able to call it manually too.)

So I have an idea of mixing AJAX(which I don't know) and JS in order for me to call this url. I would use variables for both TOKEN_VALUE and amount&user_id, but I don't know how to even call that url and how to set "request payload" in order for site to do the thing I want it to do.

I would really appreciate if someone would be kind enough to help :)

Work I have done, but doesn't work:

var request=new XMLHttpRequest;
request.open("POST","https://URL_OF_THE_WEBSITE/v1/send?token=TOKEN_VALUE"),request.setRequestHeader("Content-Type","application/x-www-form-urlencoded;charset=UTF-8"),request.Payload("user_id=12345678&amount=5");

I basically tried to remake an example I found online, but it didn't work out, therefore I need someone to actually explain to me how this works and how can I adjust arguments that I need.

Welcome to StackOverflow! Have you tried anything so far? StackOverflow isn't a free code-writing service, and expects you to [**try to solve your own problem first**](http://meta.stackoverflow.com/questions/261592). Please update your question to show what you have already tried, showcasing a **specific** problem you are facing in a [**minimal, complete, and verifiable example**](http://stackoverflow.com/help/mcve). For further information, please see [**how to ask good questions**](http://stackoverflow.com/help/how-to-ask), and take the [**tour of the site**](http://stackoverflow.com/tour). — Obsidian Age, Feb 13 '18 at 00:10
here https://stackoverflow.com/questions/24468459/sending-a-json-to-server-and-retrieving-a-json-in-return-without-jquery — Charlie Ng, Feb 13 '18 at 00:26

score 0 · Accepted Answer · answered Feb 13 '18 at 01:29

function callAjax() {
    // the XMLHttpRequest returns the ajax object that has several cool methods, so you store it in the request variable
    // @data contains the $_POST[amount],$_POST[user_id],$_POST[whatever] since we are using POST method, if you're using PHP as a server side language
    var request = new XMLHttpRequest(),
        url = 'place_here_the_url_only',
        data = 'amount=1&user_id=12345678&whatever=dataYouWantToSendToServerFromBrowser',
        token = document.querySelector('meta[name="csrf-token"]').content;

    // when the server is done and it came back with the data you can handle it here
    request.onreadystatechange = function() {
        if (this.readyState == 4 && this.status == 200) {
            // do whatever you want!
            console.log("The request and response was successful!");
       }
    };

    // method post, your giving it the URL, true means asynchronous
    request.open('POST', url, true);
    // set the headers so that the server knows who is he talking to, I'm using laravel 5.5
    request.setRequestHeader('Content-type', 'application/x-www-form-urlencoded; charset=UTF-8');
    // Token needed
    request.setRequestHeader('X-CSRF-TOKEN', token);
    // then you send the data and wait for the server to return the response
    request.send(data);
}

Ajax: Asynchronous JavaScript And XML

It is a mean of communication between the browser and the server hosting the website, it cannot call any other server.

Asynchronous means the website continues to function normally, until the request is returned from the server and the:

if (this.readyState == 4 && this.status == 200) { }

gets triggered

How to use XMLHttpRequest while telling site to do something?

1 Answers1

Ajax: Asynchronous JavaScript And XML