11 introducing ajax


Published on

1 Comment
  • Be the first to like this

No Downloads
Total Views
On Slideshare
From Embeds
Number of Embeds
Embeds 0
No embeds

No notes for slide

11 introducing ajax

  1. 1. INTRODUCING JQUERYAJAXThe easy way to do Ajax
  2. 2. Processing client-side is much moresatisfying and efficient
  3. 3. Ajax is required to make things workclient-side•  Clearly we need server-side processing to persist things to a database
  4. 4. But Ajax has a lot of moving parts•  XMLHttpRequest, callbacks, readyState, status, etc., etc.
  5. 5. There are several ways to process Ajaxwith jQuery•  $(selector).load()•  $.get()•  $.post()•  $.getJSON()•  $.postJSON()•  $.ajax()
  6. 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. 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. 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. 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. 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. 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. 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. 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. 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. 15. You can read JSON data using the dottednotationvar name = student1.firstName + " " +! student1.lastName;!
  16. 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. 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
  1. A particular slide catching your eye?

    Clipping is a handy way to collect important slides you want to go back to later.