Make an ajax POST request to a server through ajax/jQuery

Question

I am trying to send a post request through ajax to another domain and get a json response. The server is situated in my company premise and through the logs, I can see that it is sending response with a json.

Following is a sample of my tries:

1)

function makeRequest(strURL){
    $.get(strURL+"?callback=rest.draw_table_dyn", "{}", 
    function(resp){
        rest.draw_table_dyn(resp);
    });
}

2)

xmlhttpPost : function(strURL) {
var xmlHttpReq = false;
var self = this;
if (window.XMLHttpRequest) {
    self.xmlHttpReq = new XMLHttpRequest();
    }
else if (window.ActiveXObject) {
    self.xmlHttpReq = new ActiveXObject("Microsoft.XMLHTTP");
    }
self.xmlHttpReq.open('POST', strURL, true);
self.xmlHttpReq.setRequestHeader("Content-Type", "application/json");
self.xmlHttpReq.onreadystatechange = function() {
    rest.draw_table_dyn(self.xmlHttpReq.responseText);
}
self.xmlHttpReq.send(null);
}

However, following are the problems I encounter:

1) Always the server is hit with a "OPTIONS" request rather than a "GET" or "POST" request. I understood from this link(http://engin.bzzzt.biz/2010/01/25/cross-domain-xhr-access-control-preflight/) that it is a preflight request as per the standards.

But is it possible for me to make a POST request? I tried using $.post, $.ajax or even $.get, but to no avail.

2) The response data is empty. I require the data to populate the page with items. Is there a way to read the json? Currently I am getting only an empty string with the return status a 0.

I tried xmlHttpRequest, $.ajax, $.get and $.post to send the request and receive the json to no avail.

I read here(http://stackoverflow.com/questions/4221458/how-to-make-a-jsonp-call-to-an-api-using-jquery) about keeping the script in the tag. This also didn't worked for me. Any ideas what I am doing wrong here?

Might not be exactly what you are looking for, but it could be simpler to use php's curl to make the call? — MikeCruz13, May 15 '12 at 18:59
@MikeCruz13 I cannot use it for this. However, I will take up your suggestion while I use PHP. Thanks for the suggestion. — thiruvenkadam, Jun 23 '12 at 06:58

score 1 · Accepted Answer · edited Jun 20 '20 at 09:12

Currently, the only way to POST to another origin via Ajax is if the server responds with an appropriate CORS Allow-* header:

Access-Control-Allow-Origin: your.origin

Without such a header, the request will be refused by the browser due to the Same-Origin Policy.

In your 1st example, it appears you're attempting to use JSONP (?callback=...). Such requests are strictly limited to GET as they are made by appending a new <script> element to the page rather than via XMLHttpRequest:
<script src="http://remote.origin/resource?callback=rest.draw_table_dyn"></script>

CORS is also limited in browser support to those with either XMLHttpRequest Level 2 or XDomainRequest (IE8/9).

Beyond that, you're limited to having to create a server-side proxy that mediates between the browser and the remote server.

score 0 · Answer 2 · answered May 15 '12 at 19:06

0

It is possible to make a POST request using $.post and $.ajax.. Use $.ajax and provide functions for 'success' and 'failure'. In the 'error' function read the error message. This is should provide you a idea on why the ajax request is failing.

My guess is the ajax request is returning a 404 error..

P.S. $.get and $.post are shorthand versions of $.ajax ..

answered May 15 '12 at 19:06

Hareesh Narayanan

47
1
6

Ajax request always returns successfully alright. However, the response status is 0 rather than 200 and there are no json data visible through the response. – thiruvenkadam May 15 '12 at 19:28

score 0 · Answer 3 · edited May 23 '17 at 10:34

0

You can not make an ajax call to a page sitting outside your site (different domain) because of the Same Origin Policy

There are some workarounds available including using JSONP as datatype.

edited May 23 '17 at 10:34

Community

1
1

answered May 15 '12 at 19:09

Shyju

214,206
104
411
497

Unfortunately, it seems that jsonp is not supported by the server. I tried adding "?callback=?" along with the URL and still without any luck. – thiruvenkadam May 15 '12 at 19:30

Make an ajax POST request to a server through ajax/jQuery

3 Answers3