jQuery Question: jQuery AJAX

jQuery has a rich library of methods (functions) for AJAX development.
AJAX = Asynchronous JavaScript and XML.

AJAX is a technique for creating fast and dynamic web pages.

AJAX allows web pages to be updated asynchronously by exchanging small amounts of data with the server behind the scenes. This means that it is possible to update parts of a web page, without reloading the whole page.
Query provides a rich set of methods for AJAX web development.
With jQuery AJAX, you can request TXT, HTML, XML or JSON data from a remote server using both HTTP Get and HTTP Post.
And you can load remote data directly into selected HTML elements of your web page!
The jQuery load() method is a simple (but very powerful) AJAX function. It has the following syntax: $(selector).load(url,data,callback)
Use the selector to define the HTML element(s) to change, and the url parameter to specify a web address for your data.

Only if you want to send data to the server, you need to use the data parameter. Only if you need to trigger a function after completion, you will use the callback parameter.

Example:

<html>

<head>

<script type="text/javascript" src="jquery.js"></script>

<script type="text/javascript">

$(document).ready(function(){

$("button").click(function(){

$("div").load('test1.txt');

});

});

</script>

</head>

<body>

<div><h2>Let AJAX change this text</h2></div>

<button>Change Content</button>

</body>

</html>

Low Level AJAX
$.ajax(options) is the syntax of the low level AJAX function.

$.ajax offers more functionality than higher level functions like load, get, and post, but it is also more difficult to use.
The option parameter takes name|value pairs defining url data, passwords, data types, filters, character sets, timeout and error functions.

Example:
<html>
<head>
<script type="text/javascript" src="jquery.js"></script>
<script type="text/javascript">
$(document).ready(function(){
$("button").click(function(){
$.ajax({url:"test1.txt", success:function(result){
$("div").html(result);
}});
});});
</script>
</head>
<body>

<div><h2>Let AJAX change this text</h2></div>
<button>Change Content</button>
</body>
</html>

jQuery AJAX Methods From This Page:

Request Description

$(selector).load(url,data,callback) Load remote data into selected elements

$.ajax(options) Load remote data into an XMLHttpRequest object

jQuery Question

Thursday, 15 December 2011

jQuery AJAX

Low Level AJAX

jQuery AJAX Methods From This Page:

No comments:

Post a Comment

Request	Description
$(selector).load(url,data,callback)	Load remote data into selected elements
$.ajax(options)	Load remote data into an XMLHttpRequest object