How to use Ajax or Jquery to GET and Post Data

AJAX allows web pages to be updated asynchronously by exchanging small amounts of data with the server behind the scenes. This means that it is possible to update parts of a web page, without reloading the whole page.

How does it work?

Ans:

There are two section Ajax coding:

Http Request:

To make browser compatibility, we write code for different browsers:

For IE6 and IE5:
Create an instance for ActiveXObject. Check below code

xmlhttp=new ActiveXObject("Microsoft.XMLHTTP");

For IE7+, Firefox, Chrome, Opera, Safari:
Create an instance for XMLHttpRequest. Check below code

xmlhttp=new XMLHttpRequest();

Next thing is to check your browser running this script:

If window.XMLHttpRequest is true. It means that your code is compatible with IE7+ or Firefox or Chrome, Opera or Safari.

If we combine above codes, You get a new on to send Http Request


if (window.XMLHttpRequest)
   {
        // code for IE7+, Firefox, Chrome, Opera, Safari
      xmlhttp=new XMLHttpRequest();
   }
else  {
             // code for IE6, IE5
           xmlhttp=new ActiveXObject("Microsoft.XMLHTTP");
 }


Http Response:

Check few terms before writing codes for http response
if xmlhttp.readyState = 4, It means your http request sent completed
if xmlhttp.status = 200, It means you  get http response successfully


Following is code for Http response:

xmlhttp.onreadystatechange=function()
 {
     if (xmlhttp.readyState==4 && xmlhttp.status==200)  
        {  
             document.getElementById("ID OF HTML TAG").innerHTML=xmlhttp.responseText;  
         }
 }

Now open http response under "getmydata" using method GET

xmlhttp.open("GET","URL WITH QUERYSTRINGS",true);xmlhttp.send();

Now i am combining above codes to make a complete code to use.


<script>
    function sendData(str)  
    {    
         if (str=="")      
            {            
               document.getElementById("getmydata").innerHTML="";        
               return;      
            }  
         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 && xmlhttp.status==200)              
                     {                    
                          document.getElementById("getmydata").innerHTML=xmlhttp.responseText;            
                     }      
               }
        xmlhttp.open("GET","test.php?p="+str,true);    
        xmlhttp.send();
   }
</script>

1. Put this javascript before </head>
2. Suppose i have a form with dropdown. See Below

<select name="mydate" onChange="sendData(this.value)">
   <option value="2001">2001</option>
   <option value="2002">2002</option>
   <option value="2003">2003</option>
</select>

If you see this dropdown form carefully, you can see that an even is running onchange. When you change dropdown selection. Selected value send to SendData function.

When you are using ajax coding, few browsers are not supporting that syntax. So, We should write browser compatible code.
In ajax operation, You send http request to server on events like onClick, onChange, onKeyup etc and get back a http response.


SendData function calling an ajax. Under SendData function, Your selected value transfer using str. Here str storing your selected value.

Suppose you have selected "2002" from dropdown form. Then SendData transfer value "2002" to str.

Using following syntax to transfer value to your server,

xmlhttp.open("GET","test.php?p=2002",true);

Next thing, Where do you want to show result from test.php?p=2002

Write a html tag with id to see your result on webpage.

For example:

I have created a tag, <div id="getmydata"></div>

Now your test.php page:

Create a page test.php.
Write following code and put following code

<?php
      echo $_GET['p'];
?>

You will see output of $_GET['p'] under div with id getmydata.

Note:
1. You can take any unique id, it's not necessary to write "getmydata" always.
2. You can use any html tag, depends on your requirement. It's not necessary to write div only.
3. Similarly you can replace test.php and its querystrings.

In next post, I will show you a different code for ajax.

Enjoy coding.