JQuery get json response empty

Question

I am trying to get a simple jQuery call to run JSON. It seems that my error handler handler is not being processed. Firebug also shows the data body as empty.

A server is a very simple bit of code running under web.py. I tested the server by connecting to it using lynx and it downloads json data in order.

Here's jQuery:

$(document).ready(function() {
    $.ajax({
        url: 'http://localhost:8080/settings.json',
        cache: false,
        success: function(json){
            alert('json success ' + json);
        },
        error: function(xhr, textStatus, errorThrown) {
            alert(xhr.statusText);
        }
    });
});

JSON data is:
{"netmask": "255.255.0.0", "ipaddress": "192.168.1.153"}

Answer 1

You cannot send a request to another domain (this rule includes a different port) using XmlHttpRequest, it is blocked by the same origin policy .

- , . ... , .

Answer 2

- Apache, , . , :

http://senchabits.wordpress.com/2012/09/17/problem-accessing-json-data-from-a-local-data-source-is-not-permitted/

Answer 3

-.

Zepto, jQuery, , jQuery.

, -:

$.ajax({
    url: url,
    type: 'GET',
    dataType: 'jsonp',
    contentType: 'application/x-javascript',
    crossDomain: true,
    success: function (data, status) { /* ... */ }
    error: function () { /* ... */ }
    // ...

$. ajax $. ajaxJSONP crossdomain. Zepto $. AjaxJSONP:

  $.ajaxJSONP = function(options){
    var callbackName = 'jsonp' + (++jsonpID),
      script = document.createElement('script'),
      abort = function(){
        $(script).remove()
        if (callbackName in window) window[callbackName] = empty
        ajaxComplete('abort', xhr, options)
      },
      xhr = { abort: abort }, abortTimeout

    if (options.error) script.onerror = function() {
      xhr.abort()
      options.error()
    }

    window[callbackName] = function(data){
      clearTimeout(abortTimeout)
      $(script).remove()
      delete window[callbackName]
      ajaxSuccess(data, xhr, options)
    }

    serializeData(options)
    script.src = options.url.replace(/=\?/, '=' + callbackName)
    $('head').append(script)

    if (options.timeout > 0) abortTimeout = setTimeout(function(){
        xhr.abort()
        ajaxComplete('timeout', xhr, options)
      }, options.timeout)

    return xhr
  }

My workaround is very simple and consists of an interval called several times in the script.onload event handler to check if the callback function has been called.

This is my version of the $ function . ajaxJSONP :

$.ajaxJSONP = function(options){
    var called = false, // Flag to check that callback was called
        callbackName = 'jsonp' + (++jsonpID),
        script = document.createElement('script'),
        abort = function(){
            $(script).remove()
            if (callbackName in window) window[callbackName] = empty
            ajaxComplete('abort', xhr, options)
        },
        xhr = { abort: abort }, abortTimeout

    if (options.error) {
        script.onerror = function() {
            xhr.abort()
            options.error()
        };

        // IMPORTANT!!!
        script.onload = function () {
            var times = 0;

            var interval = setInterval(function () {
                // After 5 intervals, if the callback wasn't called, returns an error
                if (times++ == 5) {
                    clearInterval(interval);

                    if (!called) {
                        options.error();
                    }
                } else if (called) {
                    clearInterval(interval);
                }
            }, 100);
        };
    }

    window[callbackName] = function(data){
        // Setting the "called" flag to true
        called = true;
        clearTimeout(abortTimeout)
        $(script).remove()
        delete window[callbackName]
        ajaxSuccess(data, xhr, options)
    }

    serializeData(options)
    script.src = options.url.replace(/=\?/, '=' + callbackName)
    $('head').append(script)

    if (options.timeout > 0) abortTimeout = setTimeout(function(){
        xhr.abort()
        ajaxComplete('timeout', xhr, options)
    }, options.timeout)

    return xhr
}

Note. If you are interested in server-side behavior, see the beginning of this guide: http://phonegap.com/2011/07/20/making-jsonp-calls-with-zepto-on-android-device/