• Obtaining data from an external host
• Sending data to an external host
• Obtaining a feed from an external host
• Signing a request from an external host
• Authenticate OAuth requests from external hosts
• Managing Container Data
• Method Chain and Error Handling
• Global Event Handling
• Corresponding Options
• Related Links

All requests generated by jQuery.ajax are related to the proxy gadget server. When this happens, each and every dataType and shortcut can be used as is. This maintains the compatibility of jQuery.ajax and frees up cross-domain restrictions.

Obtaining data from an external host

jQuery.ajax can be used to obtain data from an external host. The data format can be specified by using dataType. Users may specify one of the following: text, html, xml, json, jsonp, script, feed, or data

  $.ajax({
    url: 'http://example.com/data.json',
    dataType: 'json',
    success: function(data, status) {
      console.log(data, status);
    },
    error: function(xhr, status, e) {
      console.info(xhr, status, e);
    }
  });

This can also be done using jQuery.get

  $.get('http://example.com/data.json', function(data, status) {}, 'json');

Data can be obtained in the JSON format by using jQuery.getJSON

  $.getJSON('http://example.com/data.json', function(data, status) {});

Furthermore, by using JSONP, scripts can be loaded and a callback can be requested

  $.getJSON('http://example.com/data.json?callback=?', function(data, status) {});

Data can be obtained and displayed in HTML format by using jQuery.fn.load

  <script type="text/javascript">
    $('#result').load('http://example.com/data.html');
  </script>
  <div id="result">loading ...</div>

Scripts can be loaded using jQuery.getScript

  $.getScript('http://example.com/data.js', function(data, status) {});

Moreover, jQuery.fn.append can also be used to load scripts, as well as to add script elements

  var script = $('<script />')
    .attr('type', 'text/javascript')
    .attr('charset', 'UTF-8')
    .attr('src', 'http://example.com/data.js');
  $('head', document).append(script);

Sending data to an external host

jQuery.ajax can be used to send data to an external host

  $.ajax({
    type: 'post',
    url: 'http://example.com/data.json',
    data: { comment: 'Say Hello!' },
    dataType: 'json',
    success: function(data, status) {
      console.log(data, status);
    },
    error: function(xhr, status, e) {
      console.info(xhr, status, e);
    }
  });

This can also be done using jQuery.post

  $.post('http://example.com/data.json', { comment: 'Say Hello!' },
    function(data, status) {}, 'json');

Obtaining a feed from an external host

Atom and RSS 2.0 feeds can be obtained using jQuery.ajax. The URL and dataType of the feed can also be specified.

  $.ajax({
    url: 'http://example.com/data.atom',
    dataType: 'feed',
    success: function(data, status) {
      console.log(data, status);
    },
    error: function(xhr, status, e) {
      console.info(xhr, status, e);
    }
  });

This can also be done using jQuery.get

  $.get('http://example.com/data.atom', function(data) {}, 'feed');

The same can be done using jQuery.getFeed

  $.getFeed('http://example.com/data.atom', function(data) {});

For more details please refer to AjaxFeed

Signing a request from an external host

A request from an external host can be signed using jQuery.ajax, and it can also be used for specifying the signed for oauth.

  $.ajax({
    url: 'http://example.com/data.json',
    dataType: 'json',
    oauth: 'signed',
    success: function(data, status) {
      console.log(data, status);
    },
    error: function(xhr, status, e) {
      console.info(xhr, status, e);
    }
  });

This can also be done using jQuery.get. The url and then the signed can be specified at this point

  $.get('http://example.com/data.json signed', function(data, status) {}, 'json');

The same can be done using jQuery.post. The url and then the signed can be specified at this point

  $.post('http://example.com/data.json signed', { comment: 'Say Hello!' },
    function(data, status) {}, 'json');

Requests can also be signed using jQuery.getJSON, jQuery.getScript, and jQuery.getFeed. Please refer to AjaxOAuth for more details.

Authenticate OAuth requests from external hosts

