AJAX and XML HTTP Request

About AJAX
Ajax is an Asynchronous JavaScript And XML, it makes an XMLHTTP request to the server in the background. I could say it is extension of Document Object Model (DOM). Microsoft Ajax designed based on JavaScript Object Notation (JSON); classes & their member functions are serialized using JSON Serialization. And AJAX is a combination of DOM, JavaScript, Cascading Style Sheet (CSS) and XML. Look and feel comes from CSS, logics from JavaScript, data from XML and requests from DOM libraries (with JSON).
Features:
• Makes Partial post back to the server(with out a round trip or a post back)
• Improve performance in an efficient way(due to light weight objects in request)
• Update page based on conditional(using update panel mode)
• Provide Rich look and feel(using Ajax tool kit from CodePlex)
• Compatible for all major browsers
• Easy to invoke web services requests
• Secure authentication
• Easy to mange profiles
Required:
• Minimum knowledge of Javascirpt
• Understand DOM requests
• XMLHTTP Request (Handle request from Client to Server)
• Familiar with Cascading Style Sheet(CSS)
Example for XMLHTTPRequest using DOM: Article Rating, it saves into save.txt file.

Default.aspx:
HTML:

< form id="form1" runat="server">
< div>
< table>
< tr>
< td>
Data
< /td>
< td>
< asp:TextBox ID="txtSave" runat="server" TextMode="MultiLine" Height="112px" ReadOnly="true"
Text="This is example for XMLHTTPRequest" Width="496px">< /asp:TextBox>
< /td>
< /tr>
< tr>
< td colspan="2" align="right">
< asp:DropDownList ID="dllRating" runat="server">
<asp:ListItem Text="1" Value="1"></asp:ListItem>
<asp:ListItem Text="2" Value="2"></asp:ListItem>
<asp:ListItem Text="3" Value="3"></asp:ListItem>
<asp:ListItem Text="4" Value="4"></asp:ListItem>
<asp:ListItem Text="5" Value="5"></asp:ListItem>
</asp:DropDownList>
<input type="button" name="btnSave" runat="server" value="Rate" onclick="javascript:return SaveData();" />
</td>
</tr>
<tr>
<td colspan="2">
<asp:Label ID="lblMessage" runat="server"></asp:Label>
</td>
</tr>
</table>
</div>
</form>


Javascript:
<script language="javascript" type="text/javascript">
var xmlHttp = null;
if (window.XMLHttpRequest) { // IE7, Mozilla, Safari, Opera, etc.
xmlHttp = new XMLHttpRequest();

}
else if (window.ActiveXObject) {
try {

xmlHttp = new ActiveXObject("Microsoft.XMLHTTP"); //IE 5.x, 6
}

catch (e) {
}

}
function SaveData() {

try {

if (xmlHttp) {
var i = document.getElementById('dllRating').selectedIndex
i += 1;
var url = 'Request.aspx?rating=' + i;
xmlHttp.open("GET", url, true); // true = async
xmlHttp.setRequestHeader('Content-type', 'application/x-www-form-urlencoded');
xmlHttp.send(null);
alert('Details have been saved into database or txt(save.txt) file sucessfully!, thanks for rating...');
}
}
catch (e) {
alert('Unable to save details into databse or txt file');
}
}
</script>

Request.aspx

Only Codebehind:

using System;
using System.IO;
namespace XMLHTTPRequest
{
public partial class Request : System.Web.UI.Page
{
protected void Page_Load(object sender, EventArgs e)
{
if (Request.QueryString["rating"] != null)
{
string txt = Server.MapPath("~") + "\\Save.txt";
if (File.Exists(txt))
{
StreamWriter writer = new StreamWriter(txt);
writer.Write("You rated now: " + Request.QueryString["rating"].ToString());
writer.Close();
}
}
}
}
}


AJAX.Net
Ajax contains collection of client side libraries and their functionalities & behaiviour balanced through Ajax server side objects/components.

Below is the architecture from Microsoft:
Ajax Objects:
Script Manager: it loads all client side libraries for making partial render and it is required to manage all other Ajax objects. Finally all required resources are reserved in system.web.extensions.dll

Update Panel: selection of web page to make Synchronous or Asynchronous post back to the server, by default it is Asynchronous.

Content Template: Holds all server side controls to maintain content for post backs.

