jQuery AJAX Differences Between GET vs POST

Quite a few people have been asking me the question “what is the difference between GET and POST when I am specifying an AJAX request?”. These are the key differences between GET and POST when you are specifying an AJAX request using jQuery.

Related posts:

• jQuery Ajax Function Example
• How to Analyse HTTP Requests using Net Panel, HTTP Fox & Fiddler2

GET vs POST

• A GET request is used to get data from the server.
• A POST request is used for modifying data on the server.

When to use GET

If the processing of a form is idempotent (i.e. it has no lasting observable effect on the state of the world), then the form method should be GET. Many database searches have no visible side-effects and make ideal applications of query forms.

• Use GET for safe actions and POST for unsafe actions.

Characteristics of GET:

• GET requests can be cached
• GET requests can remain in the browser history
• GET requests can be bookmarked
• GET requests can be distributed & shared
• GET requests can be hacked

W3.org GET Method Definition

When to use POST

If the service associated with the processing of a form has side effects (for example, modification of a database or subscription to a service), the method should be POST.

• Use POST when dealing with long requests – if you’re sending large amounts of data, or sensitive data over HTTPS, you will want to use POST. Some browser such as Internet Explorer place a limit on the URL string so this may break the action of some forms if you use GET.

You may consider using POST for the following actions:

• Posting a message to a bulletin board, newsgroup, mailing list, or similar group of articles
• Providing a block of data, such as the result of submitting a form, to a data-handling process
• Extending a database through an append operation
• Annotation of existing resources

W3.org POST Method Definition

GET vs POST in AJAX calls

Unless you are sending sensitive data to the server or calling scripts which are processing data on the server it is more common to use GET for AJAX calls. This is because when using XMLHttpRequest browsers implement POST as a two-step process (sending the headers first and then the data). This means that GET requests are more responsive – something you need in AJAX environments! Because “Ajax” requests are subject to the same origin policy there is limited security risks when using GET instead of POST. Use GET to “GET” information from the server such as loading a JavaScript file (AJAX shorthand function $.getScript() can be used to do this) or loading a JSON file (AJAX shorthand function $.getJSON() can be used to do this).

jQuery AJAX Functions that use GET as default: $.get(), $.getScript(), $.getJSON(), .load()

jQuery AJAX Functions that use POST as default: $.post()

Example GET AJAX Call – Calling a PHP script to get the number of twitter followers.

$.ajax({
  url: 'getTwitterFollowers.php',
  type: 'GET',
  data: 'twitterUsername=jquery4u',
  success: function(data) {
	//called when successful
	$('#ajaxphp-results').html(data);
  },
  error: function(e) {
	//called when there is an error
	//console.log(e.message);
  }
});

View Demo

Example POST AJAX Call – Submitting a login form.

var $form = $("#myForm");
    var url = $form.attr("action") + "?" + $form.serialize();
    $("#" + id).html(url);

$.ajax({
	type: "POST",
	url: action,
	data: $form,
	success: function(response)
	{
		if(response == 'success')
			$("#myForm").slideUp('slow', function() {
				$("#msg").html("<p class='success'>You have logged in successfully!</p>");
			});
		else
			$("#msg").html("<p class='error'>Invalid username and/or password.</p>");
	}
});

Further Readings

Form Submission Example
This example doesn’t really apply to AJAX as these requests happen behind the scenes but may help you understand further what is happening between the different request types.

When using GET a HTTP request is generated and passes the data to the web server as a set of encoded parameters appended to the URL in a query string.

For instance, it would be a bad idea to use GET for a login form submission as the login details would show in the address bar.

GET /login.php?username=user&password=12345 HTTP/1.1
Host: domain.com

But if we used POST the parameters would be passed within the body of the HTTP request, not in the URL. This would happen behind the scenes between the browser and the web server.

POST /login.php HTTP/1.1
Host: domain.com
username=user&password=12345

GET Caching
GET is intended to be used when you are reading information to display on the page. Browsers will cache the result from a GET request and if the same GET request is made again then they will display the cached result rather than rerunning the entire request.

REST – The “RESTful” Client Server Architecture

HTTP, for example, has a very rich vocabulary in terms of verbs (or “methods”), URIs, Internet media types, request and response codes, etc. REST uses these existing features of the HTTP protocol, and thus allows existing layered proxy and gateway components to perform additional functions on the network such as HTTP caching and security enforcement.

Read about “Representational State Transfer” (REST): http://en.wikipedia.org/wiki/Representational_State_Transfer#RESTful_example:_the_World_Wide_Web

REST – The “RESTful” Web Services (API)

It is a collection of resources, with four defined aspects:
the base URI for the web service, such as http://example.com/resources/
the Internet media type of the data supported by the web service. This is often JSON, XML or YAML but can be any other valid Internet media type.
the set of operations supported by the web service using HTTP methods (e.g., POST, GET, PUT or DELETE).
The API must be hypertext driven.[11]

http://en.wikipedia.org/wiki/Representational_State_Transfer#RESTful_web_services

Conclusion

Well I hope that you have a clear idea of when to use GET and when to use POST. If your still unsure or want to inspect what’s happening behind the scenes of your AJAX calls use a tool like Firebug NET Panel to see where your data is being sent (such as in the header) the type of request. Other than that, happy Ajax’ing!

Read the full/original article at jQuery4u

• 

Related Posts

• jQuery lightBox vs ColorBox vs FancyBox vs Thickbox – What are the key differences?
• jQuery.ajax get json code snippet
• jQuery UI 1.8.15