AJAX implementation using POST method in .NET

Here is where the real Ajax is implementation happens. In fact the .Net framework itself supports the partial page posting using Update Panel and etc. But what actually happens here is, the whole contents of the page goes to the server and comes back. Which is again a similar to a page postback. The only difference is the page events doesn't gets loaded again since its not a post back, but all the contents of the page goes to the server and then returns back.

The real implementation of the AJAX happens only with the JavaScript functions. Here you can really send the partial contents to the server and get back the desired results. There were two ways for the AJAX form posting.
1. GET method and
2. POST method.

Most people tend to go for the GET method since its easier to implement.(Particularly beginners). As you grow you have to be able to identify the instance where you are going to use(GET or POST method). In a simple way,

GET - should be used when a minimum amount of data is going to be passed to the server and collect all the information in a single AJAX call.

POST - when the request is going to be updated frequently and also the server data is going to be changed with the AJAX call then you have to go for POST. Also POST is secured compared to GET method since it doesn't expose the parameters(Query String values).

Here is the example where the POST implementation for simple Login.
EG:

Java script Function


function ajaxPOSTFunction(email,password)
{
var xmlhttp;
if (window.XMLHttpRequest)
{
// code for IE7+, Firefox, Chrome, Opera, Safari
xmlhttp=new XMLHttpRequest();
}
else if (window.ActiveXObject)
{
// code for IE6, IE5
xmlhttp=new ActiveXObject("Microsoft.XMLHTTP");
}
else
{
alert("Your browser does not support XMLHTTP!");
}
xmlhttp.onreadystatechange=function()
{
if(xmlhttp.readyState==4)
{
if (xmlhttp.status == 200)
{
if(xmlhttp.responseText.match("success"))
{
window.location = '<%= ResolveClientUrl("../profile.aspx") %>';
}
else
{
document.getElementById("validateTips").innerHTML = xmlhttp.responseText;
}
}
}
}

//GET METHOD IMPLEMENTATION - Same implementation using GET - commented
//xmlhttp.open("GET","login.aspx?email=" + email + "&password=" + password,true);
//xmlhttp.send(null);


//POST METHOD IMPLEMENTATION
var params = "email="+email+"&password="+password;
xmlhttp.open("POST",'<%= ResolveClientUrl("../login.aspx") %>',true);
xmlhttp.setRequestHeader("Content-type", "application/x-www-form-urlencoded; charset=UTF-8");
xmlhttp.setRequestHeader("Content-length", params.length);
xmlhttp.setRequestHeader("Connection", "close");
xmlhttp.send(params);
}

And here is the code for the login.aspx page - PageLoad() and Private method

Login.aspx

Protected Sub Page_Load(ByVal sender As Object, ByVal e As System.EventArgs) Handles Me.Load
Try
Dim email As String = Request.Form("email")
Dim password As String = Request.Form("password")
AuthenticateUser(email, password)
Catch ex As Exception
Response.Write(ex.ToString())
End Try

End Sub

Public Sub AuthenticateUser(ByVal userName As String, ByVal password As String)
Dim ErrorBuilder As New StringBuilder
Dim responseStatus As Integer
Dim responseText As String = String.Empty

responseStatus = Me.Controller.AuthenticateUser(userName, password)
If responseStatus = Constants.ServiceResponseStatus.Success Then
responseText = "success"
End If

Select Case responseStatus

Case Constants.ServiceResponseStatus.Success

Response.Write(responseText)
Response.End()

Case Constants.ServiceResponseStatus.Failure
Response.Write("failure")
Response.End()

Case Constants.ServiceResponseStatus.Exception
Response.Write("There has been an internal error. Please try to login again!")
Response.End()

Case Else
Response.Write("The username or the password you provided was not a valid. Please login with valid username and password.")
Response.End()

End Select

End Sub

Printer Friendly Button in JS

I was so pleased with Javascript. In an printer friendly version page if you wanna a Print button which will direct you for printing, then this is the simplest way.

Here we go.

EG: In the anchor tag just call the javascript function window.print().

javascript:window.print();

Click on the Print this page link to check out.

Print this Page

Really small piece of code right..