using ajax with asp

DrRakha

In this article we talk about how to integrate AJAX and ASP. AJAX technology allows you to update a part on your webpage without reloading the page. The client AJAX script side is the same when using different technologies such as PHP, JSP and ASP.
AJAX works mainly using HTTPSML object, one of the best cases to use AJAX is where we need a database access, such as login forms, signup, and view topics. ASP script will do the job of database handling. In the following section we will discuss an AJAX-ASP example where we connect to ASP script using HTML script. ASP script page replies with a string message to the html page. I chose this example because it makes it easier to understand the concept discussed.

In AJAX side we used the HTTPSML request object; follow is the HTML code part:

Code:

<html>
<head>
<script type="text/javascript">
function showMessageByAjax()
{
var httpxml;
try
{
// For browser :  Firefox, Opera 8.0+, Safari
httpxml=new XMLHttpRequest();
}
catch (e)
{
// For browser : Internet Explorer 
try
{
httpxml=new ActiveXObject("Msxml2.XMLHTTP");
}
catch (e)
{
try
{
httpxml=new ActiveXObject("Microsoft.XMLHTTP");
}
catch (e)
{
alert("  browser does not support AJAX!");
return false;
}
}
}
function stateChanged() 
{
if(httpxml.readyState==4)
{
document.getElementById("MsgBoxReceive").innerHTML=httpxml.responseText;
myajaxForm.reset();
}
}

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



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

</script>
<body>
<div id=”f1” style="  background-color: #fffff1; border: 1px none #CCCCCC">
<form name="myajaxForm" onsubmit="showMessageByAjax (this.form); return false">
<input type=”submit” value=”Submit”>
</form>
</div>
<div id="MsgBoxReceive "><b>Display message here</b></div>
</body>
</html>

This is an example of an AJAX (Asynchronous JavaScript and XML) code, which allows for creating dynamic web pages that can update without requiring a refresh. The code defines a function named "showMessageByAjax" that is executed when a form is submitted. The function starts by creating an instance of the XMLHttpRequest object, which is the core component of AJAX. The function uses a try-catch block to handle different browsers. It attempts to create an instance of the XMLHttpRequest object for Firefox, Opera, and Safari, and if that fails, it tries to create an instance of the ActiveXObject for Internet Explorer. If all attempts fail, an alert message is displayed that the browser does not support AJAX.

The function then defines another function, "stateChanged", which is used to handle the state change of the request. It checks the readyState property of the httpxml object, if it's equal to 4 this means the request is complete, and the response text is then written to the "MsgBoxReceive" element in the HTML document. The function also defines a function "getFormData" which is used to get the data from the form and encode it in a way that can be sent as a request. it loops through the elements of the form and gets the name and value of each element and then join them with "&" separator. Then the function defines a variable "url" that is set to "showMessage.asp" and a variable "myajaxForm" that is set to the first form element in the HTML document. It opens a connection to the specified URL using the httpxml.open method, with a POST request, and sets the request header to "Content-type", "application/x-www-form-urlencoded" and sends the parameters of the form with httpxml.send(parameters). The script also has a form element in the HTML document with a submit button. The form has an "onsubmit" event that calls the "showMessageByAjax" function and returns false to prevent the page from refreshing. It also has a div element with id "MsgBoxReceive" that is used to display the message returned from the server.

This code snippet also demonstrates the usage of JavaScript functions, try-catch blocks, and the DOM (Document Object Model) to access and manipulate elements of the HTML document. It also demonstrates the usage of the "encodeURIComponent" function, which is used to encode the data from the form that is sent to the server. This helps prevent Cross-Site Scripting (XSS) attacks by encoding any special characters in the data so that they can't be interpreted as code by the browser. It also uses the "Content-type" header set to "application/x-www-form-urlencoded" which is used to specify the format of the data sent to the server. It also uses the "POST" method to send the request to the server, this method is more secure than the GET method, because it doesn't expose the data in the URL, and it can handle a larger amount of data. It uses the "stateChanged" function to handle the state of the request, and it uses the readyState property of the httpxml object to check the status of the request. It uses the "getFormData" function to get the data from the form and encode it, this function loops through the elements of the form, gets the name and value of each element, and then joins them with "&" separator. It also uses the "innerHTML" property of the "MsgBoxReceive" element to update its content with the data returned from the server.

That the code uses the "return false" statement in the onsubmit event of the form element to prevent the form's default behavior, which is submitting the page, which allows the AJAX call to handle the form submission instead of the browser. It also uses the "reset" method to reset the form after the data is sent. It's also worth noting that the code uses a specific server-side script, "showMessage.asp", which is responsible for processing the data sent by the AJAX call and returning a response. This script is not included in this code snippet, but it would typically handle the data, perform any necessary actions, and return a response.

Following is ASP script code (showMessage.asp):

Code:

<%
Response.Write "Hello World"
%>

We used POST method and AJAX get and at form.

Java

C/C++

PHP

C#

HTML

CSS

ASP

Javascript

JQuery

AJAX

XSD

Python

Matlab

R Scripts

Weka

using ajax with asp

Topic Tags