How to use a function as a property of an object inside another function in javascript

Question

I'm trying to create a function that will take object as a parameter and inside the object I want to have an object method just same way jQuery ajax works. My problem now is that I can't get that object method to work.

function myAjax({
  type,
  url,
  success
}) {
  var suc = "";
  typeof type === "undefined" ? type = "GET" : type = type;

  var req = new XMLHttpRequest();
  req.onreadystatechange = function() {
    if (this.readyState == 4 && this.status == 200) {
      suc = this.responseText;
      //alert(this.responseText);
    }
  };
  req.open(type, url, false);
  req.setRequestHeader("Content-type", "application/x-www-form-urlencoded ");
  req.send("fname=chijioke&lname=francis");

  function success(suc) {}
  }




  myAjax({
    type: "post",
    url: "page.html",
    success: function(e) {
      alert(e);
    }
  });

I want to do something similar to this jQuery ajax call

$.ajax({
  type: "post",
  url: "index",
  data: {
    id: id
  },
  success: function(feedback) {
    alert(feedback);
  }
});

I need to get the responseText through the success function but it is not working. I want this to work like that of jQuery ajax success, this is really for learning purpose.

Answer 1

What you are trying to do is called a callback function. Rather than declaring a function inside of your function, you should be calling the function being passed to it.

so instead of

    function success(suc) {}

Try doing

    success(suc);

https://codeburst.io/javascript-what-the-heck-is-a-callback-aba4da2deced Here's a guide I found on the topic.

Answer 2

what you are trying to do is actually pretty common - callback functions. You pass a function as a parameter and simply call it inside.

In your implementation, you are doing

function success(suc){}

This is actually just defining a method called success.. you need to do actually call the method like this

success(suc);

Also, your line where you check to see if the type is undefined won't typically evaluate to true, as you should be checking if

type === undefined //"undefined" != undefined

One more thing I would like to mention is that you are attempting to call the callback function at the end of your method, but you should actually be calling it in the onreadystatechange so that way it's being called when the request is completed, not when the method is completed.

    req.onreadystatechange = function(){
        if (this.readyState == 4 && this.status == 200){
            suc = this.responseText;
            success(suc);
        } 
    };

Answer 3

The "success" method is already declared when you execute myAjax, so do not need to declare it again in myAjax.

Try this:

function myAjax(type, url, success) {
    var suc = "";
    typeof type === "undefined" ? type = "GET" : type = type;

    var req = new XMLHttpRequest();
    req.onreadystatechange = function () {
        if (this.readyState == 4 && this.status == 200) {
            suc = this.responseText;
            success(suc); //Call to outside method
        }
    };
    req.open(type, url, false);
    req.setRequestHeader("Content-type", "application/x-www-form- 
    urlencoded ");
    req.send("fname=chijioke&lname=francis");
}