When a user clicks on a link our submits a form.
The web browser sends a request to the web server and the server sent back a response which is normally
a full page if it's dml.
One drawback with this though is that each response sent back is a full page of AITs to AML which means
the entire page needs to be rendered.
An alternative to full page requests is to use AJAX instead of the browser requesting a whole page in
response to a click on a link or a farm submission javascript code sends a request to the server and
the server can respond with h.t. AML are just data as we'll see in a moment.
Using AJAX means that only a small amount of data can be passed between the browser and the server which
can be much faster than requesting and returning an entire page.
Let's look at an example.
Here we have a p h piece prescript with some basic h t email and we using the P P date function to print
out the current time inside a time element.
If we view this in a browser the current time on the web server is printed out to update the time that's
displayed.
I need to refresh the entire page by clicking the reload button.
This requests the entire page again from the web server and the web server sends the entire page back
again.
Let's change this so we can update just the parts of the page that contains the time instead using an
AJAX request.
First let's add a button with a value for the I.D. attribute so we can uniquely identify it.
Then a reference to the J query library on a C D n.
And then a script tag containing a handler for the Click event of the button.
To make an AJAX request using plain javascript.
We need all this code.
Using J query.
We can just call the Ajax method although using J query might be slightly slower to execute.
It's much easier to code especially for Ajax requests.
Then Ajax request makes a request to a U R L just like a link or a farm.
Submission does.
So let's add another script kalid get timed up p HP.
And in here lets just print out the date.
Our more specifically the time part of the current date just like we're doing in the other script.
If we load this page directly in the browser it just prints out the current time.
So in the handler for the button click.
That's Carl.
Jay Query Ajax function passing in the U R L to the file we just created.
As this is in the same folder we can just use the file name.
To handle the response when the server returns a response to the Ajax request a done method is execute
it.
We append this to the Ajax request and pass it a function which is what is executed when the server
returns the response.
The contents of the response are placed in the data argument to this function.
For now let's just show this data in an alert message.
When we first load the page the time shown is the time when the server executed the P HP to generate
the page.
If I click the button we are shown the time coming from the server getting it via an AJAX request.
The page in the browser hasn't been updated as the time shown hasn't changed but every time I click
the button it's making an AJAX request to the server which runs the P 8 p in the get timed updates B
script and returns this to the javascript code.
Which it then displays in the message box.
Instead of showing this in a message box let's update the part of the page where the time is first let's
add an idee to the AITs to email element where we're displaying the time.
Then we can get this element based on its side E and use the h.t. AML method in J query to set the contents
of that element to the response that comes back from the server.
Now when I click the button the time is refreshed but only that part of the page has changed.
We're updating only part of a page using an AJAX request instead of reloading the entire page.
The server just returns the time instead of an entire page relates to AML which is faster and saves
server bandwidth.