We have been working on JQuery-Core, JQuery-DOM, JQuery-CSS-JavaScript and JQuery-Events-Effects yet. Here I am going to explain JQuery-Ajax.
Ok let's start...
6. Ajax
6.1 loadIfModified(String,Map,Function)
loadIfModified(String url, Map params, Function callback)
returns jQuery
Load HTML from a remote file and inject it into the DOM, only if it's been modified by the server.
Example:
$("#feeds").loadIfModified("feeds.html");
HTML:
<div id="feeds"></div>
Result:
<div id="feeds"><b>45</b> feeds found.</div>
6.2 load(String,Object,Function)
load(String url, Object params, Function callback) returns
jQuery
Load HTML from a remote file and inject it into the DOM.
Note: Avoid to use this to load scripts, instead use $.getScript. IE strips script tags when there
aren't any other characters in front of it.
Example:
$("#feeds").load("feeds.html");
HTML:
<div id="feeds"></div>
Result:
<div id="feeds"><b>45</b> feeds found.</div>
Example:
Same as above, but with an additional parameter and a callback that is executed when the data
was loaded.
$("#feeds").load("feeds.html",
{limit: 25},
function() { alert("The last 25 entries in the feed have been loaded"); }
);
6.3 serialize()
serialize() returns String
Serializes a set of input elements into a string of data. This will serialize all given elements.
A serialization similar to the form submit of a browser is provided by the
[http://www.malsup.com/jquery/form/ Form Plugin]. It also takes multiple-selects into account,
while this method recognizes only a single option.
Example:
Serialize a selection of input elements to a string
$("input[@type=text]").serialize();
HTML:
<input type='text' name='name' value='John'/>
<input type='text' name='location' value='Boston'/>
6.4 ajaxStart(Function)
ajaxStart(Function callback) returns jQuery
Attach a function to be executed whenever an AJAX request begins and there is none already
active.
Example:
Show a loading message whenever an AJAX request starts (and none is already active).
$("#loading").ajaxStart(function(){
$(this).show();
});
6.5 ajaxStop(Function)
ajaxStop(Function callback) returns jQuery
Attach a function to be executed whenever all AJAX requests have ended.
Example:
Hide a loading message after all the AJAX requests have stopped.
$("#loading").ajaxStop(function(){
$(this).hide();
});
6.6 ajaxComplete(Function)
ajaxComplete(Function callback) returns jQuery
Attach a function to be executed whenever an AJAX request completes.
The XMLHttpRequest and settings used for that request are passed as arguments to the callback.
Example:
Show a message when an AJAX request completes.
$("#msg").ajaxComplete(function(request, settings){
$(this).append("<li>Request Complete.</li>");
});
6.7 ajaxSuccess(Function)
ajaxSuccess(Function callback) returns jQuery
Attach a function to be executed whenever an AJAX request completes successfully.
The XMLHttpRequest and settings used for that request are passed as arguments to the callback.
Example:
Show a message when an AJAX request completes successfully.
$("#msg").ajaxSuccess(function(request, settings){
$(this).append("<li>Successful Request!</li>");
});
6.8 ajaxError(Function)
ajaxError(Function callback) returns jQuery
Attach a function to be executed whenever an AJAX request fails.
The XMLHttpRequest and settings used for that request are passed as arguments to the callback.
A third argument, an exception object, is passed if an exception occured while processing the
request.
Example:
Show a message when an AJAX request fails.
$("#msg").ajaxError(function(request, settings){
$(this).append("<li>Error requesting page " + settings.url + "</li>");
});
6.9 ajaxSend(Function)
ajaxSend(Function callback) returns jQuery
Attach a function to be executed before an AJAX request is sent.
The XMLHttpRequest and settings used for that request are passed as arguments to the callback.
Example:
Show a message before an AJAX request is sent.
$("#msg").ajaxSend(function(request, settings){
$(this).append("<li>Starting request at " + settings.url + "</li>");
});
6.10 $.get(String,Map,Function)
$.get(String url, Map params, Function callback) returns
XMLHttpRequest
Load a remote page using an HTTP GET request.
This is an easy way to send a simple GET request to a server without having to use the more
complex $.ajax function. It allows a single callback function to be specified that will be executed
when the request is complete (and only if the response has a successful response code). If you
need to have both error and success callbacks, you may want to use $.ajax.
Example:
$.get("test.cgi");
Example:
$.get("test.cgi", { name: "John", time: "2pm" } );
Example:
$.get("test.cgi", function(data){
alert("Data Loaded: " + data);
});
Example:
$.get("test.cgi",
{ name: "John", time: "2pm" },
function(data){
alert("Data Loaded: " + data);
}
);
6.11 $.getIfModified(String,Map,Function)
$.getIfModified(String url, Map params, Function callback)
returns XMLHttpRequest
Load a remote page using an HTTP GET request, only if it hasn't been modified since it was last
retrieved.
Example:
$.getIfModified("test.html");
Example:
$.getIfModified("test.html", { name: "John", time: "2pm" } );
Example:
$.getIfModified("test.cgi", function(data){
alert("Data Loaded: " + data);
});
Example:
$.getifModified("test.cgi",
{ name: "John", time: "2pm" },
function(data){
alert("Data Loaded: " + data);
}
);
6.12 $.getScript(String,Function)
$.getScript(String url, Function callback) returns
XMLHttpRequest
Loads, and executes, a remote JavaScript file using an HTTP GET request.
Warning: Safari <= 2.0.x is unable to evaluate scripts in a global context synchronously. If you load
functions via getScript, make sure to call them after a delay.
Example:
$.getScript("test.js");
Example:
$.getScript("test.js", function(){
alert("Script loaded and executed.");
});
6.13 $.getJSON(String,Map,Function)
$.getJSON(String url, Map params, Function callback) returns
XMLHttpRequest
Load JSON data using an HTTP GET request.
Example:
$.getJSON("test.js", function(json){
alert("JSON Data: " + json.users[3].name);
});
Example:
$.getJSON("test.js",
{ name: "John", time: "2pm" },
function(json){
alert("JSON Data: " + json.users[3].name);
}
);
6.14 $.post(String,Map,Function)
$.post(String url, Map params, Function callback) returns
XMLHttpRequest
Load a remote page using an HTTP POST request.
Example:
$.post("test.cgi");
Example:
$.post("test.cgi", { name: "John", time: "2pm" } );
Example:
$.post("test.cgi", function(data){
alert("Data Loaded: " + data);
});
Example:
$.post("test.cgi",
{ name: "John", time: "2pm" },
function(data){
alert("Data Loaded: " + data);
}
);
6.15 $.ajaxTimeout(Number)
$.ajaxTimeout(Number time) returns undefined
Set the timeout in milliseconds of all AJAX requests to a specific amount of time. This will make all
future AJAX requests timeout after a specified amount of time.
Set to null or 0 to disable timeouts (default).
You can manually abort requests with the XMLHttpRequest's (returned by all ajax functions)
abort() method.
Deprecated. Use $.ajaxSetup instead.
Example:
Make all AJAX requests timeout after 5 seconds.
$.ajaxTimeout( 5000 );
6.16 $.ajaxSetup(Map)
$.ajaxSetup(Map settings) returns undefined
Setup global settings for AJAX requests.
See $.ajax for a description of all available options.
Example:
Sets the defaults for AJAX requests to the url "/xmlhttp/", disables global handlers and uses POST
instead of GET. The following AJAX requests then sends some data without having to set anything
else.
$.ajaxSetup( {
url: "/xmlhttp/",
global: false,
type: "POST"
} );
$.ajax({ data: myData });
6.17 $.ajax(Map)
$.ajax(Map properties) returns XMLHttpRequest
Load a remote page using an HTTP request.
This is jQuery's low-level AJAX implementation. See $.get, $.post etc. for higher-level abstractions
that are often easier to understand and use, but don't offer as much functionality (such as error
callbacks).
$.ajax() returns the XMLHttpRequest that it creates. In most cases you won't need that object to
manipulate directly, but it is available if you need to abort the request manually.
'''Note:''' If you specify the dataType option described below, make sure the server sends the
correct MIME type in the response (eg. xml as "text/xml"). Sending the wrong MIME type can lead
to unexpected problems in your script. See [[Specifying the Data Type for AJAX Requests]] for
more information.
Supported datatypes are (see dataType option):
"xml": Returns a XML document that can be processed via jQuery.
"html": Returns HTML as plain text, included script tags are evaluated.
"script": Evaluates the response as Javascript and returns it as plain text.
"json": Evaluates the response as JSON and returns a Javascript Object
$.ajax() takes one argument, an object of key/value pairs, that are used to initalize and handle the
request. These are all the key/values that can be used:
(String) url - The URL to request.
(String) type - The type of request to make ("POST" or "GET"), default is "GET".
(String) dataType - The type of data that you're expecting back from the server. No default: If the
server sends xml, the responseXML, otherwise the responseText is passed to the success
callback.
(Boolean) ifModified - Allow the request to be successful only if the response has changed since
the last request. This is done by checking the Last-Modified header. Default value is false, ignoring
the header.
(Number) timeout - Local timeout in milliseconds to override global timeout, eg. to give a single
request a longer timeout while all others timeout after 1 second. See $.ajaxTimeout() for global
timeouts.
(Boolean) global - Whether to trigger global AJAX event handlers for this request, default is true.
Set to false to prevent that global handlers like ajaxStart or ajaxStop are triggered.
(Function) error - A function to be called if the request fails. The function gets passed tree
arguments: The XMLHttpRequest object, a string describing the type of error that occurred and an
optional exception object, if one occured.
(Function) success - A function to be called if the request succeeds. The function gets passed one
argument: The data returned from the server, formatted according to the 'dataType' parameter.
(Function) complete - A function to be called when the request finishes. The function gets passed
two arguments: The XMLHttpRequest object and a string describing the type of success of the
request.
(Object|String) data - Data to be sent to the server. Converted to a query string, if not already a
string. Is appended to the url for GET-requests. See processData option to prevent this automatic
processing.
(String) contentType - When sending data to the server, use this content-type. Default is
"application/x-www-form-urlencoded", which is fine for most cases.
(Boolean) processData - By default, data passed in to the data option as an object other as string
will be processed and transformed into a query string, fitting to the default content-type
"application/x-www-form-urlencoded". If you want to send DOMDocuments, set this option to false.
(Boolean) async - By default, all requests are sent asynchronous (set to true). If you need
synchronous requests, set this option to false.
(Function) beforeSend - A pre-callback to set custom headers etc., the XMLHttpRequest is passed
as the only argument.
Example:
Load and execute a JavaScript file.
$.ajax({
type: "GET",
url: "test.js",
dataType: "script"
})
Example:
Save some data to the server and notify the user once its complete.
$.ajax({
type: "POST",
url: "some.php",
data: "name=John&location=Boston",
success: function(msg){
alert( "Data Saved: " + msg );
}
});
Example:
Loads data synchronously. Blocks the browser while the requests is active. It is better to block
user interaction by other means when synchronization is necessary.
var html = $.ajax({
url: "some.php",
async: false
}).responseText;
Example:
Sends an xml document as data to the server. By setting the processData option to false, the
automatic conversion of data to strings is prevented.
var xmlDocument = [create xml document];
$.ajax({
url: "page.php",
processData: false,
data: xmlDocument,
success: handleResponse
});
Well...
We have learned some practical JQuery APIs so far. I'm going to join JQuery with Spring MVC including a very powerful JQuery Plugin (JQuery Grid) using JQuery Ajax and JSON(JavaScript Object Notation) in a simple sample in my next post. You should get expert enough on JQuery to get ready for that High-Tech sample. So review JQuery courses and samples as mach as you can please.
all rights reserved by Mostafa Rastgar and Programmer Assistant weblog
