locked
ASP.NET & RAW AJAX - chapter-2 RRS feed

  • 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