Alerts

Free Alerts

Your email will always be
private and will not be shared.

<< Export Data To Excel using ADO.Net | PopUps >>

ASP/ASP.Net

AJAX Calls Using JavaScript And XMLHTTP

Author:Mudassar Khan

Here the article explains how to implement AJAX using JavaScript using a simple example which gets the Server Current Time.

Create the XML HTTP Request Object

xmlhttp=null;

if (window.XMLHttpRequest)

{

// code for all new browsers

xmlhttp=new XMLHttpRequest();

}

else if (window.ActiveXObject)

{

// code for IE5 and IE6

xmlhttp=new ActiveXObject("Microsoft.XMLHTTP");

}

Prepare and send the Request

While preparing the request you will need to specify the function which should be invoked when the state of the xmlhttp object changes below state_Change function will be called.

Then open will open the connection with the server.

xmlhttp.onreadystatechange=state_Change;

xmlhttp.open("GET","Default.aspx?GetTime=true",true);

xmlhttp.send(null);

Server Side Accepting the Request

The Request is Received Server Side it is processed and the Response is sent back.

Response.Cache.SetCacheability(HttpCacheability.NoCache);

if (Request.QueryString["GetTime"] == "true")

{

Response.Clear();

Response.Write(DateTime.Now.ToShortTimeString());

Response.End();

}

VB.Net

Response.Cache.SetCacheability(HttpCacheability.NoCache)

If Request.QueryString("GetTime") = "true" Then

Response.Clear()

Response.Write(DateTime.Now.ToShortTimeString())

Response.End()

End If

Note that in both C# and VB.Net I am using the following statement

Response.Cache.SetCacheability(HttpCacheability.NoCache)

The above statement I necessary since if it is not there request is sent to the server only for the first time and after that it is not since the page has been cached by Browser.

To avoid that the above statement prevents the page from being cached and the request is sent to the server each time.

Receiving the Response

As soon as the Response is sent back to the client page the state_Change function is invoked

This function accepts the Response and displays the time on the page.

function state_Change()

