Sunday, January 27, 2013

Ajax Fundamentals part 1

Solution is Ajax

Combines  open standards-base technologies to solve aproblem in web application.
  • Asynchronous client-side call to server
  • Its well JavaScript
  • Data in varios formats
Update portion page without blocking other user action.
  • It is not like ASP.NET caching
Goal is to make browser / server interaction easy and fast .

XMLHttpRequest Object 

  • Most important object in Ajax
  • Enables communication between browser and server 
    • Request JavaScript 
    • Degrade gracefully if JaveScript turned off
  • Common object across all modern browsers
    • Introduced in IE5 around 2000
    • Since has become a part of W3C standart
Now we can have example about how use this object in client side html page

  1. Start Microsoft Visual Studio 2010 from Start | All Programs | Microsoft Visual Studio 2010.
  2. Create a new project in Visual Studio 2010 of type ASP.NET Web Application and name it TrainingAjax, and click OK 
    Open ASP.NET Project
    Open ASP.NET Project

  3. Right click on HelloAjax and select Add new Item and select from template HTML Page  name tit StateList.htm .
    Create StateList.htm Page
    Create StateList.htm Page
    1. Add the following list of state in the  StateList.htm page.

      <ul>
          <li>Alaska</li>
          <li>Arizona</li>
          <li>Californa</li>
          <li>Taxas</li>
          <li>New York</li>
          <li>Florida</li>
      </ul>
    2. Right click on HelloAjax and select Add new Item and select from template HTML Page  name tit CoreAjax.htm , and Add the following code on this page:

      <!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
      <html xmlns="http://www.w3.org/1999/xhtml">
      <head>
          <title></title>

          <script type="text/javascript">
              var xmlHttp = null;
              function GetLocations() {
                  response = null;
                  if (!xmlHttp) InitxmlHttp();
                  xmlHttp.open('Get', 'StateList.htm', false);
                  xmlHttp.send(null);
                  var content = xmlHttp.responseText;
                  var locations = document.getElementById('Locations');
                  if (content && Locations)
                      Locations.innerHTML = content;
              }

              function InitxmlHttp() {
                  try {
                      xmlHttp = new XMLHttpRequest();
                      return;
                  }
                  catch (ex) { }

                  try {
                      xmlHttp = new ActiveXObject("Msxml2.XMLHTTP.4.0");
                      return;
                  }
                  catch (ex) { }
                  try {
                      xmlHttp = new ActiveXObject("Msxml2.xmlhttp");
                      return;
                  }
                  catch (ex) { }
                  xmlHttp = null;
              }

          </script>
      </head>
      <body>
          <input type="button" value="Get Locations" onclick="GetLocations()" />
          <div id="Locations"></div>
      </body>
      </html>

    3. set CoreAjax.htm as start page and run the application click on the Get Locations button and you can see we get state list with out call back in browser 
      Run AJAX Code
      Run AJAX Code

      No comments:

      Post a Comment

      YallaTech Facebook page