Quick Reach
What is jQuery AJAX?
jQuery continues its slogan “write less do more” in the case of AJAX as well. jQuery provides a handy set of methods to work with AJAX requests that otherwise needs a lot of coding in case you are making JavaScript AJAX call.
This chapter explains how to use AJAX methods with examples.
AJAX examples in this tutorial
A basic ajax example of loading data from text file
AJAX example with PHP file to display entered info without refresh
All these examples are explained below.
So what is AJAX in short?
These days we usually come across websites where data updates automatically without needing to refresh or reloading a web page. For example, Gmail automatically loads new emails. Facebook also loads newsfeed and other stuff automatically.
This is done by using AJAX that we can define as loading data in the background without refreshing a website and display it on a webpage.
Another example can be a sign-up page or create an account where we see no page refresh while account creates without a page is loaded again.
AJAX stands for Asynchronous JavaScript and XML. As the name shows, it uses JavaScript to fulfill the desired action. Normally, we have to use lengthy JavaScript code to accomplish that along with browser compatibility issues as different browsers require different AJAX syntax for implementation.
jQuery plays its role in that case and thanks to the team of jQuery that made this job quite easier for developers by providing AJAX jQuery methods and addressing the compatibility issues along with simplifying AJAX based calls.
jQuery’s ajax method
The jQuery $.ajax() method is used to perform an AJAX (asynchronous ) HTTP request.
How to use the ajax method?
Following is the syntax of ajax method:
$.ajax(name:value options)
Where
- name: value options are set of pairs that specify AJAX request. All name/value parameters are optional that are described below.
- URL: URL to which request is sent in the string format.
- ajax async: The default value is set to be true, that means performing request asynchronously in AJAX.
- data: AJAX data to be sent to the server along with a request.
- dataType: defining the ajax data type expected from the server as a response.
- dataFilter: As server sends back data. The dataFilter function is used to handle the raw data sent from the server in advance. The complete syntax will be dataFilter(data, type).
- error: If a request is failed in ajax this callback function is used. The complete syntax is error(xhr,status,error). See example below to learn jQuery ajax error handling.
- jQuery ajax success: If AJAX request succeeds, A callback function to run. The complete syntax of ajax success: success (result, status, xhr).
- global: A Boolean with default value as True. It specifies whether global AJAX event handlers to be triggered or not.
- jsonp: This overrides the callback function name in a jsonp request.
- processData: A Boolean with a default value of True. It tells whether to convert data into query-string or not.
- ajax timeout: Local timeout for the request in milliseconds.
- type: request type (Get or post). The default is Get.
- username: The user for HTTP authentication access request.
- password: password for HTTP authentication access request.
jQuery AJAX example
The following is an AJAX example. The example loads a text file by using jQuery $.ajax method placed in the same directory as the source file that calls it. After loading, as the button is clicked, it will display loaded data from the text file to ajaxrequest Div. See demo online by clicking the link:
Experience this example online
|
1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
|
<html>
<head>
<script src="http://code.jquery.com/jquery-1.10.1.min.js">
</script>
<script>
$(document).ready(function(){
$("#loaddata").click(function(){
$.ajax({url:"ajaxexample.txt",success:function(ajaxresult){
$("#ajaxrequest").html(ajaxresult);
}});
});
});
</script>
</head>
<body>
<div>Click button to load AJAX returned data</div>
<div id="ajaxrequest"></div>
<button id="loaddata">Load data for ajaxrequest Div</button>
</body>
</html>
|
AJAX jQuery example with PHP file to make AJAX Request
In the example below, we will use text box entered data. The entered text in name and location boxes will be assigned to the variables in jQuery. After the button is clicked the jQuery $.ajax() method will call URL= post_test.php file. This will receive sent parameters, name, location and return output string. All will be done without reloading the web page.
Note: Post_test.php file is placed at the same location as our HTML file where ajax method is used.
If AJAX call is successful, the callback function will display returned data into “postrequest” Div. See demo online by clicking the link below:
Experience this example online
First post_test.php code
|
1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
|
<?php
$post_name=$_REQUEST["name"];
$post_location=$_REQUEST["location"];
if( $post_name )
{
echo "Name entered is: ". $post_name ."<br>";
echo "Location:" .$post_location;
}
?>
|
HTML file using $.ajax() method
|
1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
|
<html>
<head>
<script src="http://code.jquery.com/jquery-1.10.1.min.js">
</script>
<script>
$(document).ready(function(){
$("#loaddata").click(function(){
txtname=$("#txtinput").val();
txtlocation=$("#txtlocation").val();
$.ajax({url:"post_test.php",data:{name:txtname, location: txtlocation },success: function(ajaxresult){
$("#ajaxrequest").html(ajaxresult);
}});
});
});
</script>
</head>
<body>
<div id="ajaxrequest"></div>
Enter Name: <input type="text" id="txtinput"><br />
Enter Location: <input type="text" id="txtlocation"><br />
<button id="loaddata">Click to send request to post_test.php</button>
</body>
</html>
|
This is just a basic example of using $.ajax() with PHP file sending text boxes data. In real-time applications, you may need to return database driven data. If you learned this properly and understand how to use MySQL and PHP then you are almost ready to use database driven data for AJAX requests.
AJAX error handling example
Following is the same example as above with jQuery ajax error handling. In that example, as a wrong file name is given, it will show an alert by using ajax error parameter:
Experience this example online
|
1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
|
<html>
<head>
<script src="http://code.jquery.com/jquery-1.10.1.min.js">
</script>
<script>
$(document).ready(function(){
$("#loaddata").click(function(){
txtname=$("#txtinput").val();
txtlocation=$("#txtlocation").val();
$.ajax({url:"post_test_11.php",data:{name:txtname, location: txtlocation },success: function(ajaxresult){
$("#ajaxrequest").html(ajaxresult);},error:function(xhr){
alert("An error occured: " + xhr.status + " " + xhr.statusText);}
});
});
});
</script>
</head>
<body>
<div id="ajaxrequest"></div>
Enter Name: <input type="text" id="txtinput"><br />
Enter Location: <input type="text" id="txtlocation"><br />
<button id="loaddata">Click to send request to post_test.php</button>
</body>
</html>
|
Important methods of AJAX to learn
Generally ajax method is not used directly. Other available high level methods that are easier to use like $.get() and $.post() are used to perform ajax operations. These methods use ajax method underway.
jQuery ajaxSetup method
Leave A Comment?