AJAX w/ jQuery

AJAX defined

  • AJAX = asynchronous JavaScript and XML
  • AJAX = asynchronous JavaScript and XMLHttpRequest (XHR)

High Level AJAX

  • $.post()
    • Load data (xml, json, script, or html) via a POST request
  • $.get()
    • Load data (xml, json, script, or html) via a GET request
  • $.getJSON()
    • Loads JSON using a GET request
  • .load()
    • Request html and inject into DOM

Limitations

  • Lack of control for requests
  • No callback on Error
  • No callback on Completion

$.ajax()

$.ajax({
	url: "mydomain.com/url",
	type: "POST",
	cache: "false",
	dataType: "json", //xml/html/script/
	data: "foo=bar&bar=foo", // map or string
	contentType: "application/json",
	
	complete: function() {
		//called when complete
	},
	success: function() {
		//called when successful
	},
	error: function() {
		//called when there is an error
	}
});
					

Example

  • Basic Form Handling
    • Hijack Form Submit
    • Serialize Inputs
    • Simulate Form Submission with $.ajax()
  • Advanced Form Handling
    • Redirect Form Action
    • Handle Requests on Error, Success, and Complete
    • Simulate Advanced POSTS with $.ajax()

Questions?