INTRODUCING JQUERY AJAX The easy way to do Ajax

Processing client-side is much more satisfying and efficient

Ajax is required to make things work client-side • Clearly we need server-side processing to persist things

to a database

But Ajax has a lot of moving parts • XMLHttpRequest, callbacks, readyState, status, etc., etc.

There are several ways to process Ajax with jQuery •  $('selector').load() •  $.get() •  $.post() •  $.getJSON() •  $.postJSON() •  $.ajax()

The ajax() call is the most complex •  $.ajax(settingsJSONObject); •  For example: $.ajax({!type: 'DELETE',!url: "Greendale/students/",!success: function() { alert('Deleted'); },!error: function() { alert('Oh noes!'); },!data: {! studentId: 334234,! name:'Annie Edison', ! age:'21', ! major:'undecided'},!timeout: 60000!});!

The load() call is the simplest • Calls a service and loads the response into the selector. • Response is expected to be HTML $('selector').load(url);!

$.get() and $.post() •  The most common methods •  Identical except the method they use to call the service •  To send an http GET request to a uri $.get(url);!•  To send an http POST request to a uri $.post(url);!

You usually have to send data to the server $.post(url, data);!• Querystring var data = 'firstName=Abed&lastName=Nadir&school=Greendale%20Community%20College';!•  JSON var data = {! firstName: 'Abed',! lastName: 'Nadir',! school: 'Greendale Community College'!};!

The serialize() function can help with preparing data to send to the server • Writing the code to convert a form with many fields is

time-consuming. Do this instead: var jsonForm = $('theForm').serialize();!

The callback function is used to process data returning from the server • Data returns in XML or JSON format $.get(url, sendData, function (data, status) {! // Do something with the response here!});!•  status can be one of

•  success!•  timeout!•  error!•  notmodified!•  parsererror!

The error function handles any errors returned from the server •  $.get(url, data, successful).error(errorFunction); • Without the error function, the get and post fail silently

JSON is simply a way to record ad-hoc JavaScript objects • You don't need to create a class to have objects. •  Just declare them like so: var student1 = {! firstName: Abed, lastName: Nadir,! school: 'Greendale Community College'!};!• Rules:

•  Free-form layout (line breaks don't matter) •  Bounded by hitchcocks •  Comma-separated •  Strings must be quoted to preserve whitespace

There are two main ways to process JSON from an Ajax call • Converting the string to JSON manually $.get(url, dataIn, function (data) {! var jsondata = JSON.parse(data);! // Do something with the JSON object!});!• Using $.getJSON() and $.postJSON() $.getJSON(url, dataIn, function (data) {! // Do something with the JSON object!});!• Same exactly except that $.getJSON() and $.postJSON()

expect a JSON object to be returned

You can read JSON data using the dotted notation var name = student1.firstName + " " +! student1.lastName;!

JSON objects often contain other JSON objects

var students = {! student1: {! firstName: Abed, ! lastName: Nadir,! school: 'Greendale Community College'! },! student2: {! firstName: Troy, ! lastName: Barnes,! school: 'Greendale Community College'! }!};!

Conclusion •  There are several ways to make Ajax calls with jQuery:

•  $('selector').load(url); •  $.get(url); •  $.post(url); •  $.getJSON(url); •  $.postJSON(url); •  $.ajax();

• You send data with these functions in QueryString or JSON format.

• Serialize helps to convert forms data into JSON •  load() populates a selector with html •  $.get() and $.post() are the most common •  $.getJSON() and $.postJSON() expect to get JSON back