AJAX Enabled ASP.NET Website using Javascript
AJAX means Asynchronous JavaScript and XML. AJAX is a group of interrelated web development techniques used to create interactive web applications or rich Internet applications.
Even though Web development is getting more and more popular, users still experience the nasty part of having to click a button, wait until a new page loads, click another button,wait until a new page loads, and so on. But with Ajax, you can communicate with the server behind the scenes without page refresh.
With AJAX you can feel webapplication as a Desktop application because AJAX enables your web application to do the work behinde the scene.
Here I am explaining about AJAX in Asp.Net using client-side Framework.
We need some javascript function to check whether browser will suitable for AJAX or not.
function GetXmlHttpObject() { var objXMLHttp=null; try{ // Firefox, Opera 8.0+, Safari objXMLHttp=new XMLHttpRequest(); } catch (e){ // Internet Explorer try{ objXMLHttp=new ActiveXObject("Msxml2.XMLHTTP"); } catch (e){ try{ objXMLHttp=new ActiveXObject("Microsoft.XMLHTTP"); } catch (e){ alert("Your browser does not support AJAX!"); return false; } } } return objXMLHttp; }
In the above code I created the object for XMLHttpRequest to validate the Firefox, Opera 8.0+, Safari Browser.
If the browser is not in the list, I created the object for ActiveXObject to validate the internet explorer.
The total function returns the XMLHttp obect based on your Browser.
Now you need to open this XMLHttp object.
xmlHttp.open(method, URL, asyncFlag)
xmlHttp.open method requires the three parameters.
Those are method type, URL of the backend page and asyncFlag.
Method type: The HTTP method used to open the connection, such as GET, POST, PUT, HEAD, or PROPFIND.
URL: The requested URL. i.e, backend page URL.
asyncFlag: A Boolean value indicating whether the call is asynchronous. The default is true.
xmlHttp=GetXmlHttpObject() if (xmlHttp==null) { alert("Browser does not support HTTP Request"); return; } var url = 'Ajaxdisplay.aspx'; var pars = 'name=' + name; xmlHttp.open("POST",url,true)
You can find xmlHttp.open method in the above code.
The XMLHttpRequest object has a property named onreadystatechange that handles asynchronous loading operations.
xmlHttp.onreadystatechange= function() { }
The readyState property tells you how the data loading is going. Here are the possible values the readyState property can take. Those are 0,1,2 and 4.
0 means uninitialized
1 means loading
2 means loaded
3 means interactive
4 means complete (i.e., all data downloaded from the back end page).
xmlHttp.onreadystatechange= function() { if(xmlHttp.readyState==4 || xmlHttp.readyState=="complete") { document.getElementById('lbl1').innerHTML = xmlHttp.responseText; //alert(xmlHttp.responseText); } else { document.getElementById('lbl1').innerHTML = 'Sorry, try again'; } } xmlHttp.send();
Even you can pass the paramers to the backend page.
var pars = 'name=' + name;
xmlHttp.send(pars);
The total javascript look like below.
var xmlHttp; function displayTime() { var name= document.getElementById('txt1').value; if(name=='') { alert('Please Enter Your Name'); document.getElementById('txt1').focus(); return false; } xmlHttp=GetXmlHttpObject() if (xmlHttp==null) { alert("Browser does not support HTTP Request"); return; } var url = 'Ajaxdisplay.aspx'; var pars = 'name=' + name; xmlHttp.open("POST",url,true) xmlHttp.setRequestHeader("Content-type", "application/x-www-form-urlencoded"); xmlHttp.setRequestHeader("Content-length", pars.length); xmlHttp.setRequestHeader("Connection", "close"); xmlHttp.onreadystatechange= function() { if (xmlHttp.readyState==4 || xmlHttp.readyState=="complete") { document.getElementById('lbl1').innerHTML = xmlHttp.responseText; //alert(xmlHttp.responseText); } else { document.getElementById('lbl1').innerHTML = 'Sorry, try again'; } } xmlHttp.send(pars) return false; }
In the backend page(here Ajaxdisplay.aspx ) you need to remove all HTML code because it pushes total response to the javascript.
The backend page look like below.
<%@ Page Language="VB" %> <script runat="server"> Protected Sub Page_Load(ByVal sender As Object, ByVal e As System.EventArgs) Dim name As String name = Request.Form("name") Response.Write(name & ", now the time is " & DateTime.Now.ToString) End Sub </script>
For the frond page we took the one text box, Button and one Label for displaying the response.
We assigning the ajax response to the label.
Whenever we executes the front end(here default.aspx), it displays one textbox for asking the user name and one button control.
Whenever you executing the code after entering the name, the label control displays the response as
Scott, now the time is 1/14/2008 4:34:34 PM
That means we are displaying the system time from the back end page with out page refreshing.
You can find attached file below for the source code.
Download source code here
