TechiWarehouse.Com


Top 3 Products & Services

1.
2.
3.

Dated: Dec. 26, 2012

Related Categories

JavaScript Programming

AJAX

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: jsonxmlscript 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: urldata 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: urldata 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  (inputselecttextarea), 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
 
jQuery Tutorial Part V
 

 If you missed any part of the tutorials about jQuery, you can see them in the list below.

  1. jQuery Tutorial
  2. jQuery Tutorial Part II
  3. jQuery Tutorial Part III
  4. jQuery Tutorial Part IV
  5. jQuery Tutorial Part V
 
 

 

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