jQuery Tutorial Reading Notes Part III (Ajax, Effects)

This is a reading note for jQuery Tutorial on TutorialsPoint.com, including useful functions/concepts for web development using jQuery. Please note I only pick parts of core concept which I will use most often.

This reading note is based on jQuery 1.3.2.

Note: All tips that is written by book will has a sign near it.
All code example in this post comes from offical documents.

Ajax

AJAX means Asynchromous JavaScript and XML. It can help load data from server without having to refresh whole page.

XX.load(URL, Optional:data, Optional:callback) is used to load data:

  • URL: can be CGI, ASP, JSP or PHP script which generate data from database.
  • data: Optional. if this is ommitted, GET method is used. If specified, POST method is used.
  • callback: callback function to deal with data after loading. The first parameter passed to this function is the response text received from the server and second parameter is status code.

    Get JSON Data

XXX.getJSON(URL, Optional:data, Optional:callback) is used to get JSON string:

  • URL: the server-side source which can be reach via GET method.
  • data: Optional. You can pass name/value pair to do sring query.
  • callback: Optional. Call back function to deal with data after loading. The first parameter is the JSON string which is passed back based on request. The second parameter is the status code.

Pass Data to Server

You can use data parameter to pass data to server via any ajax call. For example:

1
2
var name = $('#name').val();
$('#stage').load('/jquery/result.php', {'name':name});

jQuery Ajax Methods and Events

Events

Show or Hiding or Toggle Elements

XXX.show(speed,Optional:callback) is used to show the elements. speed can be slow, normal, fast or any milliseconds. callback is optional. You run this function after the animation completes.

XXX.hide(speed,Optional:callback) is the same as above:

1
$('#testDIV').hide(10000);

XXX.toggle(Optional:speed, Optional: callback) is used to toggel elements.

Other jQuery Events