Ajax从jquery到javascript

Question

I want to convert an ajax function from jquery to plain javascript

I have tried this but it doesn't react the same way as the url doesn't receieve the response when i try with my plain js

Here is my jquery

(function ($){
try{
        var event_category = 'a';
        var event_name = 'b';
        var page_url = 'c';
        var url = "myurl";
        var data = {
                event_category: event_category,
                event_name: event_name,
                page_url: page_url
        };
        $.ajax({
                crossDomain: true,
                type: "POST",
                url: "myurl",
                data : {event_category: event_category, 
                        event_name: event_name, 
                        page_url: page_url
                        }
        });
  } catch(e){console.log(e)};  
})(jQuery);

And here is what i tried

var event_category = 'action';
var event_name = 'click';
var page_url = 'test';
var request = new XMLHttpRequest();
request.open('POST', 'myurl');
request.setRequestHeader("Content-Type", "application/json; utf-8");
          params = {
              event_category: event_category, 
              event_name: event_name, 
              page_url: page_url
              } 
request.send(JSON.stringify(params));

not sure what i should change

Edit:

Base on one of the comments i check the network data on the developer tools The jquery is having a response on the header of this format enter image description here enter image description here

But the javascript is sending the data is this format

enter image description here

Basically the javascript is not sending it on a url params format. Not sure how to force it on how to send it on the same format

Answer 1

Is there any reason not to use the fetch API (it can be polyfilled in crappy browsers...)?

const ajax = async function(url, data) {
  try {

    const response = await fetch(url, {
      credentials: 'include', // like jQuery $.ajax's `crossDomain`
      method: 'POST',
      headers: {
        'Accept': 'application/json',
        'Content-Type': 'application/json',
      },
      // this mimics how jQuery sends POST data as querystring by default
      body: Object.entries(data).map(([key, val]) => `${key}=${val}`).join('&'),
    });

    data = await (
      response.headers.get('content-type').includes('json')
      ? response.json()
      : response.text()
    );

    console.log(data);

    return data;
  } catch(err) { console.log(err) };
}

ajax('myurl', {
  event_category: 'a', 
  event_name: 'b', 
  page_url: 'c',
});