Top 3 Products & Services
| 1. 2. 3. |
Dated: Dec. 26, 2012
Related Categories
JavaScript ProgrammingAJAX
Nothing without AJAX! jQuery offers a powerful package of AJAX possibilities.
JQUERY.AJAX()
Main method for connection with AJAX. Parameters that forward can be:
|
URL
The from where the request is sent. If you want a cross-domain request (request sent to a different domain), you have to enable that with crossDomain parameters.
|
|
CROSSDOMAIN
It is used for sending requests on pages that are on different domains, using JSONPs request. Options are true and false.
|
|
TYPE
Represents the type of data transfer (the same as in the HTML form). Can be GET and POST
|
|
DATA
Data that is passed to a given page. So basically, it is like you sending some data via HTML forms from some input element. Example: name = Peter & Year = 1980
|
|
DATATYPE
Determines the type of returned data.Supports: json, xml, script and html
|
|
ASYNC
Will the request be executed synchronously or asynchronously. Possible options are true and false.
|
|
SUCCESS
With this parameter you forward some function that will be executed after the AJAX request is finished.
|
|
ERROR
Calls a certain function if there is an error in the request.
|
|
TIMEOUT
Time of delay from the start of the execution of the request in milliseconds.
|
|
STATUSCODE
Executing given functions on certain HTTP conditions. For example, if the return status is 404 (the page doesn’t exist), a certain function is executed.
|
|
USERNAME
User name that will be forwarded in the case of HTTP authentication.
|
|
PASSWORD
The password that will be forwarded in the case of HTTP authentication.
|
| 1 | /*as it is mentioned above, |
| 2 | it doesn’t matter if you are using $ or jQuery object */ |
| 3 | |
| 4 | $.ajax({ |
| 5 | url: "test.html", |
| 6 | data: "ID=182&location=Chicago", |
| 7 | type: "GET", |
| 8 | async: false, |
| 9 | statusCode: {404: function() { |
| 10 | alert('Page is not found'); |
| 11 | }, |
| 12 | error: function() { |
| 13 | alert("error"); |
| 14 | }, |
| 15 | success: function(){ |
| 16 | $(this).addClass("done"); |
| 17 | } |
| 18 | }); |
JQUERY.GET()
Loads the information from the server using HTTP GET request (shortened and purpose-specific version of jQuery.ajax () method). Accepts 4 parameters: url to the
page (mandatory), the info that is being sent with the request (data),function for execution after the ajax request, and the dataType that defines how will the returned info look like.
| 1 | $.get("test.php"); |
| 2 | |
| 3 | $.get("test.php", { name: "Peter", age: "26" } ); |
| 4 | |
| 5 | $.get( |
| 6 | "test.php", |
| 7 | { name: "Peter", age: "26" }, |
| 8 | function(){ alert('Over')}, |
| 9 | "json" |
| 10 | ); |
JQUERY.POST()
Same as jQuery.get() method,but the type of request demands HTTP POST
JQUERY.GETJSON()
Same as jQuery.ajax() method that would return JSON type of data. The parameters are: url, data and function for calling after the request is executed.
| 1 | $.getJSON("test.php", |
| 2 | {name:"Peter"}, |
| 3 | function() { |
| 4 | //code for execution |
| 5 | } |
| 6 | ); |
JQUERY.GETSCRIPT()
Loads the script from the server and executes it. The parameters are: url and callback function
| 1 | $.getScript('ajax/test.js', function() { |
| 2 | alert('Script is loaded.'); |
| 3 | }); |
.LOAD()
Loads information from the server and places them in a certain element. The parameters are: url, data and callback function
| 1 | $('#my-div').load("page.html", |
| 2 | function() { |
| 3 | //code for execution after finishing |
| 4 | } |
| 5 | ); |
.SERIALIZE()
Very useful function. Reads data from HTML form.
| 1 | function takeData() { |
| 2 | return $('#my-forma').serialize(); |
| 3 | } |
| 4 | |
| 5 | $('#button).click( |
| 6 | function(){ |
| 7 | var data = takeData (); |
| 8 | alert(data); |
| 9 | } |
| 10 | ); |
The example will execute the takeData() function on the click of a button, that by the help of .serialize() loads the values from all elements in a form (input, select, textarea), and
places them in the variable data. Then, those data will show up on the screen. The returned data will look like this, for example :name=Peter & surename=Willson & married=no...
We have reached the end of our series of tutorials about jQuery. We hope you've learned something new, or at least refresh the knowledge about jQuery.
If you missed any part of the tutorials about jQuery, you can see them in the list below.
Now that you've gotten free know-how on this topic, try to grow your skills even faster with online video training. Then finally, put these skills to the test and make a name for yourself by offering these skills to others by becoming a freelancer. There are literally 2000+ new projects that are posted every single freakin' day, no lie!
 Previous Article |  Next Article |