jQuery AJAX

1. jQuery AJAX

2. AJAX • AJAX = Asynchronous JavaScript and XML • Loading data in the background • Display on the Web page w/o reloading • jQuery simplifies writing AJAX code

3. jQuery load() • Simple and powerful AJAX method • Puts the returned data into the selected element • $(selector).load(URL,data,callback); • URL, required, the URL to load • Can add selector to end of URL • data, optional, key-value pairs to send • callback, optional, function to run when complete • function(responseTxt,statusTxt,xhr) {…}

4. jQuery load() • Callback function • function(response,status,xhr) • response contains the result data from request • status contains the status of the request • “success”, “notmodified”, “error”, “timeout”, “parsererror” • xhr contains the XMLHttpRequest object

5. jQuery get() • Creates an HTTP GET request • $.get(URL,data,callback,dataType) • URL, required • data, optional, key-value pairs sent to server • callback, optional • function(data,status,xhr) • dataType, optional, the data type expected of the server response • “xml”, “html”, “text”, “script”, “json”

6. jQuery post() • Creates an HTTP POST request • $.post(URL,data,callback,dataType) • URL, required • data, optional, data to send to server • callback, optional • function(data,status,xhr) • dataType, optional, the data type of the expected server response

7. jQueryajax() • Generic AJAX HTTP request • $.ajax({name:value,name:value,…}) • url: specifies the URL • type: specifies the type of HTTP request • content: specifies “this” for callback functions • success:function(result,status,xhr) runs if request is successful • error:function(result,status,xhr) runs if there is an error • complete:function(xhr,status) runs after request is finished (success and error)