I. Introduction This article describes a simple way to achieve
AJAX function is added to the ASP.NET web application. We will also discuss the advantages and disadvantages of using AJAX. In order to illustrate the problem, this article also provides some available
JavaScript and
C # .NET code.
Second, why use AJAX
Most readers may already know that Ajax represents asynchronous
JavaScript
XML. This technology is first introduced by Microsoft in 1999 and is known as "using the DHTML / JavaScript web application that uses remotely). The basic idea of this technology is to allow one
The Internet browser is an asynchronous HTTP call to a remote page / service, and updates a current web page with the result of the received result without refreshing the entire page. According to this technological creator's opinion, this technology should be able to improve the client's experience - making HTTP page appearance and use feelings very similar
Windows desktop app.
Because the core implementation of this technology is based on Internet browser features, their use is very limited at the time. However, several years have passed, with a new generation of browser support and a large application practice (such as Google, Amazon.com, eBay, etc.), this technology has rejuvenated.
Today, it is famous in Ajax, as a natural components of the dynamic page that provides advanced user experience.
Third, program description
The scheme we recommend in this article is very simple, but it is very effective in effectively realizing the AJAX functionality. This program is easy to maintain and modify, and developers do not require any special skills; and, according to our experience, it is also compatible with cross-browser.
Basically, a conventional similar AJAX implementation includes two main components: a client HTML page that uses JavaScript code to call and receive a response; a remote page - it can receive a request and respond to the requested information. The JavaScript code in the client page is responsible for instantiation
XMLHTTP object, then provide this object a callback method - it is responsible for processing the received information, and finally send the request to the remote page via the XMLHTTP object. All of this is implemented by JavaScript code.
Our methods are mainly for applications in ASP.NET applications, and consider the following possible scenarios:
· AJAX calls can occur on different ASP.NET pages of the web application even on the remote page;
· A remote page URL may contain dynamically calculated parameters, and it is more convenient to build a URL string at Code-Behind at the ASP.NET page;
· A remote page may respond to a complex data analysis request before updating an HTML page;
· A remote page may or or an external third-party page, or the web application own page or service.
All of these considerations are displayed in the figure below:
Fourth, realize
(1) Basic Ajax JavaScript method
I divide all JavaScript methods to two parts: call the page-specific JavaScript method, and the Ajax JavaScript method for all calls pages. The specific method also includes a callback function because it is responsible for updating the page content. The general AJAX method is responsible for instantizing an XMLHTTP object and sends an asynchronous request to the remote page.
The process of getting an XMLHTTP object is different from the different browsers. I divide them into two different basic types: Microsoft browser (one of IE families) and Mozilla browser (it refers to Mozilla Firefox, Netscape, or one of Safari). I also tested the code in this article on the Opera browser, but I can't guarantee that it will work well.
function GetXmlHttpObject (handler) {var objXmlHttp = null; if (window.XMLHttpRequest!) {// Microsoft objXmlHttp = GetMSXmlHttp (); if (objXmlHttp = null!) {objXmlHttp.onreadystatechange = handler;}} else {// Mozilla | if (! objXmlHttp = null) {objXmlHttp.onload = handler;; objXmlHttp.onerror = handler;}} return objXmlHttp;} function GetMSXmlHttp () {var xmlHttp = null; | netscape Safari objXmlHttp = new () XMLHttpRequest var clsids = [ "Msxml2.xmlhttp.6.0", "msxml2.xmlhttp.5.0", "msxml2.xmlhttp.3.0", "msxml2.xmlhttp.2.6", "microsoft.xmlhttp.1.0", "Microsoft .Xmlhttp.1 "," microsoft.xmlhttp "]; for (var i = 0; i Function SendxmlhttpRequest (XMLHTTP, URL) {XMLHTTP.Open ('get', url, true); xmlhttp.send (null);} I use a Get HTTP method to a given URL, but this can be changed by modifying the JS code above. (2) Page-specific ways now, we have established all methods that implement one to remote page calls. To do this, we need to pass the callback function name to the getXmlhttpobject method, then pass the URL string to the SendxmlhttpRequest method. var xmlHttp; function ExecuteCall (url) {try {xmlHttp = GetXmlHttpObject (CallbackMethod); SendXmlHttpRequest (xmlHttp, url);} catch (e) {}} // when state changes (e.g., when data is received), CallbackMethod excitation Function CallbackMethod () {Try {// readyState = 4 or 'Complete' represents the data has returned if (xmlhttp.readyState == 4 || xmlhttp.readystate == 'complete') {var response = Xmlhttp.ResponseText; if ( Response.Length> 0) {// Update page Document.getElementByid ("ElementID"). InnerHtml = response;}}} Catch (e)}} CallbackMethod is responsible for updating the page content. In our example, it simply updates the internal HTML of the given HTTP element. However, in actual development, it may be more complex. The last question for calling page implementations is how we call the ExecuteCall JS method. In fact, this does this depend on what this page is doing. In some cases, the ExecuteCall method is called when the JS event is excited. However, if this is not the case, we can register this method as a startup script in this page - use the corresponding Code-behind on this page C # code.
