Ajax Tutorial for Beginners Learn with Experts with examples
What is AJAX?
XML is rarely relevant, but when developing web applications, we use AJ to perform asynchronous items such updating a page, making actions, etc..
In a nutshell, AJAX is all about upgrading parts of a page without needing to reload the entire thing. That's pretty useful if your site is big and involved, you do not need your users needing to load the identical piece of information multiple times.
Actually implementing AJAX is not difficult, but it's odd. It relies on the interplay of a couple of different technologies and requires a little knowledge of each. The aim of this ajax tutorial is not to get you around the point where you are able to write brilliant AJAX doohickies; but rather for you to a place where you have enough of an understanding of AJAX which you're able to share it, see where it can be used, and have a good base onto which you are able to construct the technical skills you'll need to actually implement AJAX.
A Brief Background
AJAX is based on a bunch of technologies. You do not need to be a specialist in all of them but a little background knowledge will be useful. Note that this is a very simplified explanation, there's a lot more into the interplay of these technology mentioned below, and a lot of technology that I am simply not going to mention.
The short version of the is that HTML describes an image to be attracted by browsers. Generally speaking it is combined with a bunch of other technology in order to create something fairly, but that is beyond the scope of this tutorial. Everything you will need to understand is it refers to the positioning of text, links, form elements and graphics within a page.
However, the coolest websites have moving parts - they respond to the activities of the user and other occasions. Their content is not static. That's beyond the abilities of HTML. That's where JavaScript comes in. It's a fully fledged programming language which gets executed by the browser. It may make the browser do stuff.
HTTP Basics
This is a protocol. It's just a set of agreed upon rules of communication. This protocol is pretty fundamental to the performance of the net because it is what's used to fetch web pages and many other resources. If you send a message using HTTP it is called a request. If you send a petition you should expect a response. Browsers get the HTML of web pages by sending requests to specific locations on the internet and rendering the answers they get. Browsers can really request all sorts of items, not just HTML pages but we'll get to this later.
Every request is associated with a connection. When an HTTP request were a letter, the url will be the address written on the outside on the envelope. Requests may have data attached to them as well in the form of parameter values, so these values can be correlated in a couple of different ways. The take home message here is: An HTTP request always has a url and occasionally has information attached to it also.
HTTP can be used to transfer all kinds of data, for example, HTML, JavaScript and images. Sometimes it's beneficial to use formats like XML and JSON as well. HTML is actually a form of XML. And JSON conveys a similar niche to XML but is a little less verbose and a little more flexible so is normally preferred when AJAX is concerned. You do not need to understand about these technologies to comprehend how AJAX works, the reason they are mentioned here is because in the event that you want to do anything significant using AJAX you will probably encounter these terms.
Here we'll actually make a small web page. Do not get too excited/scared, it is going to be very easy and incredibly useless. So follow the actions laid out below. Ready?
STEP 1 open your favourite text editor (notepad will work if you are using Windows)
STEP 2 copy-paste the following code into a new document
<!DOCTYPE
html>
<html> <head>
<title>Completely useless web page</title>
</head>
<body>
Code Mentor is delicious!
</body> </html>
STEP 3 save it hi_world.html
STEP 4 open it up in the browser of your choice
Didn't I tell you that this was going to be easy? So what just happened? Or rather, what did the browser just do?
Once you opened your internet page with your browser, the browser opened and used the path to hi_world.html as the url. It then rendered the contents. And that really is. It does not do anything after it's shown.
JavaScript Could Produce Requests Too!
Hence that the browser can make purchases. And JavaScript can make the browser do stuff. It follows that JavaScript will produce the browser make requests. That is the fundamental mechanism of AJAX! One common use case of the is known as paging.
Say, by way of example, we have a web page with a table on it. That table includes a listing of. . .erm... cows. Therefore, because the cows are the cows of a rather powerful and caring dairy farmer you will find a few million of them and they all have a title. But we don't wish to load all the cows' titles in one go since there is a good deal of information and maybe we are just interested in looking at the initial 50 cows. Paging is any technique that lots pages of information since they are wanted.
And this is how we'd create this work.
Make a static page which draws a table of the primary page of cows along with a next button. So far that is all just HTML use JavaScript to ensure that whenever the next button is clicked then we request another group of cows out of some url. This information could be communicated as JSON or XML if a reply arrives subsequently populate the cows table using the new information
Next Steps
Ok, so now you actually wish to make the AJAX happen. Well if you were able to know everything up until here you're in a fairly great location. But there are still a few bits of the puzzle missing. Firstly, how can you actually make AJAX requests?
The conventional thing to do nowadays is use a JavaScript Library called JQuery. AJAX is a tricky thing because different browsers work differently so occasionally code that operates on you will not on another. JQuery supplies AJAX performance that's strong enough that it works on all modern browsers. Here's a little bit of example code to get your juices going:
So that's the client-side code done. The petition needs to actually go somewhere, so the url must point to something useful. This will be some sort of web application. Actually making a web program is quite much beyond the scope of this tutorial. The lesson here is that if you write the web app, you can make it respond but you want (within reason).
Conclusion
Now you should have a fairly good high level idea of how AJAX works. I will stress again that this tutorial was just an introduction. To be in a situation where you can actually implement it I'd suggest looking at the JQuery AJAX documentation. If you can get your head then you are ready to stone. If this is beyond you then an introductory JavaScript tutorial would be another step.
Comments