Ajax GET method of form submission sample code & demo

Enter your name , you will get a welcome message as output.

We will keep a standard code sample for using in our Ajax applications. This code sample is kept as simple as possible with minimum requirements for easy understanding. This script can be developed further to have more facilities and functionalities.

Here we have used GET method of form submission where data posted in a form is taken to a backend PHP script (ajax-get-testck.php). The PHP script is only reply back the same data string by adding a Welcome message to this.

If you are new to Ajax then try to read our previous tutorials on basics of Ajax.

There are three parts of our Ajax function. First part checks the browser support for Ajax, second part posts the data to backend script or server side script using xmlhttp object. Third part receives the data ( or the output ) from the server side script for further processing or display.

<html>
<body>

<script type="text/javascript">
function ajaxFunction(str)
{
var httpxml;
try
  {
  // Firefox, Opera 8.0+, Safari
  httpxml=new XMLHttpRequest();
  }
catch (e)
  {
  // Internet Explorer
  try
    {
    httpxml=new ActiveXObject("Msxml2.XMLHTTP");
    }
  catch (e)
    {
    try
      {
      httpxml=new ActiveXObject("Microsoft.XMLHTTP");
      }
    catch (e)
      {
      alert("Your browser does not support AJAX!");
      return false;
      }
    }
  }
///////End of First part- Checking browser support//////

////// Start of receiving data from server //////

function stateChanged() 
    {
    if(httpxml.readyState==4)
      {
      document.myForm.time.value=httpxml.responseText;
      }
    }
///////  End of receiving data from server //////

///////  Start of posting data to server ///////

var url="ajax-get-testck.php";
url=url+"?txt="+str;
url=url+"&sid="+Math.random();
httpxml.onreadystatechange=stateChanged;
httpxml.open("GET",url,true);
httpxml.send(null);
  }
//////// End of posting data to server ////////

</script>

<form name="myForm">
Name: <input type="text"
onkeyup="ajaxFunction(this.value);" name="username" />
Time: <input type="text" name="time" />
</form>

</body>
</html>

At the server end we have the file ajax-get-testck.php, check this line

var url="ajax-get-testck.php";

The code inside the file ajax-get-testck.php is here.

<?Php
$in=$_GET['txt'];
if(strlen($in) < 20){$in=$in." Welcome ";}
else{$in=" Too Long Data";}
echo $in; // returned Message 
?>

Ajax XML

Subhendu Mohapatra

Author & Instructor at plus2net

I write and maintain practical tutorials on Python, PHP, SQL, JavaScript, HTML, jQuery, and web development at plus2net. The tutorials focus on clear explanations, working examples, and code that readers can test and adapt while learning.

About the author Watch on YouTube

Connect:

Subscribe to our YouTube Channel here

Ajax GET method of form Submission

Subhendu Mohapatra