Jquery.form and cross-domain queries

Question

It's hard for me to make jquery.form with cross-domain query. I have problems with Firefox and Chrome (not even trying IE).

Explanation: our entire site is located at http://www.mysite.com . However, my contact form is located on another server that http://contact.mysite.com links to . I thought that including it in a subdomain would circumvent the problems associated with cross-domain requests, but apparently this did not happen. http://contact.mysite.com is implemented in Sinatra .

My javascript setting does not represent anything. The form action points to http://contact.mysite.com , and the POST method:

<form id="contact" action="http://contact.mysite.com/" method="post">

jquery.form is configured with ajaxForm call :

$(document).ready(function() {

  $('#contact').ajaxForm({
    success: function() { $('#success').fadeIn("slow"); },
    error: function() {  $('#error').fadeIn("slow"); }
  });

});

The first problem I ran into was with Firefox 3.5 - apparently it is sending an OPTIONS request waiting for a specific response from the server. I used this question to configure my Sinatra application to do what was expected (it seems that more recent versions of Sinatra include the option verb):

require 'rubygems'
require 'sinatra'
require 'pony'

# patch sinatra so it handles options requests - see /questions/347218/sinatra-options-http-verb
configure do
  class << Sinatra::Base
    def options(path, opts={}, &block)
      route 'OPTIONS', path, opts, &block
    end
  end
  Sinatra::Delegator.delegate :options
end

# respond to options requests so that firefox can do cross-domain ajax requests
options '/' do
  response['Access-Control-Allow-Origin'] = '*'
  response['Access-Control-Allow-Methods'] = 'POST'
  response['Access-Control-Max-Age'] = '2592000'
end

post '/' do
  # use Pony to send an email
  Pony.mail(...)
end

With jQuery 1.4.3, I saw an OPTIONS request in firebug, followed by a POST request (status 200. The message was sent). With jquery 1.3.2 or 1.5, only the OPTIONS request was shown (the message was not sent).

However, the callback erroralways starts with all versions of jquery I've tried. I traced this to a call $.ajax(...), so I'm not sure if this problem comes from jquery.form or jquery.

:

$('#contact').ajaxForm({
  success: function() { $('#success').fadeIn("slow"); },
  error: function(jqXHR, textStatus, errorThrown) {
    console.log(jqXHR.status);
    console.log(jqXHR.statusText);
  }
}); 

jQuery 1.4.3 ( OPTIONS POST 200):

0
(empty string)

jquery 1.5 ( OPTIONS 200, POST )

302
error

.

• , ?
• - -?

.

Answer 1

AJAX (UPD: , CORS), JSONP. JSONP -, POST, get :

$('#contact').ajaxForm({
  success: function() { $('#success').fadeIn("slow"); },
  error: function() {  $('#error').fadeIn("slow"); },
  dataType: 'jsonp'
});

, jsonp, success . : response.write(request.callback + '(' + result.to_json + ')')

---

jQuery ajaxForm. , :

$('form').submit(function() {
  var url = $(this).attr('action')
  var params = $(this).serialize()
  $.getJSON(url + '?' + params + "&callback=?", function(data) {
    // success
  })
  return false
});

Answer 2

, JSONP - AJAX, .

http://en.wikipedia.org/wiki/JSON#JSONP

Answer 3

URL- - , , - HttpRequest cURL. , , ajax URL- , URL- HttpRequest/cURL .

Answer 4

, , , , . , :

Javascript ( jquery , jquery.form):

$(document).ready(function() {
  $('#contact').submit(function() {
    $('#success').fadeOut("slow");
    $('#bademail').fadeOut("slow");

    var url = $(this).attr('action')
    var params = $(this).serialize()
    $.getJSON(url + '?' + params + "&callback=?", function(data) {
      if(data == true) { // success
        $('#success').fadeIn("slow");
        $('#contact')[0].reset();
      } else { // error
        $('#bademail').fadeIn("slow");
      }
    });

    return false;
  });
});

With Sinatra, I used the sinatra-jsonp gem . I do the get return action "true" or "false" depending on whether emails can be sent (for example, for an invalid email address).

require 'rubygems'
require 'sinatra'
require 'sinatra/jsonp'
require 'pony'


get '/' do

  # check for blanks, etc
  return jsonp false unless fields_valid(params)

  Pony.mail(
    ...
  )

  return jsonp true

end