Ajax Tutorial for Beginners

1
Ajax Tutorial for Beginners
2
Ajax Tutorial for Beginners Learn with Experts
with examples
3
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.
4
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.
5
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.
6
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.
7
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.
8
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.
9
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 lt!DOCTYPE
htmlgt lthtmlgt ltheadgt lttitlegtCompletely useless
web pagelt/titlegt lt/headgt ltbodygt Code Mentor is
delicious! lt/bodygt lt/htmlgt
10
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.
11
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.
12
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
13
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?
14
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).
15
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.
Source