Your SlideShare is downloading. ×
  • Like
11 introducing ajax
Upcoming SlideShare
Loading in...5

Thanks for flagging this SlideShare!

Oops! An error has occurred.


Now you can save presentations on your phone or tablet

Available for both IPhone and Android

Text the download link to your phone

Standard text messaging rates apply

11 introducing ajax



  • Full Name Full Name Comment goes here.
    Are you sure you want to
    Your message goes here
    Be the first to comment
    Be the first to like this
No Downloads


Total Views
On SlideShare
From Embeds
Number of Embeds



Embeds 0

No embeds

Report content

Flagged as inappropriate Flag as inappropriate
Flag as inappropriate

Select your reason for flagging this presentation as inappropriate.

    No notes for slide


  • 1. INTRODUCING JQUERYAJAXThe easy way to do Ajax
  • 2. Processing client-side is much moresatisfying and efficient
  • 3. Ajax is required to make things workclient-side•  Clearly we need server-side processing to persist things to a database
  • 4. But Ajax has a lot of moving parts•  XMLHttpRequest, callbacks, readyState, status, etc., etc.
  • 5. There are several ways to process Ajaxwith jQuery•  $(selector).load()•  $.get()•  $.post()•  $.getJSON()•  $.postJSON()•  $.ajax()
  • 6. 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!});!
  • 7. 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);!
  • 8. $.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);!
  • 9. You usually have to send data to theserver$.post(url, data);!•  Querystringvar data =firstName=Abed&lastName=Nadir&school=Greendale%20Community%20College;!•  JSONvar data = {! firstName: Abed,! lastName: Nadir,! school: Greendale Community College!};!
  • 10. The serialize() function can help withpreparing 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();!
  • 11. The callback function is used to processdata 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!
  • 12. The error function handles any errorsreturned from the server•  $.get(url, data, successful).error(errorFunction);•  Without the error function, the get and post fail silently
  • 13. JSON is simply a way to record ad-hocJavaScript objects•  You dont 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 dont matter) •  Bounded by hitchcocks •  Comma-separated •  Strings must be quoted to preserve whitespace
  • 14. There are two main ways to processJSON 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
  • 15. You can read JSON data using the dottednotationvar name = student1.firstName + " " +! student1.lastName;!
  • 16. JSON objects often containother JSON objectsvar students = {! student1: {! firstName: Abed, ! lastName: Nadir,! school: Greendale Community College! },! student2: {! firstName: Troy, ! lastName: Barnes,! school: Greendale Community College! }!};!
  • 17. 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