11 introducing ajax
Upcoming SlideShare
Loading in...5
×
 

Like this? Share it with your network

Share

11 introducing ajax

on

  • 859 views

 

Statistics

Views

Total Views
859
Views on SlideShare
859
Embed Views
0

Actions

Likes
0
Downloads
7
Comments
0

0 Embeds 0

No embeds

Accessibility

Categories

Upload Details

Uploaded via as Adobe PDF

Usage Rights

© All Rights Reserved

Report content

Flagged as inappropriate Flag as inappropriate
Flag as inappropriate

Select your reason for flagging this presentation as inappropriate.

Cancel
  • Full Name Full Name Comment goes here.
    Are you sure you want to
    Your message goes here
    Processing…
Post Comment
Edit your comment

11 introducing ajax Presentation Transcript

  • 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