This is Part 1 of The Beginner’s Guide To Understanding Ajax.
Before you actually begin writing Ajax-based code, it’s important to understand what the technology actually is and how it works.
As with other aspects of programming, understanding the technology at a high level can go a long way in helping you to write and debug future code.
The nice thing is that Ajax itself isn’t a terribly complicated idea. In this post, we’ll take a look what exactly it is and how it works.
What is Ajax?
If you were to ask a number of people what Ajax is, you’d likely get a variety of responses.
- Some would say that it’s what allows us to reload certain parts of a page without refreshing the entire thing.
- Others may say that it stands for Asynchronous JavaScript an XML
- You may even find that some say it’s a client-side technology that supports partial page loads
Truth is, they are all correct in some way.
In 2005, a user experience designer named Jesse James Garrett defined the term “Ajax” to refer to the set of technologies that support updating certain parts of a webpage.
Although many claim that it refers strictly to Asynchronous JavaScript and XML, there are languages other than JavaScript and document types other than XML that achieve the same result.
On Clients and Servers
Understanding how Ajax works is a relatively straightforward but there are a couple of terms that should be defined before trying to explore this particular technology:
- The client-side refers to the browser running on your machine. Whenever you navigate to a website, you’re communicating with that website’s server. Your machine and your browser are known as the client.
- The server-side refers to the machine and software running that are hosting the website. Clients request data from the server.
- The client-side, or browser, loads and executes JavaScript code and manages responses from the server.
Easy enough, right?
How Does Ajax Work?
At the highest level, Ajax is a collection of technologies that work together to send, receive, and format data:
- Request data is sent via JavaScript or another scripting language from the client to the server
- Data is received on the server and managed with a server side language (such as PHP, Python, C#, Ruby, etc)
- Response data is sent from the server to the client in a certain format (XML, JSON, etc)
- The browser displays the data by marking it up with HTML and styling it with CSS
Of course, there’s nothing practical about the steps that are listed above. Concerete examples normally do a better job of demonstrating this.
So, in the next post, we’ll take a look at a simple example of an Ajax application and walk step by step through the process of what’s happening in the browser, the request, the server, and the response.
[…] a high-level look at Ajax as well as some simple examples of how to write Ajax-based functionality.What is Ajax & How Does it Work?A Simple Ajax ApplicationAs with all of the other 8BIT Development Tutorials, this page will act as […]