Question

I’m trying to send an XMLHttpRequest object to my Rails server but the headers are causing my function to stop. Here are my observations:

1. When I comment out the 3 lines of code that set the headers, then xhr.readyState will eventually equal 4 (alert boxes within the anonymous function fire off).

2. If any one of the 3 header lines are uncommented, then the xhr object never changes state (none of the alert boxes ever fire off).

   function saveUserProfile(){
   
     var user_email = $('#userEmail_box').val();           
     var xhr = new XMLHttpRequest();
   
     xhr.onreadystatechange=function(){
       if (xhr.readyState==4 && xhr.status==200)
       {
           alert("Yes: " + xhr.readyState);
       }
       alert("No: " + xhr.readyState);     
     }
   
     var method = 'POST';
     var params = 'userEmail=user_email';
     var url = 'http://localhost:3000/xhr_requests.json';
     var async = true;
   
     //Need to send proper header information with POST request
     xhr.setRequestHeader('Content-type', 'application/x-www-form-urlencoded');
     xhr.setRequestHeader('Content-length', params.length);
     xhr.setRequestHeader('Connection', 'close');
   
     xhr.open(method, url, async);
     xhr.send(params);
   }
   

My three questions are:

1. What do I need to change in the code above in order to send data through the POST method?

2. I’m under the impression that the POST method requires some headers to be sent but am not clear about which ones though “xhr.setRequestHeader(‘Content-type’, ‘application/x-www-form-urlencoded’);” seems to be one that is often mentioned in references. Can somebody help me understand a) why headers need to be sent and b) which ones need to be sent?

3. I’m using a rails server and am developing locally. Ultimately, this code will be executed on the client side of a mobile device which will go to a hosted rails server for passing and receiving data. Are there limitations with using the POST method with a rails server? Keep in mind that I plan to use JSON when sending information to the client from the server.

Thanks!

UPDATE: The headers should come AFTER the opening the xhr request but BEFORE sending it:

    xhr.open(method, url, async);        

    xhr.setRequestHeader('Content-type', 'application/x-www-form-urlencoded');
    xhr.setRequestHeader('Content-length', params.length);
    xhr.setRequestHeader('Connection', 'close');

    xhr.send(params);

Hope this post saves somebody else 4 hours.

Answer 1

Does your web page with the JavaScript code also live on localhost:3000? If not, this is considered a cross-domain request, and your server will need to return special headers. So you have two options:

1) Host the web page on the same domain as the server, which will make this a same-domain request.

2) Have your server return the appropriate CORS headers. You can learn more about CORS here: http://www.html5rocks.com/en/tutorials/cors/