How can I replace this JQuery Ajax call with JavaScript's builtin functions? [duplicate]

Question

Possible Duplicate:
javascript ajax request without framework

How can I make the JQuery Ajax call below without using JQuery or any other library but a by only using JavaScript built-in functions?

var input = '{
    "age":100,
    "name":"foo",
    "messages":["msg 1","msg 2","msg 3"],
    "favoriteColor" : "blue",
    "petName" : "Godzilla",
    "IQ" : "QuiteLow"
}';
var endpointAddress = "http://your.server.com/app/service.svc";
var url = endpointAddress + "/FindPerson";
$.ajax({
    type: 'POST',
    url: url,
    contentType: 'application/json',
    data: input,
    success: function(result) {
        alert(JSON.stringify(result));
    }
});

MDN has a wonderful write-up on AJAX and what jQuery and other libraries do in the background for you. — Brad Christie
– Brad Christie, Commented Dec 18, 2012 at 13:30
What have you tried? Even Google finds the answer without anyone else having to copy/paste it for you. — Jeff Noel
– Jeff Noel, Commented Dec 18, 2012 at 13:36

John · Accepted Answer · 2012-12-18 13:51:17Z

3

jQuery does a good job normalizing all the little quirks and nuonces between browsers for ajax calls.

I'd suggest finding a stand-alone ajax library that can do the same thing but without all the extra overhead jQuery brings with it. Here are a few:

Reqwest
Fermata
Ajax (inspired by jquery/zepto)
Micro Ajax

answered Dec 18, 2012 at 13:51

John

3,9166 gold badges35 silver badges39 bronze badges

Sign up to request clarification or add additional context in comments.

1 Comment

Andreas Over a year ago

axios seems also to be promising nowadays

GajendraSinghParihar · Accepted Answer · 2012-12-18 13:36:49Z

2

Try this Example

First You have to create object of window.XMLHttpRequest or ActiveXObject (for IE)

if (window.XMLHttpRequest)
  {// code for IE7+, Firefox, Chrome, Opera, Safari
  xmlhttp=new XMLHttpRequest();
  }
else
  {// code for IE6, IE5
  xmlhttp=new ActiveXObject("Microsoft.XMLHTTP");
  }

Then You can send the request

xmlhttp.open("GET","ajax_info.txt",true);
xmlhttp.send();

At last You can Get the responce

xmlhttp.onreadystatechange=function()
  {
  if (xmlhttp.readyState==4 && xmlhttp.status==200)
    {
    document.getElementById("myDiv").innerHTML=xmlhttp.responseText;
    }
  }

answered Dec 18, 2012 at 13:36

GajendraSinghParihar

9,16911 gold badges40 silver badges67 bronze badges

Comments

MrCode · Accepted Answer · 2012-12-18 13:40:45Z

The code below does everything that your jQuery version does:

POST request with JSON as postdata
Sets the JSON Content-type header
Alerts the stringified response

Code:

  var httpRequest;

  function makeRequest(url, input) {
    if (window.XMLHttpRequest) { // Mozilla, Safari, ...
      httpRequest = new XMLHttpRequest();
    } else if (window.ActiveXObject) { // IE
      try {
        httpRequest = new ActiveXObject("Msxml2.XMLHTTP");
      } 
      catch (e) {
        try {
          httpRequest = new ActiveXObject("Microsoft.XMLHTTP");
        } 
        catch (e) {}
      }
    }

    if (!httpRequest) {
      alert('Giving up :( Cannot create an XMLHTTP instance');
      return false;
    }
    httpRequest.onreadystatechange = function(){
        if (httpRequest.readyState === 4) {
          if (httpRequest.status === 200) {
            alert(JSON.stringify(httpRequest.responseText));
          }
        }
    };

    httpRequest.open('POST', url);
    httpRequest.setRequestHeader('Content-Type', 'application/json');
    httpRequest.send(input);
  }

var input = '{
    "age":100,
    "name":"foo",
    "messages":["msg 1","msg 2","msg 3"],
    "favoriteColor" : "blue",
    "petName" : "Godzilla",
    "IQ" : "QuiteLow"
}';
var endpointAddress = "http://your.server.com/app/service.svc";
var url = endpointAddress + "/FindPerson";
makeRequest(url, input);

Taken partly from MDN.

Jeff Noel · Accepted Answer · 2012-12-18 13:40:37Z

-1

Take a look at Google's first answer over here.

answered Dec 18, 2012 at 13:40

Jeff Noel

7,6274 gold badges43 silver badges67 bronze badges

Collectives™ on Stack Overflow

How can I replace this JQuery Ajax call with JavaScript's builtin functions? [duplicate]

4 Answers 4

1 Comment

Comments

Comments

Comments

Linked

Hot Network Questions

Collectives™ on Stack Overflow

4 Answers 4

1 Comment

Comments

Comments

Comments

Linked

Related