Wednesday, July 9, 2008

Avoid Server Trip during Edit

Lets think of a scenario--A table full of student information with links for edit,delete and details view--a typical dashboard.Now we want to edit a particular student and clicks on the edit button.A pop up div opens up and shows all informations in a floting div.simple.
Now what most people do to achive this?They call a page in background via AJAX and and populate the floating div with those values.This is all right.

But think again.Are not all the values corresponding to a particular student already present in the page?So why make another server request to fetch the same data again?
Now comes the advanced JavaScript. Have you heard of DOM(Document Object Model) scripting?we will use DOM scripting to achive that.DOM programming is nothing but manipulating HTML controls in a page in simple words.

What will be our methodology?
When the table created we will asssing a unique id for each row." >.
Now on each edit button we will provide that id and studentId(pk of student table).
,);" />
Now when the div pops up via showDiv() function we are passing the row id and studentId.
This row id will help us in fetching the data from the table and studentId will help us in updating data in the database.

Well friends I think if I produce some pictures and real code then it will be easy for you to understand.So read on.............

AJAX = Asynchronous JavaScript and XML

AJAX = Asynchronous JavaScript and XML:

You can have all the informations about using AJAX from http://www.w3schools.com/Ajax site.

Confused??
see I create this blog for providing some informations that are rarely available .And the above site
explains basics of AJAX very well.So...............

Ok.I can give you names of some AJAX libraries.Use those libraries .


Akelos PHP Framework
AModules3
AJASON
CrossBrowserAjax
NanoAjax
SimpleJax
Stratos PHP Framework
Sybrain Framework
Symfony
phpAjaxTagsv
PHPWebBuilder
TinyAjax
XAJAX
XOAD
Zephyr

AJAX Magic

Reducing Page Load Time:

What AJAX does?In Simple words it does the same thing as any classical server side page does.
Then what is the difference?

The difference is that AJAX fetches only that amount of information that is needed for the current
operation.If we need to update a table structure it will fetch only the data for rendering that table and not the whole page again.This way it will reduce the page load time greatly.

Interested???
Now we will learn how to use AJAX..................

Reducing Page Load Time

Reducing Page Load Time:

It is accected by all of us from the experience that lesser the page loading time, the better user experinence.Consider the scnarion when an user has to wait more thant ten(10) seconds for page
to render after clicking a button or after submitting a form.

Why this amount of delay? Well this is because after submitting a form to the server ,server process the whole of the page(url) again.That is server produces all the HTML tags,images and all that heavy stuffs.This information is fetched from the server to the client and then again client browser interprets the server response.

So two redundant process are occuring after each user actions.Can we avaoid this?
Tell me can we?

And the good news is that ,YES WE CAN.
Some of us know about AJAX.
Using AJAX we can reduce page load time to minimal.Say we want to update shopping cart items
when the user selects/deletes any item.Previously we have to make a server trip or very complex javascript locgic for this purpose.

But with AJAX we dont need any of them.Interested???
Read ON..........................