Connecting & Displaying message from ASP by Ajax

Here we will use one simple form with one submit button. On clicking of the submit button we will trigger the ajaxFunction and submit data to our server side ASP script. There is nothing much in our ASP page, it will only return a message 'Hello World' which we will display in out html page. So let us start with the easy part the post.asp page.
<%
Response.Write "Hello World"
%>
The message "Hello World" will be displayed by the browser at our html page.

As we will be using XMLHttp Request object in all our scripts, you can read more on XMLHttp Request object here.

The HTML page will have Ajax function inside the head tag and within the <script> tag. It will have our form inside its <body > tag. We will start with our Ajax function first. Here it is .
<script type="text/javascript">
function ajaxFunction()
{
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;
      }
    }
  }
function stateChanged() 
    {
    if(httpxml.readyState==4)
      {
document.getElementById("txtReturn").innerHTML=httpxml.responseText;
myForm.reset();
      }
    }

function getFormData(myForm) { 
var myParameters = new Array(); 
for (var i=0 ; i < myForm.elements.length; i++) { 
var sParam = encodeURIComponent(myForm.elements[i].name); 
sParam += "="; 
sParam += encodeURIComponent(myForm.elements[i].value); 
myParameters.push(sParam); 
} 
return myParameters.join("&"); 
} 



	var url="post.asp";
var myForm = document.forms[0]; 
var parameters=getFormData(myForm);
httpxml.onreadystatechange=stateChanged;
httpxml.open("POST", url, true)
httpxml.setRequestHeader("Content-type", "application/x-www-form-urlencoded")
httpxml.send(parameters)  
}

</script>

As you have seen in above code the first part is to establish the XMLHttp request object. Then we will use the function getFormData to collect the form inside values. Here we don't have any thing but we will be adding different components like textbox , checkbox etc in next tutorial.

Here is the code inside our <body> tag.
<body>
<div id=f1 style="position:absolute; width:200px; height:20px; 
     z-index:1; left: 203px; top: 84px; 
     background-color: #f1f1f1;      border: 1px none #000000">
<form name="myForm" onsubmit="ajaxFunction(this.form); return false">
<input type=submit value=Submit>
</form>
</div>
<div id="txtReturn"><b>Return message will be displayed here.</b></div>
</body>
We have used POST method for our form submission and we have kept the form inside one Div layer so we can control its display property in future.

You can download the two files used post.htm & post.asp file here.

Number of User Comments : 2

plus2net.com




Further readings
Ajax scripts to connects to server side ASP
Submitting form to ASP script and getting data by Ajax
brijesh

26-12-2009

good one
T.Gowthaman

05-08-2012

i am beginner i want learn some thing in ajax

Post your comments , suggestion , error , requirements etc here .




We use cookies to improve your browsing experience. . Learn more
HTML MySQL PHP JavaScript ASP Photoshop Articles FORUM . Contact us
©2000-2024 plus2net.com All rights reserved worldwide Privacy Policy Disclaimer