jQuery Ajax Code Example
Send requests in the background without refreshing the current page.
In this post we will be talking about jQuery AJAX.
AJAX stands for Asynchronous JavaScript and XML) and the word Asynchronous defines it all.
You can send request to a server without even refreshing the page to get new/fresh data.
Here's an example of sending an Asynchronous request in JavaScript
method = "GET";
url = "https://domain.com";
// creates a XMLHttpRequest object
var xhttp = new XMLHttpRequest();
// will be used to check the response
xhttp.onreadystatechange = function() {
// process response here
};
// prepare the request with the method and the url we send it to
xhttp.open( method , url );
// send the request
xhttp.send();
The above code is written in JavaScript.
If you still don't know, jQuery is written on top of JavaScript. Think of it like a wrapper for JavaScript, that is much easier to code and understand.
In jQuery we write the above like this:
$.ajax({
url : 'https://domain.com"',
type : 'get'
});
As you can see, the code is much easier to read in jQuery.
You can also play with different options not just the url and type.
Below are some useful options
Example Options and Usage:
Here are some brief explanation of the functions that we will be using.
- url - The URL we are going to send the request to.
- type - The method the request will use.
Valid values are get, post or a custom request.
Default to get
- dataType - The resource dataType.
Valid values are xml, json, script, or html
For ex, if the we expect a json format the this will be json, if we expect a JavaScript file then this will be
Default to html
- data - a string or object to send as a query string to the url.
Example:
$.ajax({
url : 'https://urltosend.example',
type : 'post',
dataType: 'json',
data : {
hello : 'world'
}
});
The above $.ajax request is sending a post to 'https://urltosend.example' with a data hello=world.
If you are sending this to a PHP script then you can access the data values from $_POST['hello'].
- success - A callback function to call once the request is successful.
Example:
$.ajax({
url : 'https://urltosend.example',
type : 'post',
dataType: 'json',
data : {
hello : 'world'
},
success : function( theResponse ){
console.log( theResponse ); // will have the content of 'https://urltosend.example'
}
});
- error - A callback function to call when the request failed.
Example:
$.ajax({
url : 'https://urltosend.example',
type : 'post',
dataType: 'json',
data : {
hello : 'world'
},
success : function( theResponse ){
console.log( theResponse ); // will have the content of 'https://urltosend.example'
},
error : function( xhr, text, error ){
console.log( text ); // will have the specific errors why the request failed to send
}
});
Note that this wont catch cross side scripting errors.
- complete - A callback function to call after the request is successful or failed .
Example:
$.ajax({
url : 'https://urltosend.example',
type : 'post',
dataType: 'json',
data : {
hello : 'world'
},
success : function( theResponse ){
console.log( theResponse ); // will have the content of 'https://urltosend.example'
},
error : function( xhr, text, error ){
console.log( text ); // will have the specific errors why the request failed to send
},
complete: function( xhr, text ){
// runs after a success callback or error callback
}
});
A lot get confused with complete and success so you have to be careful of using both. Just rememeber that the complete callback runs after a success or an error.
Replies (0)
Reply