Saturday, December 8, 2012

Simple Ajax Call example in ASP.NET

Go through the sample code.

<html xmlns="">

<head runat="server">
    <script type="text/javascript">
        function GetasyData() {
            var xmlhttp;
            if (window.XMLHttpRequest) {
            // code for IE7+, Firefox, Chrome, Opera, Safari
                xmlhttp = new XMLHttpRequest();
            else {// code for IE6, IE5
                xmlhttp = new ActiveXObject("Microsoft.XMLHTTP");
            xmlhttp.onreadystatechange = function () {
                if (xmlhttp.readyState == 4 && xmlhttp.status == 200) {
                    document.getElementById("myDiv").innerHTML = xmlhttp.responseText;
  "GET", "GetData.aspx", true);
    <form id="form1" runat="server">
  <div id="myDiv"><h2>Let AJAX change this text</h2></div>
  <button type="button" onclick="GetasyData()">Change Content</button>

Create a new page called GetData.aspx and add the below code in page load event.


 protected void Page_Load(object sender, EventArgs e)
        Response.Expires = -1;
        //required to keep the page from being cached on the client's browser
        Response.ContentType = "text/plain";

The XMLHttpRequest object is used to exchange data with a server behind the scenes. This means that it is possible to update parts of a web page, without reloading the whole page.

All modern browsers like IE7+, Firefox, Chrome, Opera and Safari has built-in XMLHttpRequest object.
xmlhttp = new XMLHttpRequest();
will create the new XMLHttpRequest object. Old browsers uses ActiveX object.
xmlhttp = new ActiveXObject("Microsoft.XMLHTTP");

will create the new ActiveX object.

xmlhttp.readyState == 4
0: The request is uninitialized (before you've called open()).
1: The request is set up, but not sent (before you've called send()).
2: The request was sent and is in process (you can usually get content headers from the response at this point).
3: The request is in process; often some partial data is available from the response, but the server isn't finished with its response.
4: The response is complete; you can get the server's response and use it.

xmlhttp.status == 200
HTTP state is OK."GET", "GetData.aspx", true);
Specifies the type of request, the URL, and if the request should be handled asynchronously or not.

Send the request to the server.

GET is simpler and faster than POST, and can be used in most cases.

However, always use POST requests when:
A cached file is not an option (update a file or database on the server)
Sending a large amount of data to the server (POST has no size limitations)
Sending user input (which can contain unknown characters), POST is more robust and secure than GET

Response.Expires = -1;
Will keep the page from being cached in the browser.

The response of a "GET" request is cached by default, so to make sure that our example brings back the current time each time it is clicked, this line is crucial. The next few lines change the content type to plain text, get the current time, and writes the output:

Response.ContentType = "text/plain"; 

No comments:
Write comments
Recommended Posts × +