JQUERY
jQuery Ajax
AJAX = Asynchronous Javascript and XML
AJAX is a technique for creating fast and dynamic web pages and it is not a programming language
AJAX is the art of exchanging data with a server and update parts of a web page without reloading the whole page
AJAX States
There is a 4 step approach for the browser to work with jQuery AJAX.
* Start the ajax request :- ajaxStart(callback)* Send ajax request to the server :- ajaxSend(callback)
* Receive the data from the server through the handler(callback) :- ajaxComplete(callback)
* Stop ajax request :- ajaxStop(callback)
Low level Ajax method ( $.ajax() )
The " ajax() " method is used to perform an AJAX (asynchronous HTTP) request. This method is mostly used for requests where the other methods cannot be used.
The parameters specifies one or more name/value pairs for the AJAX request.
Possible names/values are below : |
|
| Name | Value/Description |
|---|---|
| async | A Boolean value indicating whether the request should be handled asynchronous or not. Default is true |
| data | Specifies data to be sent to the server |
| url | Specifies the URL to send the request to. Default is the current page |
| success(result,status,xhr) | A function to be run when the request succeeds |
| complete(result,status) | A function to be run when the request Completes. * complete() will always get called no matter if the ajax call was successful or not - maybe it outputted errors and returned an error - .complete() will still get called. |
| type | Specifies the type of request. (GET or POST) |
| dataType | Specifies the data type expected of the server response. Note:- By default jQuery performs an automatic guess.
Possible types:"xml" - An XML document "html" - HTML as plain text "text" - A plain text string "script" - Runs the response as JavaScript, and returns it as plain text "json" - Runs the response as JSON, and returns a JavaScript object . |
example:
$.ajax({
type: "POST", beforeSend: function(){
alert('Sending request ...'); },
url: "some.php", data: "name=John & location = Boston", success: function(msg)
{
alert("Data saved : "+msg);
},
complete: function()
{
alert('Ajax completed');
},
error: function(res)
{
alert(res);
}
});
Load Method
The " load() " method loads data from a server and puts the returned data into the selected element.
A GET request will be performed by default but if extra data is passed POST will occur.The response is directly put into the selected element.
Note :
| url | : | Required. Specifies the URL you wish to load |
| data | : | Optional. Specifies data to send to the server along with the request |
| function(response,status) | : |
Optional. Specifies a callback function to run when the load() method is completed. response - contains the result data from the request status - contains the status of the request ("success", "notmodified", "error", "timeout", or "parsererror") |
Get Method
The " $.get() " method loads data from the server using a HTTP GET request.
Note :
| Generally load is used when the amount of data sent is less and post is used to send large amount of data. | ||
| url | : | Required. Specifies the url to send the request to |
| data | : | Optional. Specifies data to send to the server along with the request |
| function(data,status,xhr) | : |
Optional. Specifies a function to run if the request succeeds data - contains the resulting data from the request status - contains the status of the request ("success", "notmodified", "error", "timeout", or "parsererror") |
| dataType | : |
Optional. Specifies the data type expected of the server response. Note:- By default jQuery performs an automatic guess.
Possible types:"xml" - An XML document "html" - HTML as plain text "text" - A plain text string "script" - Runs the response as JavaScript, and returns it as plain text "json" - Runs the response as JSON, and returns a JavaScript object . |
Post Method
The " $.post() " method loads data from the server using a HTTP POST request.
Note :
| Generally load is used when the amount of data sent is less and post is used to send large amount of data. | ||
| url | : | Required. Specifies the url to send the request to |
| data | : | Optional. Specifies data to send to the server along with the request |
| function(data,status,xhr) | : |
Optional. Specifies a function to run if the request succeeds data - contains the resulting data from the request status - contains the status of the request ("success", "notmodified", "error", "timeout", or "parsererror") |
| dataType | : |
Optional. Specifies the data type expected of the server response. Note:- By default jQuery performs an automatic guess.
Possible types:"xml" - An XML document "html" - HTML as plain text "text" - A plain text string "script" - Runs the response as JavaScript, and returns it as plain text "json" - Runs the response as JSON, and returns a JavaScript object . |
Example:
ajax.html
Demo:
Example For JSON:
json_test.html
<̑?php
$arr = array("Name"=>"Debasish","Address"=>"Jajpur","Age"=>27,"Qualification"=>"BTech");
echo json_encode($arr);
?>
Demo:
| Name : | |
| Address : | |
| Age : | |
| Qualification : |