{

if (xmlhttp.readyState==4)

{// 4 = "Response loaded"

if (xmlhttp.status==200)

{// 200 = Response Error Free

var lblMesg = document.getElementById("<%=lblMsg.ClientID%>");

lblMesg.innerHTML = "Server Time is : " + xmlhttp.responseText;

}

else

{

alert("Problem retrieving XML data");

}

The above code has been tested in the following Browsers

1. Internet Explorer 7

2. Firefox 3

3. Google Chrome

You can download the source code in VB.Net and C# here.

XMLHTTP.zip (3.63 kb)

Posted: Feb 01 2009, 00:54 by Mudassar Khan | Comments (27)

Filed under: AJAX | C# | JavaScript | VB.Net

If you like this article, help us grow by bookmarking this page on any social bookmarking site.

Minimize Comments

Comments

sri said:

thanks for a wonderful article.
A small correction in your code.
xmlhttp.open("GET","CSharp.aspx?GetTime=true",true); -->
xmlhttp.open("GET",url,true);

I guess it doesnt make a difference. If possible can you explain what this line actually does. Does it execute the whole page again . If so can make use it to execute a particular method on a page?
I am quite new xmlhttp requests. So if I sound stupid please bear with me
Thanks
Sri

# February 06 2009, 04:28

Mudassar Khan said:

Hi Sri,
A small correction in your code.
xmlhttp.open("GET","CSharp.aspx?GetTime=true",true); -->
xmlhttp.open("GET",url,true);

Yes you can I pusposely added the URL instead of passing it as a parameter inorder to explain it. Yes the function also accepts URL as a parameter and it will help when you use the same function on multiple pages by placing it in JS file.

I guess it doesnt make a difference. If possible can you explain what this line actually does. Does it execute the whole page again . If so can make use it to execute a particular method on a page?
No it does not your it will only perform the operations that you want it to do. That is it will return back as soon as it encounters Response.End. That is what AJAX meant for.

# February 06 2009, 15:19

Sri said:

thanks for the responce Mudassar..
an other question regarding this...
I guess it doesnt make a difference. If possible can you explain what this line actually does. Does it execute the whole page again . If so can make use it to execute a particular method on a page?
No it does not your it will only perform the operations that you want it to do. That is it will return back as soon as it encounters Response.End. That is what AJAX meant for.....

So whatever the URL is ....all the logic for XMLHTTP responce including "Responce.End" should be part of page load so that the entire page wont execute
am i right??
Or let me put it other way ...is there a way that we can execute a particular method in the "URL" page rather having the logic in page load with condition on query string
If there is what are the advantages in using page load over the other approach

# February 07 2009, 05:27

Mudassar Khan said:

an other question regarding this...
I guess it doesnt make a difference. If possible can you explain what this line actually does. Does it execute the whole page again . If so can make use it to execute a particular method on a page?
Yes it makes a call to the page but only page load will be executed. To call methods you will need to call some methods in the if block (if(Response.Querystring(...))

So whatever the URL is ....all the logic for XMLHTTP responce including "Responce.End" should be part of page load so that the entire page wont execute
am i right??
Or let me put it other way ...is there a way that we can execute a particular method in the "URL" page rather having the logic in page load with condition on query string
If there is what are the advantages in using page load over the other approa

Secondly Since Response.End is there your whole page markup is not only the part which you write in Response.Write is sent back.

If you remove response.End you will notice that the whole page HTML is also recieved again. Just try commenting it out and you will notice the difference

Its not whether what is ececuted. Its regarding that the whole page is not rendered again. We can control what part you what to update. In the above example I am just updating the label.

And not the whole page

# February 07 2009, 15:31

Sri said:

thanks again for the responce Mudassar....
I think I now understand what the code does exactly
Will be waiting for your future articles

# February 08 2009, 23:49

sagar said:

In your discussion above I've seen the below line of code:
xmlhttp.open("GET",url,true);

Is "url" above a keyword which will actually refer to the current URL of the web page or is it just for general explaining purpose? My question may sound not good to you so, please excuse me for that as I'm new to JavaScript.

Thanks in adv.

- Sagar

# April 11 2009, 19:33

Mudassar Khan said:

@Sagar,

Yes its the URL of the page either you do it using parameter or pass directly does not make any difference

# April 11 2009, 20:09

Mani said:

hi..
The above is executing the code without roundtrip - ie: without postback the ,

Whether the javascript is common for all ie:

you are redirect to other page using javascript show shall i do using server side.

# April 12 2009, 21:57

Mudassar Khan said:

@Mani,
Yes this javascript is common

Also I am not redirecting anywhere I am calling the same page

# April 12 2009, 22:19

mani said:

while u check the javascript you have given the default.aspx /

What i want is without using AJAX toolkit i have to do ie
Dropdownlist bind , gridview bind from database without postback ie: by using Javascript + XMLHTTP how ?

# April 12 2009, 22:35

Mudassar Khan said:

@Mani
GridView not possible you will have to create a custom Grid refer my article
www.aspsnippets.com/.../...-xmlhttp-in-ASPNet.aspx

DropDownList same way you will have to return xml and bind
like I do for Grid

# April 12 2009, 22:59

mani said:

I have heard many of them telling without ajaxtoolkit
bind the data from database to dropdownlist ie: without postback by using XMLHTTP request we can done. this..

# April 12 2009, 23:39

Mudassar Khan said:

@Mani
Yes you can do but requires a lot of javascripting for that

# April 13 2009, 01:41

Bill Hewitt said:

How do I use this within a complex aspx page, along with some other controls that do require postback? I need both on the same page!

(Just like Gmail... Everything is ajax, even the spellcheck, but there's still a postback when you click "Send".)

For example, I added this to your aspx page:

<asp:Button runat="server" id="Button1" OnClick="Button1_Click" />

<asp:Textbox runat="server" id="TextBox1" EnableViewState="true" AutoPostBack="true"></asp:TextBox> />

...but my c# code-behind page can't find them (but Intellisense finds them!). I get build errors "The name TextBox1" does not exist in the current context", etc.

# May 22 2009, 06:54

Mudassar Khan said:

Yes you can have boths together its not necessary for all features on a page to be ajax some can be postback and some ajax based

# May 22 2009, 16:54

Bill Hewitt said:

Thanks Mudassar.

But I still get build error "The name 'TextBox1' does not exist...". Is this because one or both of the two following lines of code makes the .aspx page non parse-able to the compiler (or something like that)?...

This?:
Response.Cache.SetCacheabilit HttpCacheability.NoCache);

Or this?:
Response.End();

__Bill

# May 26 2009, 00:50

Mudassar Khan said:

Hi Bill,
Its because there's no textbox1 on your page
Add it to aspx to resolve the issue

# May 26 2009, 01:15

Bill Hewitt said:

Mudassar,

I must have done something else wrong. (I commented out EVERYTHING ajax-related, and it still fails to build!)

I'll start all over with a new project, add my aspx controls, then add the ajax after that. Maybe then it will work!

# May 26 2009, 01:36

Mudassar Khan said:

Hi Bill,
It is not AJAX related. Its just TextBox1 is not present in the aspx page you are using

# May 26 2009, 02:05

Bill Hewitt said:

I started all over with a new Solution, and now it works!

(Weird, but TextBox1 was indeed in my aspx page; I made one of those "mystery bugs"!) In any case, it works fine now. Thanks Mudassar.

Next, I'm adding some more of these AJAX functionalities to the page. (This app has a very complex UI.)

After lunch I'm going to try adding the javascript for a second xmlhttp object and your other functions.

I think I can generalize GetData() using a parameter instead of hard-coding the url value.

I don't know if I can reuse state_Change().

I've added a new function SaveTextBox3(myText). And a new C# method to save the value into the DB (I put it inside Page_Load().)

Does it appear that I'm now on the right track??
--------
Thanks so much for your patience.

# May 26 2009, 04:54

Bill Hewitt said:

Hi Mudassar

I'm getting 500 when I try to populate 2 target html controls from the same triggering event. For example, select a name in the dropdown and populate Phone in one html textbox and Fax in another html textbox.

Lots of your AJAX on my page. Everything else works perfect.

I have two copies of your code:
xmlhttp.onreadystatechange=state_Change;
xmlhttp.open("GET",url,true);
...but I pass in a different state_Change and url for each for each target control.

I call both of those in my javascript html <select> onChange event.

I get 200 if I comment out the call for either one of the html target controls. I get 500 if I call for both.

Any ideas?

Bill

P.S. I call several different copies of your code for other ajax on my page, and it works. But those all populate only one target html control each.

# June 10 2009, 05:51

Mudassar Khan said:

Hi Bill,

This seems that the AJAX Call is crashing somewhere server side Try running in debug mode and see whether the control reaches Response.End stmt when ajax call is made to the server

# June 10 2009, 15:58

Bill Hewitt said:

Hi Mudassar,

I figured out what's going on.

You probably remember that I instantiated one xmlhttp object, and called it twice with two different pairs of your javascript functions. For example: "GetPhone()/State_Change_Phone()", and also "GetFax()/State_Change_Fax()".

Sometimes I got 500, or sometimes I got only Fax and Phone was blank.

Well I discovered that the same xmlhttp object wasn't being closed so it was being reused, and therefore the Change_State functions didn't get a 200 so they returned 500 (or sometimes overwrote the first result and just returned the last result that was called).

I put an alert() between calling Phone and Fax, which seemed to close the xmlhttp object. Then it worked fine!

The users wouldn't want the alert(), so instead I created two different xmlhttp objects "xmlhttp_phone, and xmlhttp_fax", using two GetData() functions: "GetData_phone() and GetData_Fax()".

For my whole page, I had to duplicate your entire "GetData()" code several times. What a mess, but it worked!

It would be nice if I could write a JavaScript class that I can instantiate and use with just one line of code (like any c# class). But I think this isn't possible with JavaScript.

Thanks so much for your article! It gave me a really good place to start.

Bill

# June 16 2009, 02:19

Mudassar Khan said:

Thanks Bill,

Instead of so many create a generic function that accepts url and fires a request and returns the string

# June 16 2009, 02:23

Bill Hewitt said:

I'm not sure what you mean. Do you mean a generic GetData(url), or a generic state_Change() function?

I tried a generic GetData(functionCall, url), where functionCall = "getPhone" or "getFax". But that's where it reused the same xmlhttp object because it was never being closed or "set to nothing". (Just like reusing an ado recordset object without even changing its name.)

# June 16 2009, 03:21

Mudassar Khan said:

I see In that case what you did is correct

# June 16 2009, 03:30

Bill Hewitt said:

Thanks

About a javascript class... Is it even possible to write a JavaScript class that I can instantiate and use with just one line of code (like any c# class)?

# June 16 2009, 03:42

Add comment

Name*
E-mail*
b i u quote

Comment
Preview

Notify me when new comments are added

0 + 0 = Incorrect

Translate this pageMicrosoft® Translator

Community News

Web Hosting SpotLight

Consulting

For consulting and work related queries click here.

Advertise

Advertise with us. For more details click here.

Suggestions

Please provide your valuable suggesstions here.

This Site is hosted on

Categories

Alerts

Thank you

AJAX Calls Using JavaScript And XMLHTTP

Comments

Add comment

Community News

Web Hosting SpotLight

Consulting

Advertise

Suggestions

This Site is hosted on