Understanding and Using AJAX
Views (93)
Nishant Rana
11,325
Microsoft Employee
Like
Share
ReportSuppose this is our simple ASP.NET page i.e. MyPage.aspx which would be called using AJAX
Code for MyPage.aspx.cs
protected void Page_Load(object sender, EventArgs e)
{
// no data is passed
if (Request.QueryString[“myGetData”] == null)
{
Response.Write(“Hello World”);
}
// if GET method is used to call this page
else if (Request.QueryString[“myGetData”] != null)
{
Response.Write(“Hello “ + Request.QueryString[“name”].ToString());
}
// if POST method is used to call this page
else if (Request.Form[“myPostData”] != null)
{
Response.Write(“My Post Data is “ + Request.Form[“myPostData”].ToString());
}
}
Delete everything from MyPage.aspx page just keep the page directive otherwise html tags would also be sent as a part of response.
<%@ Page Language=”C#” AutoEventWireup=”true” CodeFile=”Mypage.aspx.cs” Inherits=”MyPage” %>
Now the javascript code to call the page asynchronously using AJAX. Comment/Uncomment the particular section of code to test the functionality
<script type=”text/javascript”>
var request=null;
function CreateRequest()
{
try
{
// create a new object to talk HTTP with a web server.
// XMLHttpRequest – works on Safari,Firefox, Mozilla, Opera , IE 7 and most other browsers
request=new XMLHttpRequest();
}
catch(trymicrosoft)
{
try
{
// Msxml2.XMLHTTP – Most version of IE support this
request=new ActiveXObject(“Msxml2.XMLHTTP”);
}
catch(othermicrosoft)
{
try
{
//Microsoft.XMLHTTP – but for some, we’ll need this other type
request=new ActiveXObject(“Microsoft.XMLHTTP”);
}
catch(failed)
{
request=null;
}
}
}
if(request==null)
alert(‘Error creating request object’);
else
{
// i.e. space with %20
// if no data is to be send
var url=“MyPage.aspx”;
// open-initialize the connection
// GET – specify how to send data to the server
// url- url to send the request
// asynchrounous – true
request.open(“GET”,url,true);
// telling the browser what to do with the server’s response
// i.e. the function to be called when response is received
// onreadystatechange- this property affects every ready state not just the one indicating
// that the server is finished with request
request.onreadystatechange=updatepage;
// send the request
// no data is required so send null
// for using send() to pass data to a server requires POST method for the request and need to specify content type
request.send(null);
// if data is to be send using GET i.e. as query string
var name=“MyName”;
// escape() function replaces characters like space with something that will work as a part of a request URL.
var url=“MyPage.aspx?myGetData=”+escape(name);
request.open(“GET”,url,true);
request.onreadystatechange=updatepage;
request.send(null);
// if more data is to be send than use post
var name=“MyName”;
var url=“MyPage.aspx”;
request.open(“POST”,url,true);
request.onreadystatechange=updatepage;
//setRequestHeader()- allows us to add information to the request usual intended for use by the server
// Content-Type – is the name of the request header
// application/x-www-form-urlencoded – the value of the request header
// this tells the server that the data is encoded like it would be in a request URL
// for passing XML content replace “application/x-www-form-urlencoded” with “text\xml”
request.setRequestHeader(“Content-Type”,“application/x-www-form-urlencoded”);
// specify the data to be send
// escape() function replaces characters like space with something that will work as a part of a request URL.
request.send(“myPostData=”+escape(name));
}
}
// updatepage – this function will get run every time the ready state changes
function updatepage()
{
// readyState=this property of the request object stores the current state
// if 4 means server is done with the request
// if 0 i.e uninitialized
// if 1 i.e open, the object has been created but the send method has not been called
// if 2 i.e. sent, the send method has been called.
// if 3 i.e. receiving , responseText is not available but some data has been received
// if 4 i.e. loaded, all the data has been received, responseText is available
if(request.readyState==4)
{
// check for the status send by the server
// if 200 i.e. everything is fine
// if 404 i.e. if the page specified in the url is not found
if(request.status==200)
{
var myResponse=request.responseText;
alert(myResponse);
}
else
{
alert(“Error! Request status is “ +request.status);
}
}
}
</script>
<input id=”Button1″ type=”button” value=”button” onclick=”CreateRequest()”/>
Bye…
Posted in Ajax, ASP.NET Tagged: Ajax, ASP.NET
This was originally posted here.
*This post is locked for comments