Why Choose jQuery for ajax?

• Helps with cross browser compatability
• Easier and cleaner than javascript XMLHttpRequest
• Capability for some cross site ajax

jQuery Ajax API

Basic ajax

Basic ajax structure

$.ajax("url", {
  option : value,
  option : value,
  option : value,
  ...
});

Example

Example

$.ajax("http://www.example.com/foo.php", {
  data: { username: 'foobar', password: 'abcdef' },   // "password=abcdef"
  success: loginSuccess,
  error: loginFailure,
  complete: dismissDialog // will be called in either case
});

Turn it to a post request.

Default request is get. Make it a post by adding type: "post" to options.

Reminder of Basic ajax structure

$.ajax("url", {
  option : value,
  ...
});

Example Post request

Example

$.ajax("http://www.example.com/foo.php", {
  type: "post",
  success: loginSuccess,
  ...
});

jQuery also has $.get and $.post options if you are too lazy to include this option.

Ajax across domains

For security reason we are not allowed to perform ajax requests to other domains. This causes a problem: Other domains have all the cool data!

There are 2 ways to work around this

Option 1: PHP go betwen

Make a php page on your own domain that acts as a go between for the api you want to use.

Option 2: "cooperative cheat"

JQuery Ajax and JSONP requets (when available)
Just add dataType: 'jsonp' as an ajax option.

Ajax for JSONP friendly web services.

JSONP - Basically involves an agreement between developers that we want to be able to share data so lets use a script workaround.

Full explaination on INFO 343 lecture slides link

Useful APIs for JSONP include

• Twitter API link
• Yelp API link
• Google API link

Example for Twitter API

// get the value from the text box with an id of search
var query = $('#search').val();  
	
$.ajax('https://search.twitter.com/search.json', {
	data: { 'q': query},
	dataType: 'jsonp', 
	success: injectTweets,
	error: ajaxError
});

/* When given json information as data inject 
that information into the page. Assumes there exists
a ul in the page with an id of results. */
function injectTweets(data) {
	var res = data.results; // get all the results of the request.
	var dl = $('#results');
	dl.empty();
	
	// display each result on the page. 
	$.each(res, function() {
		// get the username and tweet from the json data
		var dt = $("<dt>").text(this["from_user"] + " says:");
		var dd = $("<dd>").text(this["text"]);
		dl.append(dt, dd);
	});
}

Basic Twitter Example