Not Just GET and POST. HTTP PUT and DELETE with Javascript

Originally published: 03/2007 by J Wynia

I've been following quite a bit of discussion about RESTful development lately. My rising frustration with Wordpress and growing interest in publishing that's based on the Atom Publishing Protocol, have led me to watch quite a few different sources of activity on these platforms.

In several of those conversations over the last couple of weeks, I've heard someone complain about REST and using the complete HTTP verb command set. If you haven't read much on REST, you may not be that familiar with the HTTP verbs PUT and DELETE. They sit along the more familiar GET and POST as methods for working with the web.

Those 4 give you all of the elements of the normal "CRUD" operations of many apps: create, read, update and delete. The criticism I'm referring to is that most browsers and HTML don't exactly have complete setups for PUT and DELETE. On a basic level, that's true. You can't make your normal form "method" attribute just point to a DELETE or PUT and have it work out of the box.

However, that is NOT to say that the browsers don't support it at all. If you throw Javascript into the mix (and increasingly, people are willing to have Javascript support as a requirement of using their applications), you absolutely have the ability to use the rest (ha, ha) of the HTTP verbs.

Here's a minimal bit of code to demonstrate for Firefox. It works best if you install Firebug installed and watch what goes on in the Console. Just click the little green checkbox in he lower right after installing it.

Set this Javascript code in a static HTML document in a script tag in the head of the file:

var xmlhttp;

function test(){
execute('GET', 'http://uphp/testServer.php);
execute('POST', 'http://uphp/testServer.php');
execute('PUT', 'http://uphp/testServer.php');
execute('DELETE', 'http://uphp/testServer.php');
}

function execute($method,$url){
xmlhttp=new XMLHttpRequest();
xmlhttp.open($method,$url,true)
xmlhttp.send(null);

}

Adjust the URL's in the test() function to where you are going to put the testServer.php file (details in a bit).

Then put a quick button or link like this in the body of the HTML file:

<button onclick="test();">Test</button>

The test server is equally simple in PHP:

$method = $_SERVER['REQUEST_METHOD'];
switch($method) {
case "PUT":
print($method);
break;
case "GET":
print($method);
break;
case "DELETE":
print($method);
break;
case "POST":
print($method);
break;
}

Now, if you run the HTML file and hit your "test" button, you'll see all 4 types of HTTP requests go past in the console. If you expand each, you'll see that the server properly figured out which method was which.

In short, it's definitely possible to do a completely RESTful client in HTML/Javascript with about as much extra work as any other AJAX addition. There may be other reasons not to implement REST, but this particular crutch shouldn't be leaned on unless you want it knocked out from under you.

Comments

Andrey on 8/15/2007
A nice example, but seems you've never checked it. Otherwise you would have seen numerous javascript errors. As well you've used asynchronous request in you example without providing a handle. Since the example is primitive it is supposed to be read by a beginner. So.....not good. Bad I'd say.
Andrey on 8/15/2007
Sorry, U meant handler, not handle.
Paul M. Watson on 9/12/2007
I assume though that firewalls that block PUT and DELETE are still going to block this? Such a pity :(
Marian Steinbach on 4/9/2007
J, thanks for this helpful little tutorial! It helps me to implement REST in the way REST is ment to work, not just using GET and POST for everything. Cheers, Marian
blog comments powered by Disqus
Or, browse the archives.
© 2003- 2014 J Wynia. Very Few Rights Reserved. This article is licensed under the terms of the Creative Commons Attribution License. Quoted content or content included from others is not subject to that license and defaults to normal copyright.