OAuth requests from external hosts can be authenticated by using jQuery.ajax and jQuery.oauth. The OAuth/Service@name can be specified to the oauth at this point.

  $.ajax({
    url: 'http://friendfeed-api.com/v2/feed/nakajiman',
    dataType: 'json',
    oauth: 'friendfeed',
    success: function(data, status) {
      console.info(data, status);
    },
    error: function(xhr, status, e) {
      if (status == 'oauth') 
        $.oauth('friendfeed');
      console.error(xhr, status, e);
    }
  });

This can also be done using jQuery.get. The url and then the OAuth/Service@name can be specified at this point.

  $.get('http://friendfeed-api.com/v2/feed/nakajiman friendfeed', function(data, status) {}, 'json');

The same can be done using jQuery.post. The url and then the OAuth/Service@name can be specified at this point.

  $.post('http://friendfeed-api.com/v2/entry friendfeed', { body: 'Say Hello!' },
    function(data, status) {}, 'json');

OAuth requests can also be authorized using jQuery.getJSON, jQuery.getScript, and jQuery.getFeed. Please refer to AjaxOAuth for more details.

Managing Container Data

Profiles, friend lists, and application data can be obtained using jQuery.ajax. At this point, specify the path to url and data to dataType.

  $.ajax({
    url: '/people/@viewer/@friends',
    data: {},
    dataType: 'data',
    success: function(data, status) {
      console.log(data, status);
    },
    error: function(xhr, status, e) {
      console.info(xhr, status, e);
    }
  });

This can also be done using jQuery.get

  $.get('/people/@viewer/@friends', function(data) {}, 'data');

The same can be done using jQuery.getData

  $.getData('/people/@viewer/@friends', function(data) {});

Application data can be saved using jQuery.ajax. At this point, specify the path to url and data to dataType.

  $.ajax({
    type: 'post',
    url: '/appdata/@viewer/@self',
    data: {
      comment: { text: 'Say Hello!', lastModified: new Date().getTime() },
      feeling: 'well',
      footprint: true
    },
    dataType: 'data',
    success: function() {},
    error: function(xhr, status, e) {
      console.error(xhr, status, e);
    }
  });

This can also be done using jQuery.post

  $.post('/appdata/@viewer/@self', {
    comment: { text: 'Say Hello!', lastModified: new Date().getTime() },
    feeling: 'well',
    footprint: true
  }, function() {}, 'data');

The same can be done using jQuery.postData

  $.postData('/appdata/@viewer/@self', {
    comment: { text: 'Say Hello!', lastModified: new Date().getTime() },
    feeling: 'well',
    footprint: true
  }, function() {});

For more details please refer to AjaxData

Method Chain and Error Handling

JSDeferred can be used to provide a method chain and error handling for jQuery.ajax and for all shortcuts.

  $.getJSON('http://example.com/foo.json').next(function(foo) {
    console.log('next', foo);
    return $.getJSON('http://example.com/bar.json').next(function(bar) {
      console.log('bar', bar);
      return [foo, bar];
    });
  }).next(function(foobar) {
    console.log('foobar', foobar[0], foobar[1]);
  }).error(function(status) {
    console.log('error', status);
  });

For more details please refer to AjaxDeferred

Global Event Handling

Global event handling can be carried out using jQuery.ajax

  $('#log')
    .ajaxStart(function() { console.log('ajaxStart'); })
    .ajaxSend(function(xhr, s) { console.log('ajaxSend', xhr, s); })
    .ajaxSuccess(function(xhr, s) { console.log('ajaxSuccess', xhr, s); })
    .ajaxError(function(xhr, s, e) { console.log('ajaxError', xhr, s, e); })
    .ajaxComplete(function(xhr, s) { console.log('ajaxComplete', xhr, s); })
    .ajaxStop(function() { console.log('ajaxStop'); });

Corresponding Options

These are the corresponding options for jQuery.ajax

The following can be added as an option to jQuery.ajax

Related Links

• Ajax/jQuery.ajax - jQuery JavaScript Library