BLOG TIPS CODES

Showing posts with label AJAX. Show all posts

Passing Data to the server with POST using AJAX

Posted by LAHAUL SETH ~ Comments

Like using the GET query, data can also be send to the server using POST query.

Here's how.

choose_msg.php

<?php
if($_REQUEST["data"]=="1")
{
echo "You sent the server a value of 1";
}
if($_REQUEST["data"]=="2")
{
echo "You sent the server a value of 2";
}
?>

AJAX Code :

Before executing the program :

Clicking on "Retrieve Message 1"

Clicking on "Retrieve Message 2"

Passing Data to the Server with GET using AJAX

Posted by LAHAUL SETH ~ Comments

When using the GET method of fetching data from the server, data is sent from Web pages back to the server using URL encoding, which means data is appended to the URL that is read back from the server.

choose_msg.php

<?php
if($_REQUEST{"data"}=="1") // If a value '1' is sent to the server
{
echo "You sent the server a value of 1";
}
if($_REQUEST{"data"}=="2") // If a value '2' is sent to the server
{
echo "You sent the server a value of 2";
}
?>

AJAX Code :

<html>
<head>
<title>An AJAX DEMO</title>
<script language="javaScript">
var XMLHttpRequestObject=false;
if(window.XMLHttpRequest)
{
   XMLHttpRequestObject=new XMLHttpRequest();
}
else if(window.ActiveXObject)
{
   XMLHttpRequestObject=new ActiveXObject("Micosoft.XMLHTTP");
}
function getData(dataSource,divID)
{
   if(XMLHttpRequestObject)
     {
        var obj=document.getElementById(divID);
        XMLHttpRequestObject.open("GET",dataSource);
            XMLHttpRequestObject.onreadystatechange=function()
            {
               if(XMLHttpRequestObject.readyState==4 && XMLHttpRequestObject.status==200)
                 {
                    obj.innerHTML=XMLHttpRequestObject.responseText;
         }
            }
        XMLHttpRequestObject.send(null);
}
}
</script>
</head>
<body>
<h3>Sending AJAX data with GET</h3>
<form>
<input type="button" value="Retrieve Message 1" onclick="getData('choose_msg.php?data=1','targetDiv')">
<input type="button" value="Retrieve Message 2" onclick="getData('choose_msg.php?data=2','targetDiv')">
</form>
<div id="targetDiv">
<p>The retrieved message will appear here</p>
</div>
</body>
</html>

Before executing the program :

Clicking on "Retrieve Message 1"

Clicking on "Retrieve Message 2"

The 1st button sends value '1' to the server and according the php file prints "You sent the server a value of 1".
Similarly, the 2nd button sends value '2' to the server and accordingly the php file prints the conditional output.

Using AJAX to retrieve message from a php file

Posted by LAHAUL SETH ~ Comments

This simple program just fetches the contents of a php file, data.php , from the server when you click the button. The difference between this application and a normal web page is that when you click the button the page doesn't blink and redisplay - all that happens is the default text is replaced by a text from a text file which is already stored in the server.

Here is the php code.

<?php
echo "Hello World !!! ";
echo " Welcome to programming in AJAX using PHP ";
?>

The AJAX code :

<html>
<head>
<title>An AJAX DEMO</title>
<script language="javaScript">
var XMLHttpRequestObject=false;
if(window.XMLHttpRequest)
{
   XMLHttpRequestObject=new XMLHttpRequest();
}
else if(window.ActiveXObject)
{
   XMLHttpRequestObject=new ActiveXObject("Micosoft.XMLHTTP");
}
function getData(dataSource,divID)
{
   if(XMLHttpRequestObject)
    {
        var obj=document.getElementById(divID);
        XMLHttpRequestObject.open("GET",dataSource);
           XMLHttpRequestObject.onreadystatechange=function()
           {
               if(XMLHttpRequestObject.readyState==4 && XMLHttpRequestObject.status==200)
               {
                    obj.innerHTML=XMLHttpRequestObject.responseText;
         }
           }
       XMLHttpRequestObject.send(null);
}
}
</script>
</head>
<body>
<h3>An Ajax Demo</h3>
<form>
<input type="button" value="Retrieve message from txt file" onclick="getData('data.php','targetDiv')">
</form>
<div id="targetDiv">
<p>The retrieved message will appear here</p>
</div>
</body>
</html>

Before clicking the button :

After clicking the button :

The button is connected to a Javascript function, getData and passes two arguments to that function - "data.php", the name of the file on the server to fetch, and "targetDiv", which is the name of the <div> element to display the downloaded text in.

Using AJAX to retrieve a message from a text file

Posted by LAHAUL SETH ~ Comments

This simple program just fetches the contents of a text file, data.txt, from the server when you click the button. The difference between this application and a normal web page is that when you click the button the page doesn't blink and redisplay - all that happens is the default text is replaced by a text from a text file which is already stored in the server.

Here is the code.

<html>
<head>
<title>An AJAX DEMO</title>
<script language="javaScript">
var XMLHttpRequestObject=false;
if(window.XMLHttpRequest)
{
   XMLHttpRequestObject=new XMLHttpRequest();
}
else if(window.ActiveXObject)
{
   XMLHttpRequestObject=new ActiveXObject("Micosoft.XMLHTTP");
}
function getData(dataSource,divID)
{
   if(XMLHttpRequestObject)
    {
        var obj=document.getElementById(divID);
        XMLHttpRequestObject.open("GET",dataSource);
           XMLHttpRequestObject.onreadystatechange=function()
           {
               if(XMLHttpRequestObject.readyState==4 && XMLHttpRequestObject.status==200)
               {
                    obj.innerHTML=XMLHttpRequestObject.responseText;
           }
           }
       XMLHttpRequestObject.send(null);
     }
}
</script>
</head>
<body>
<h3>An Ajax Demo</h3>
<form>
<input type="button" value="Retrieve message from txt file" onclick="getData('data.txt','targetDiv')">
</form>
<div id="targetDiv">
<p>The retrieved message will appear here</p>
</div>
</body>
</html>

Before clicking the button :

After clicking the button :

The button is connected to a Javascript function, getData and passes two arguments to that function - "data.txt", the name of the file on the server to fetch, and "targetDiv", which is the name of the <div> element to display the downloaded text in.