Other HTTP Methods

jQuery only provides short cut functions for get and post. The reason is that these two are mostly what you want to use but there are other HTTP methods. HTTP/1.0 defined GET, POST and HEAD. We have covered GET and POST in detail.

HEAD operates exactly like GET but it only returns the response headers i.e. there is no response body. You can use this to find out the status of the web page without having to download all its content. For example:

$.ajax(
         { url: "webpage.htm",
           type: "HEAD" }
      ).then(
              function(data, textStatus, jqXHR){
               alert(jqXHR.getAllResponseHeaders());
              },
              function(error){
               alert("error");
              }
           );

If you try this out using a development server such as the one provided with NetBeans of the PHP server you will discover it doesn't work. Simple development servers usually don't support anything other than GET and POST.  When you go beyond GET, POST and HEAD then most production servers have to be configured to respond to them. 

HTTP/1.1 introduced OPTIONS, PUT, DELETE, TRACE and CONNECT. Of these only PUT and DELETE are often used. 

PUT is like a POST only the URL provided isn't the program you want to process the data it is the URL you would like the data to be stored under. If the file exists then the data is used to update it and if it doesn't the server should create it. Obviously you can't simply let any client create or overwrite files on the server and different servers have different ways of controlling PUT. For example the Apache server lets you specify a program that is called to handle the request.  You can think of this as POST but with a fixed program to do the data processing. If you are playing by the rules then you should take the data that has been sent and save it under the file name specified by the URL. Here is a PHP program that does exactly this:

$putdata = fopen("php://input", "r");
$fp = fopen("puttemp.ext", "w");
while ($data = fread($putdata, 1024))
  fwrite($fp, $data);
fclose($fp);
fclose($putdata);

The only thing you need to know to understand this program is that PUT raw data comes in from php://input. The PUT data is stored in a file called puttemp so that it can be validated before being renames to what ever the user specified. You also need to add

Script PUT pathToScript

to the configuration file inside a <Directory> block. 

The important thing to realize is that PUT only works if the server is setup to handle it and there is nothing to say that the server has to play by your expectations. A server should save or update the resource indicated by the URL and the data but it doesn't have to. 

To use jQuery to send a PUT you would use something like:

$.ajax({ 
        url: url,
        type: 'PUT',
        data: data,
        contentType: type
  }).then(sucess,fail);

Notice that a PUT doesn't return any data. 

DELETE is supposed to delete the file at the specified URL but of course no server would do this as a default action. As for PUT Apache requires a fixed script to be used.  So for example if you wanted to enable PUT and DELETE on the entire website (not a good idea) then you would use:

<Location />
  Script PUT /handler1.php
  Script DELETE /handler2.php
</Location>


In each case you would have to program the handler check the validity of what was about to happen. In most cased the DELETE handler would delete the specified file but as for PUT this is not enforced. You can do what ever you want in the handlers. 

The final three TRACE, OPTIONS and CONNECT are rarely encountered. TRACE echos the request back the client for testing and debugging purposes. OPTIONS returns the methods that the sever supports for that URL. Finally CONNECT requests a connection to a TCP/IP tunnel. All of these require web server configuration to enable them.

Where Next

Now you know how to send data of any type to the server - however all of that data has to be string data. If you want to send binary data you need to understand something about character representation and possible encoding methods. 

In the next chapter we look a how the server can send data back to the client, character sets and encoding.

Summary

• The main AJAX method is $.ajax(url,options); or $.ajax(options); with the url included as one of the options.
  
  
• There are a set of options that control the basic nature of the HTTP request being made and how it is handled.  

• The ifModified and cache options are vital if you want to see the latest data.
  
  
• A post is never cached. 
  
  
• The default content type for Get, Post and Put is application/x-www-form-urlencoded which means that the data is sent as a stream of key value pairs using URL encoding and the UTF-8 character encoding.
  
  
• In most cases form-urlencoded data is the best supported data format.
  
  
• If you are deriving data from a form then it will be automatically encoded for you. If you get the data from some other source then it has to be encoded by the param() method.
  
  
• jQuery and many server frameworks support more complex data types including arrays and objects but still using form-urlencoding.
  
  
• You can also use general objects as data sources as long as you define the toString method to serialize the data. 
  
  
• You can also send xml and json to the server but you will have arrange for some processing to convert to a String and then back again to the format.
  
  
• HTTP/1.0 defined GET, POST and HEAD and HTTP/1.1 introduced OPTIONS, PUT, DELETE, TRACE and CONNECT. Of these only GET, POST and HEAD are frequently used. PUT and DELETE need server configuration to enable them.

Just jQuery
Events, Async & AJAX

Is now available as a print book: Amazon 

 

Contents

1. Events, Async & Ajax (Book Only)
2. Reinventing Events
3. Working With Events
4. Asynchronous Code
5. Consuming Promises
6. Using Promises 
7. WebWorkers
8. Ajax the Basics - get
9. Ajax the Basics -  post
10. Ajax - Advanced Ajax To The Server
11. Ajax - Advanced Ajax To The Client
12. Ajax - Advanced Ajax Transports And JSONP
13. Ajax - Advanced Ajax The jsXHR Object
14. Ajax - Advanced Ajax Character Coding And Encoding 

Also Available:

buy from Amazon

 

Advanced Attributes

JavaScript Canvas - Fetch API Working with lower-level data is very much part of graphics. This extract from Ian Elliot's book on JavaScript Graphics looks at how to use typed arrays to access graphic data. + Full Story

JavaScript Jems - The Inheritance Tax JavaScript should not be judged as if it was a poor version of the other popular languages - it isn't a Java or a C++ clone. It does things its own way.  In particular, it doesn't do inheritance  [ ... ] + Full Story

Other Articles JavaScript Jems - Objects Are Anonymous Singletons JavaScript Canvas - Typed Arrays JavaScript Jems - Functions Are Objects Just jQuery The Core UI - Data JavaScript Jems - Lambda Expressions Just jQuery The Core UI - Easy Plugins JavaScript Async - Basic Worker Just jQuery The Core UI - Animation

To be informed about new articles on I Programmer, sign up for our weekly newsletter, subscribe to the RSS feed and follow us on Twitter, Facebook or Linkedin.

 

Comments

Make a Comment or View Existing Comments Using Disqus

or email your comment to: comments@i-programmer.info