Asked by:
ASP.NET & RAW AJAX - chapter-2

Question
-
User-1137493631 posted
This is second article .. from
ASP.NET & RAW AJAX
Chapter 2 : how to handle raw ajax from asp.net
Step 1 .create new web site solution from visual studio 2008/2005/2003
Step 2. Add new aspx page (Default.aspx)
Step 3. Add new ashx file (Callback.aspx)
Client side code
Write the following inline code on the Default.aspx page
<html> <body> <script type="text/javascript"> function ajaxFunction(_requestname) { var xmlhttp; if (window.XMLHttpRequest) { // code for IE7+, Firefox, Chrome, Opera, Safari xmlhttp=new XMLHttpRequest(); } else { // code for IE6, IE5 xmlhttp=new ActiveXObject("Microsoft.XMLHTTP"); } xmlhttp.onreadystatechange=function() { if(xmlhttp.readyState==4) { if(xmlhttp.status==200) document.getElementById('lblResult').innerHTML =xmlhttp.responseText; } } var vMyName=document.getElementById('txtName').value xmlhttp.open("GET","callback.ashx?requestname="+_requestname+"&name="+vMyName,true); xmlhttp.send(null); } </script> <form name="myForm"> Name<input type="text" value="thirumaran" id="txtName" /> <input type="button" id="btnRequest" onclick="ajaxFunction('yourname');" value="MyName" /> <input type="button" id="Button1" onclick="ajaxFunction('yourfriendname');" value="MyFriendName" /> <label id="lblResult"> </label> </form> </body> </html>
Here the JavaScript function ajaxFunction – is used to create new Request to the server.
var xmlhttp; if (window.XMLHttpRequest) { // code for IE7+, Firefox, Chrome, Opera, Safari xmlhttp=new XMLHttpRequest(); } else { // code for IE6, IE5 xmlhttp=new ActiveXObject("Microsoft.XMLHTTP"); }
-These lines is used to create new Instance of XMLHTTp object.i hope that you are aware of the XML http request usage. For more details please go through the folloing link.
http://forums.asp.net/t/1489223.aspx
after getting the response or result the following line will be call
xmlhttp.onreadystatechange=function() { if(xmlhttp.readyState==4) { if(xmlhttp.status==200) document.getElementById('lblResult').innerHTML =xmlhttp.responseText; } }
Here the xmlhttp.readyState=4 means our page request is compleate and redy to get the result or reponse
Some more ready state codes are there please refre the following table
State
Description
0
The request is not initialized
1
The request has been set up
2
The request has been sent
3
The request is in process
4
The request is complete
And xmlhttp.status=200 – means our request is successfully ok without eny erorr and response is ready to getting result.
document.getElementById('lblResult').innerHTML =xmlhttp.responseText;
-here I have to add the response result ( result text) to a lables which name is blresult.this way you can apply the result any other basic javascript Html control.
And
var vMyName=document.getElementById('txtName').value
xmlhttp.open("GET","callback.ashx?requestname="+_requestname+"&name="+vMyName,true);
xmlhttp.send(null);
these code is used to make call the the server (callback.ashx?) with nessay paramter like request name and your input value like that
and finely the xmlhttp rquest will send the the server .here the server meadns callback.asphs file.this files will exuecute in server(IIS server)
Server side code
Write the following inline code on the callback.ashx page
<%@ WebHandler Language="C#" %> using System; using System.Web; public class callback : IHttpHandler { HttpContext _context; public void ProcessRequest(HttpContext context) { _context = context; context.Response.Expires = 0; CallBackHandler(); } private void CallBackHandler() { try { _context.Response.Clear(); _context.Response.Expires = 0; _context.Response.ExpiresAbsolute = DateTime.Now; _context.Response.Write(fnResultBuilder()); } catch (Exception) { throw; } } private string fnResultBuilder() { string strRquestName = _context.Request.QueryString["requestname"]; string strReturnValue = ""; switch (strRquestName) { case "yourname": strReturnValue = "your Name is " + _context.Request.QueryString["name"].ToString(); break; case "yourfriendname": strReturnValue = "your Friend Name is " + _context.Request.QueryString["name"].ToString(); break; } return strReturnValue; } public bool IsReusable { get { return false; } } }
The following function is entry point of our request
HttpContext _context; public void ProcessRequest(HttpContext context) { _context = context; context.Response.Expires = 0; CallBackHandler(); }
Here I have called the user defined function CallBackHandler() to get the result
Inside the callback handler I have get the result from the fnResultBuilder function .this function will ge the request informatin about what kind of request is this and what should the function too like that information are availble on that function
_context.Response.Write(fnResultBuilder());
And the finally
string strRquestName = _context.Request.QueryString["requestname"];
This line indicates the kind of response is this and what is request name like that.
If the request name is “yourname” then the folloing line will execute and give the response as response .write method
case "yourname":
strReturnValue = "your Name is " + _context.Request.QueryString["name"].ToString();
break;
That’s all from the second chapter kindly revert me is the any clarifications.
I hope that this article is very simple one and very useful…
Will see in third chapter with interesting topic,.
By
Thanks & regards
Thirumaran.S
Thursday, November 5, 2009 6:59 AM
All replies
-
User2022958948 posted
Thank you for provide the native ajax ultilization in asp.net. Hope this link can also help someone: http://forums.asp.net/t/1208532.aspx
If you can post an additional replay or comment so that I can close this thread that will be better.
Monday, November 9, 2009 4:15 AM -
User-1137493631 posted
Very Nice Vince Xu-MSFT.
The Main reason for this article is...how to implement Ajax concept..without ActiveX.
I hope you are familiar with ActiveX component.
If the user disable the ActiveX component on the browser..then our Native Ajax OR Microsoft Ajax won’t work..
How the Ajax Method will work without ActiveX – I will post the article soon with ASP.NET Example.
Monday, November 9, 2009 9:30 AM