Triggers: decide Synchronous or Asynchronous for a control on an event.

Update Progress: Indicate to the user Asynchronous post back is running inside.

Timer: Performs post back based on intervals.


Client Side Namespaces:
Sys: All fundamental logics & base classes
Sys.Net: For remoting & web services
Sys.Serialization: Data serialization(JSON serialization)
Sys.Services: Authentication, Profile services
Sys.UI: Control’s events, properties and methods
Sys.Webforms: Partial Page rendering

Server Side Namespaces:
System.web.configuration: All configuration info.
System.web.handlers: HTTP Handler information for request/response (.aspx,.ashx,.asmx, etc..,)
System.Web.Script.Serialization: JSON Serialized classes & their behaviour.
System.Web.script.Serivces: Related to Web services for Ajax.
System.Web.UI: Related to web controls, events, properties & methods.
System.Web.UI.Design: Look & Feel.

Example:
Default.aspx:

<form id="form2" runat="server">
<asp:ScriptManager ID="sm" runat="server" AsyncPostBackTimeout="3000">
</asp:ScriptManager>
<asp:UpdatePanel ID="upd" runat="server">
<ContentTemplate>
<div>
<table>
<tr>
<td>
Data
</td>
<td>
<asp:TextBox ID="txtSave" runat="server" TextMode="MultiLine" Height="112px" ReadOnly="true"
Text="This is example for AJAX.Net" Width="496px"></asp:TextBox>
</td>
</tr>
<tr>
<td align="right" colspan="2" width="100%">
<table align="left">
<tr>
<td>
<td>
<asp:UpdateProgress ID="progress" runat="server">
<ProgressTemplate>
<img src="Updating.gif" height="25" width="35" />Updating!...
</ProgressTemplate>
</asp:UpdateProgress>
</td>
</td>
</tr>
</table>
<asp:DropDownList ID="ddlRating" runat="server">
<asp:ListItem Text="1" Value="1"></asp:ListItem>
<asp:ListItem Text="2" Value="2"></asp:ListItem>
<asp:ListItem Text="3" Value="3"></asp:ListItem>
<asp:ListItem Text="4" Value="4"></asp:ListItem>
<asp:ListItem Text="5" Value="5"></asp:ListItem>
</asp:DropDownList>
<asp:Button ID="btnSave" Text="Save" runat="server" OnClick="btnSave_Click" />
</td>
</tr>
<tr>
<td colspan="2">
<asp:Label ID="lblMessage" runat="server"></asp:Label>
</td>
</tr>
</table>
</div>
</ContentTemplate>
</asp:UpdatePanel>
</form>

Javascript:
<script language="javascript" type="text/javascript">

// client side events.
function pageinit() {
alert('Client side Ajax Initialization');
}

function pageLoad(sender, args) {
alert('Client side Ajax Page load');
}
function pageUnload(sender, args) {
alert('Client side Ajax Page Unload');
}


// use Sys name space for invoke any other events with arguments.

</script>

Codebehind:

using System;
using System.Collections.Generic;
using System.Linq;
using System.Web;
using System.Web.UI;
using System.Web.UI.WebControls;
using System.IO;
namespace AjaxImplmentation
{
public partial class _Default : System.Web.UI.Page
{
protected void Page_Load(object sender, EventArgs e)
{

}

protected void btnSave_Click(object sender, EventArgs e)
{
System.Threading.Thread.Sleep(3000);
string txt = Server.MapPath("~") + "\\Save.txt";
if (File.Exists(txt))
{
StreamWriter writer = new StreamWriter(txt);
writer.Write("You rated now: " + ddlRating.SelectedIndex+1 );
writer.Close();
lblMessage.Text = "Details have been saved into txt file from server event.";
}

}
}
}


Reference: http://www.kvbhaskar.com/PostedFiles/75bed50c.aspx


Attachments

  • AJAX.Net Overview (31252-102210-Ajax Examples.zip)
  • AJAX and XML HTTP Request (31252-102215-Ajax Examples.zip)
  • Comments

    No responses found. Be the first to comment...


  • Do not include your name, "with regards" etc in the comment. Write detailed comment, relevant to the topic.
  • No HTML formatting and links to other web sites are allowed.
  • This is a strictly moderated site. Absolutely no spam allowed.
  • Name:
    Email: