jQuery Ajax POST unsuccessful

Question

I'm unable to successfully post using jquery's ajax functionality.

URL of the running page is http://localhost:9999, URL of the target (web service) is http://localhost:8080. No the ports aren't the same, they are 9999 and 8080 respectively.

Below is the request and jquery ajax code.

Request:

OPTIONS /profile/set_member HTTP/1.1
Host: localhost:8080
User-Agent: Mozilla/5.0 (Windows; U; Windows NT 6.1; en-US; rv:1.9.2.8) Gecko/20100722 Firefox/3.6.8
Accept: text/html,application/xhtml+xml,application/xml;q=0.9,*/*;q=0.8
Accept-Language: en-us,en;q=0.5
Accept-Encoding: gzip,deflate
Accept-Charset: ISO-8859-1,utf-8;q=0.7,*;q=0.7
Keep-Alive: 115
Connection: keep-alive
Origin: http://localhost:9999
Access-Control-Request-Method: POST

jQuery ajax code:

$.ajax({ 
        type: "POST", url: "http://localhost:8080/profile/set_member", 
        contentType: "application/json", data: member, 
        error: function(){ alert('Update failed!'); }, 
        processData: false, 
        success: function(){ alert('Update successful!'); }
});

Answer 1

What handler gets called? The success or error handler? Can you elaborate what "doesn't work" means?

You probably want alert more information in your error handler, like so:

error: function(XMLHttpRequest, textStatus, errorThrown) {
   //console.log is better at least for debugging. You can change this back to alert 
   //when your code goes into production
   console.log("Update unsuccessful. Status: ", textStatus, " error thrown: ", errorThrown);
}

textStatus should give you an idea as to what the problem could be. Possible values are "timeout", "error", "notmodified" and "parsererror". Once you figure out the actual error, please update the question.

Also if you have Firebug check the Net tab to see the request and the response. A few common sources of errors:

• Violating same-origin policy. You cannot make an AJAX to a different URL from the parent page.
• Server-side errors. If your server returns something like a 500 response code, the request will fail.
• Parsing errors. If you're expecting a specific response format like json or xml, and if the response is not in that format, the AJAX request will be unsuccessful.

Answer 2

This is an issue with cross-domain ajax calls. Basically (at least in Firefox), a POST request is converted to an OPTIONS request for security reasons. I ran into the same exact thing last night, posted here.

http://stackoverflow.com/questions/3578614/wcf-ajax-call-not-working-with-jquery-ajax

I had an $.ajax call I was making on localhost:23485, to a web service on http://localhost hosted in IIS. Because they are different domains, cross-domain kicked in and made things difficult.

Answer 3

Make a proxy on the same domain you are calling the ajax, e.g. in PHP:

<?php /* get.php */
    $url = $_GET["Url"];
    echo file_get_contents($url);
?>

Make your ajax call:

$.ajax({ url: "get.php?Url=realurl.com" });

That's one workaround.

Page that uses this method: http://ryuukai.ryuushin.net/Manga/

Answer 4

Yep, as another poster already pointed out, it's a SOP (Same Origin Policy) problem. Check out this handy table on determination rules for SOP:

en.wikipedia.org/ wiki/Same_origin_policy

Note that same protocol and host but different port will fail. What a bummer.

I ran into this same problem trying to call a servlet in tomcat running on port 8080 from apache. I got around it by installing a tomcat connector, jk_mod. Overview and instructions here:

http://www3.ntu.edu.sg/home/ehchua/programming/howto/apache_tomcat_howto.html

Hope this comes in handy to someone.