0

I am trying to convert an ajax request to vanilla JavaScript

$.ajax({
    url: 'http://foo.bar/hi',
    type: 'post',
    data: {args: params},
    success: function(data){
    },
});

I have tried the following

var xhr = new XMLHttpRequest();
var data = {args: params};
xhr.open("POST", 'http://foo.bar/hi', true);
xhr.send(data);

I am connecting to an external device with a web based interface and not getting any response on the device. It is as if I never sent a request

Theoretically, the original ajax request will perform the action, however, there is a problem with the jQuery portion of my program so I am trying to convert it to vanilla javascript and bypass the jQuery

Anthony
  • 36,459
  • 25
  • 97
  • 163
  • What is the response you're getting ? – Nelson Teixeira Jul 17 '18 at 22:39
  • Please read the help, and especially how to create a [mcve] - "not getting the response I am expecting" is _not_ a clear problem statement. – random_user_name Jul 17 '18 at 22:41
  • You have not designated an event handler for `onreadystatechange` so how are you getting any sort of response? – Paul Abbott Jul 17 '18 at 22:42
  • Please read the [docs on `XMLHttpRequest`](https://developer.mozilla.org/en-US/docs/Web/API/XMLHttpRequest/Using_XMLHttpRequest). You don’t have anything in your jQuery `success` handler, and you don’t have the equivalent of the `success` callback in your XHR approach. – Sebastian Simon Jul 17 '18 at 22:44
  • @J.Doe do as Paul Abbott is telling you. Designate an event handler for onreadystatechange and come back here and tell us what you're getting. – Nelson Teixeira Jul 17 '18 at 22:45
  • @J.Doe What is the problem with your jQuery code? Please, don’t give us new information piece by piece. Read [ask], provide a [mcve] and a complete and actionable problem statement. – Sebastian Simon Jul 17 '18 at 22:45
  • @Xufox I actually have no idea what is wrong with the jQuery side, nor does the developer of the web based device. We sat down together and decided to just tear out the ajax and begin again without jQuery. –  Jul 17 '18 at 22:47
  • 1
    ajax and jquery are not the same thing - you are not "tearing out the ajax" you are still using ajax, just doing it with vanilla javascript instead of with jquery. Do you get any response attaching to the device with a web browser? How about a command-line `curl`? - since you have no response handlers defined, either in your jquery or your vanilla version, you can't even accurately say that you aren't getting a response. – Stephen P Jul 17 '18 at 22:50
  • Are you set on XMLHttpRequest or are you open to using `fetch`? – Ryan Z Jul 17 '18 at 22:52
  • @StephenP, the response would be seen on the external device, –  Jul 17 '18 at 22:52
  • @RyanZ, if it works, I would take it –  Jul 17 '18 at 22:53
  • Alright, I will write up an answer. – Ryan Z Jul 17 '18 at 22:53
  • @RyanZ, thanks so much, I really appreciate it. –  Jul 17 '18 at 22:54
  • Possible duplicate of [How to make an AJAX call without jQuery?](https://stackoverflow.com/questions/8567114/how-to-make-an-ajax-call-without-jquery) – Bharata Jul 17 '18 at 22:56

1 Answers1

3

Using fetch:

function json(response) {
  return response.json();
}

function handleErrors(response) {
  if(!response.ok) {
    throw new Error("Request failed " + response.statusText);
  }
  return response;
}

fetch("http://url.com/endpoint", {
  method: "POST",
  body: {
    myKey: "my value",
    another: "hihihi"
  }
}).then(handleErrors).then(json).then(function(data) {
  console.log(JSON.stringify(data));
}).catch(function(err){
  console.log("err" + err);
})
Ryan Z
  • 2,657
  • 2
  • 8
  • 20
  • 1
    It is giving me alot of hate about using those =>. Plus, I assume that I put the {args: params} in the commented section? –  Jul 17 '18 at 23:10