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.