AJAX basic question

The UpdatePanel is designed to be the easiest possible way to AJAX-enable your site, focusing on the most important feature of AJAX: restricting updates to an area within a page instead of requiring a full refresh. Although it completely changes how requests are made by the browser, the UpdatePanel is written in such a way that your pages execute normally, which means you don not have to rewrite any controls or server-side logic.

As the browser loads the AJAX framework, a JavaScript onsubmit handler is added to every form element on the page. When the form submits, the handler checks whether this should be a “partial update” – one handled by an update panel. If so, it collects all the data being sent to the server, repackages it, and sends it, not as a regular browser request, but using the XmlHttpRequest object. In the browser, the onsubmit handler now returns false, effectively telling the browser to cancel the full page refresh. Meanwhile, the request has made its way to your web server looking just like a normal request with one difference: an extra HTTP header lets the AJAX infrastructure know that this is a partial update.

The page executes as normal and the output is collected ready to be sent to the browser. Just before it is sent however, another bit of AJAX magic kicks in. Everything that is not needed for the UpdatePanel is stripped out and some extra data is sent (including updated hidden fields and ViewState for controls not included in the UpdatePanel).

When this arrives back at the browser, the JavaScript library updates everything, including the contents of the UpdatePanel, but also all the extra data. If your ASP.NET page updates the page title or even the page’s CSS styles, all of these are updated automatically.

How to make javascript work along with Ajax UpdatePanel[^]