Simplehost Web Hosting

Ajax GET / POST Requests

Following on from our article about better JS coding techniques, we thought it would be useful to show you some real working examples of how and when to implement the correct form of Ajax requests on your site.

Firstly you must decide if you want to use a GET request or a POST request. For this you must know about the 4 most common HTTP protocol request types, GET, POST, PUT, DELETE. When developing RESTful applications and services each of these must be used for the correct purpose, some are more obvious than others. As a general rule, GET requests should only be used to retrieve data when no changes to the application state need to be performed. e.g. if the request will not change the database only perform select query then you should always use the GET method. If changes will be made to the backend, e.g. adding a new entry to the database (saving a new product, add an item to a cart etc) then the POST request can be used. Due to browser limitations we tend to only use these two request types when dealing with AJAX, but all modern browsers do support the four types when using Ajax. HTML forms only support GET and POST requests so we tend to use these most often. A workaround is the use a hidden form field containing the request type in the form. jQuery Ajax methods and modern browsers support all 4 types.

Here is a quick overview then.

GET: Retrieving and selecting data for viewing without making stateful changes to the app
POST: Updating or creating new entries
PUT: Updating an entry by replacing an old version (If used, then POST is used for the create process)
DELETE: Remove an entry

We will use jQuery again for our examples.

	  <script src="//"></script>
	  <script src="/ajax.js"></script>

Inside of ajax.js we write our functions

//This block will run when the HTML has fully loaded and all elements are available
$(document).ready(function() {
	//Make our AJAX call 
	       //The response parameter will contain the result (content) from the server, if JSON is sent       //from the server we get a nice JavaScript object to play with
	       $('#ajax-content-div').html(response.html); //Fill the ajax content div with our result

There are a few other methods we can use with jQuery for our ajax calls. As you may have guessed we can also use

$.post(...) for our POST requests which has the same parameter format as $.get().

If you just want to load in some data to a div, there is a more simple method jquery provides that is $(element).load(url); Where element is any jquery html element, and url is the url where to load the html data from.
e.g. $('#mydiv').load('/page/test.html'); This will load the contents of test and place it inside the div with id #mydiv. Load uses the GET request method, and GET params can be passed into the load function as a second parameter string. If you provide an object as a second parameter, jquery will send a POST request instead of GET to load the data.

Finally, we have the low level method .ajax() to perform the other two requests (PUT and DELETE). It takes just one parameter, an object. This object must contain some basic elements:

url: URL to perform the ajax request to
success: callback function to be run when completed.
data: an object containing data pairs (parameters) to be sent to the server
type: GET, POST, PUT, DELETE our request types

There are many more useful parameters which can be seen on the official documentation.

And finally, an example of this.

$(document).ready(function() {
//Make our AJAX call 
	$.ajax({url:'/ajax/test.json',type: POST,data:{param1:'test'},success: function(response){
	      //Do something with our response
Recent News
Feb 13, 2016

We have deployed PHP 7.0 to selected servers which has up to 4x performance gain on previous versions as well as the most comprehensive language API available. Read More

Feb 08, 2015

Bitcoin payments are now accepted for all hosting products. Bitcoin payments are simple, fast and simple to do on a mobile device. Get your digital wallet today and pay with Bitcoin. Read More