I’m in the process of converting a web application from an Apache + PHP backend to Node.js. The application being converted is based heavily around real time interaction between users, so, it was a natural fit for WebSockets.

In fact the old application used a Node.js backend for WebSockets, but an Apache + PHP backend for everything else, including page generation and AJAX endpoints. This means every AJAX driven form had a PHP endpoint which performed a desired action and a WebSocket event listener waiting to broadcast the event to other users.

Having to recode this application from the ground up in a new asynchronous language presented an interesting question to me.

Why should I use AJAX when I have WebSockets?

Let me explain how they both work.

AJAX

AJAX started it’s life as an experiment by Microsoft in 1999 and was packaged with Internet Explorer 5. At the time it was officially called XMLHTTPRequest, and while it is called AJAX in jQuery all browsers still call it XMLHTTPRequest in the background.

An AJAX request is built around the typical HTTP model. A request is made by a client and a response is generated by a server. Each request creates a new HTTP request in the background, just like refreshing or navigating to a new web page.

WebSockets

Unlike AJAX, WebSockets are based around an event model. The client and server can emit events and send data to each other whenever they need to.

Lets say there are 3 users working on a project together; user A, B, and C. User A can update the project by emitting an event to the server. The server can in turn emit an event to user B, and C, informing them that a change has happened and at the same time sending them data about the change. Their browser can then use that data to update their web page.

The best part is how the data is transmitted.

Just like AJAX, WebSockets have to establish a connection to a server for data to flow. Unlike AJAX, WebSockets only establish this connection once, then all data is sent over this open WS protocol connection. This means each event being send takes very little resources from both the server and the client because a new connection never has to be established.

The downside is that server side languages like PHP were designed around a request/response model, not an even driven model. However, languages like Node.js were based around an event model, not a request/response model, so Node.js is a perfect fit for WebSockets and thus a perfect fit for my project.

But should I still use AJAX?

AJAX is still useful, and I will be using it for all my traditional request/response driven PHP applications.

The application I’m working on currently requires WebSockets for the real time communication anyway, so I might as well use them for all communication. The connection is already established, they would use fewer resources than AJAX, and for some pages I would have to code them anyway, so I may as well code them on all pages.

For real time applications I am going to throw PHP and AJAX out the window and stick with Node.js, and WebSockets.