Best way for a dynamic box

Hello guys I newbie question :) - I am currently using PHP/Zend and now I need to display a form and other content in one of my pages. I do not want the page to reload and I cant use a pop-up window so the best option is to sort of dynamic display a "square" in the middle of the current page with this form being load on the go... this way i could have my pages (forms, text, whatever) being pulled in this square.

In order to keep compatibility with older/new and different browsers, what would be the best choice? DOJO - that is already in Zend, JQuery, or just HTML5/CSS3? Besides, if anyone could point me to some references of where can I find this info it w开发者_开发百科ould be great!

---

AJAX is the most common means (Asynchronous Javascript And Xml) to do this- which uses Javascript to poll other scripts (can be .php pages) which then return predefined output based on the request- this output can be content to inject into a page, or data which can then be interpreted by your page for another action (i.e. the output from another page etc..).

In this instance, your .php page could include JS (javascript) in the head, whether linked or inline, which would contain details for launching an AJAX request- namely, how often or on what trigger (button press etc), by what means (POST or GET), what is sent (any other variables you wish), what the target script is (the script which will handle the request and output your required content/data), and what to do when the response is recieved (i.e. which element on the page should be updated with the response).

A little about AJAX:

http://webdesign.about.com/od/ajax/a/aa101705.htm

http://webtrends.about.com/od/web20/a/what-is-ajax.htm

Likely the simplest way to begin is to use a pre-existing Javascript library like the ubiquitous jQuery (jquery.com), there are thousands of tutorials out there for it, and though you will need to do some Javascript programming, the library has meant that you can rely on fairly simple syntax to do so (as simple as $('#myelement').load('mypage.php')):

http://net.tutsplus.com/tutorials/javascript-ajax/5-ways-to-make-ajax-calls-with-jquery/

http://www.devirtuoso.com/2009/07/beginners-guide-to-using-ajax-with-jquery/

http://www.sitepoint.com/ajax-jquery/

http://yensdesign.com/2008/12/how-to-load-content-via-ajax-in-jquery/

In simple terms:

1. You have your php page with the element (area) that needs updating (page A)
2. Build another php script which outputs the content you want 'refreshing', e.g. the latest news stories, each time it is run (page B)
3. Link to the jQuery library in your header section (page A)
4. Write a simple jquery function in the header section of page A, which says every X seconds/minutes (or on demand), run an AJAX request to fetch the content of page B and insert into an element (DIV) within page A

---updated---

If you wish to use DOJO as opposed to jQuery, there is also a wealth of resources available:

http://dojotoolkit.org/documentation/tutorials/1.6/ajax/

http://www.infernodevelopment.com/dojo-ajax-tutorial

http://startdojo.com/2010/01/02/simple-ajax-form-tutorial/

http://today.java.net/pub/a/today/2006/04/27/building-ajax-with-dojo-and-json.html

http://www.ibm.com/developerworks/web/tutorials/wa-dojotoolkit/index.html

http://www.roseindia.net/dojo/