Loading ...
Sorry, an error occurred while loading the content.

Ajax for beginners with a bit change

Expand Messages
  • shoeb240 Abdullah
    Ajax is not as hard as some people think. AJAX is a method of sending and receiving data (HTML, XML) from a server-side application through javascript. Since
    Message 1 of 1 , Sep 22, 2006
    • 0 Attachment
      Ajax is not as hard as some people think. AJAX is a method of sending and receiving data (HTML, XML) from a server-side application through javascript. Since javascript offers the ability to change the contents of a web page on-the-fly, we can use the response text in our page as we want.

                I am trying to describe AJAX easily for the beginers, so hole things do not come here. I hope to describe more in future.

               

      Step 1:

      The XMLHttpRequest object works differently in Internet Explorer and Mozilla-like browsers. To create an XMLHttpRequest object in IE, the following can be used:

       

      [javascript code]

      var http= new ActiveXObject("Microsoft.XMLHTTP");

       

      For Safari and Mozilla, a simple call to the object's constructor function does the job:

      [JavaScript code]

      var http = new XMLHttpRequest();

       

      The object reference returned by both constructors is to an abstract object that works entirely out of view of the user. Its methods control all operations, while its properties hold, among other things, various data pieces returned from the server.

      Step 2:

      Create the request. The first argument to the open function is the method (POST/GET), the second argument is the url and the third argument is 
      

      asynchronous. I will describe it later.

      [JavaScript code]

      http.open('get', 'internal_request.php', true);
       
      
      
      Step 3:
      
      
      Define a function to call for states 1-4. The states are:
      • 0: The request is uninitialized (before you've called open() ).
      • 1: The request is set up, but not sent (before you've called send() ).
      • 2: The request was sent and is in process (you can usually get content headers from the response at this point).
      • 3 : The request is in process; often some partial data is available from the response, but the server isn't finished with its response.
      • 4 : The response is complete; you can get the server's response and use it.
      This will be our handleProduct function that we define below.
      
       

      [JavaScript code]

      http.onreadystatechange = handleProducts; 
       
      
      
       
      Step 4:
                  Send the data. We use something other than null when we are sending using the POST method. 
      

      [JavaScript code]

      http.send(null);

       

      Step 5:

      [JavaScript code]

      function handleProducts(){
      /* Make sure that the transaction has finished. The XMLHttpRequest object has a property called readyState with several states described above*/
      
       
      
      
                  if(http.readyState == 4)
      
      
                  { //Finished loading the response
       
                  /* We have got the response from the server-side script, let's see just what it was using the responseText property of 
       the XMLHttpRequest object. */
      
      
                  var response = http.responseText;
      
      
                  
                  /* And now we want to change the product_categories <div> content.
         we do this using an ability to get/change the content of a page element  that we can find: innerHTML. */
                  document.getElementById('product_categorye').innerHTML = response;
      
      
                  }
      }

       

       

       

      Example:

      <html>
      <head>
      <script type="text/javascript">
      var http // for xml, name it 'xmlhttp' for clarity

      function loadXMLDoc(url, name)
      {
       http= (window.XMLHttpRequest ? new XMLHttpRequest(): ((window.ActiveXObject) ? new ActiveXObject("Microsoft.XMLHTTP") : null) );
          if (http)
          {
           http.onreadystatechange=state_Change
           http.open("POST",url,true)
        http.setRequestHeader('Content-Type', 'application/x-www-form-urlencoded');
           http.send('name='+name)
          }
      }

      function state_Change()
      {
        // 0: Uninitialized 1: Loading 2: Loaded 3: Interactive 4: Finished  

        // if http shows "loaded"
        if (http.readyState==4)
        {
       
         document.getElementById('A1').innerHTML=http.responseText; // for xml use responseXML

        }
      }

      </script>
      </head>

      <body onLoad="">
      <h2>Using the HttpRequest Object</h2>


      <p><b>response:</b>
      <br><span id="A1"></span>
      </p>
      <input type="button" name="dsa" onClick="loadXMLDoc('test_php.php?office=eBizzSol','Shoeb')" value="Shoeb">
      <input type="button" name="dsa" onClick="loadXMLDoc('test_php.php?office=someWhereIn','Hasin')" value="Hasin">
      </body>
      </html>

       

       

      test_php.php

       

      <?php
       $name = $HTTP_POST_VARS['name'];
       echo "My Name Is $name<br>";
        echo 'Office: '.$_GET['office'];
      ?>
       

       
      Regards,
      Md. Shoeb Abdullah
      Zend Certified Engineer
    Your message has been successfully submitted and would be delivered to recipients shortly.