Solved

Simple Ajax "HTTP POST" - Internet Explorer hangs... again

Posted on 2008-10-30
8
2,098 Views
Last Modified: 2013-12-08
Hi everyone,

I'm having some problems with Ajax and HTTP POST.

It's a simple script. a hyperlink with a onclick event, will trigger an AJAX POST.

On IE, if you click it a few times, it will simply hang. As if there are no response from the page.

Other browsers, it is perfectly fine.

This is really an irritating issue.

Anyone can give some sound advise?


function positive(userid,ad)

{

				var xmlHttp;

				var returnedtext;

				try{xmlHttp=new XMLHttpRequest();}

				catch (e){try{xmlHttp=new ActiveXObject("Msxml2.XMLHTTP");}catch (e){try{xmlHttp=new ActiveXObject("Microsoft.XMLHTTP");}catch(e){alert("Your browser does not support AJAX!");return false;}}}

				var strTS = new Date().toString().replace(/(\s|\:)/gi,"");	

				var url = "/rate.php";

				var params =   'sellerid=' + userid

							 + '&adid2=' + ad

							 + '&comment=' + document.getElementById('txacomments').value

							 + '&ratetype=POSITIVE'

							 + '&t=' + strTS;

							 

				xmlHttp.open("POST", url, true);

				

				//Send the proper header information along with the request

				xmlHttp.setRequestHeader("Content-type", "application/x-www-form-urlencoded");

				xmlHttp.setRequestHeader("Content-length", params.length);

				xmlHttp.setRequestHeader("Connection", "close");

				

				xmlHttp.onreadystatechange = function() 

				{//Call a function when the state changes.

					if(xmlHttp.readyState == 4 && xmlHttp.status == 200)

					{

						var response = xmlHttp.responseText;

						if(response == 'OK')

						document.getElementById('answerbox').innerHTML = '<strong>Your rating was submitted successfully</strong>';

					};

				};

				xmlHttp.send(params);

}
 
 
 
 
 

on rate.php, just a p-code to demostrate
 

<?php

echo "OK";

?>

Open in new window

0
Comment
Question by:stevong
  • 4
  • 4
8 Comments
 
LVL 82

Accepted Solution

by:
hielo earned 200 total points
ID: 22842656
try this (copy and paste):
 var xmlHttp=null;
 var q=Array();
function positive(userid,ad)
{ 
	if( xmlHttp ){
		q[q.length]=userid;
		q[q.length]=ad;
		return false;
	}
                       
                        var returnedtext;
                        try{xmlHttp=new XMLHttpRequest();}
                        catch (e){try{xmlHttp=new ActiveXObject("Msxml2.XMLHTTP");}catch (e){try{xmlHttp=new ActiveXObject("Microsoft.XMLHTTP");}catch(e){alert("Your browser does not support AJAX!");return false;}}}
                        var strTS = new Date().toString().replace(/(\s|\:)/gi,"");      
                        var url = "/rate.php";
                        var params =   'sellerid=' + userid
                                           + '&adid2=' + ad
                                           + '&comment=' + encodeURIComponent(document.getElementById('txacomments').value)
                                           + '&ratetype=POSITIVE'
                                           + '&t=' + encodeURIComponent(strTS);
                                           
                        xmlHttp.open("POST", url, true);
                        
                        //Send the proper header information along with the request
                        xmlHttp.setRequestHeader("Content-type", "application/x-www-form-urlencoded");
                        xmlHttp.setRequestHeader("Content-length", params.length);
                        xmlHttp.setRequestHeader("Connection", "close");
                        
                        xmlHttp.onreadystatechange = function() 
                        {//Call a function when the state changes.
                              if(xmlHttp.readyState == 4 && xmlHttp.status == 200)
                              {
                                    var response = xmlHttp.responseText;
                                    if(response == 'OK')
                                    document.getElementById('answerbox').innerHTML = '<strong>Your rating was submitted successfully</strong>';
							 
							 xmlHttp=null;
							 if(q.length)
							 {
							 	a=q.shift();
								b=q.shift();
								positive(a,b);
							 }
                              };
                        };
                        xmlHttp.send(params);
}

Open in new window

0
 

Author Comment

by:stevong
ID: 22842707
Thanks hielo!

What's the reason/rationale behind the proposed script?

0
 
LVL 82

Expert Comment

by:hielo
ID: 22843016
the one thing that stands out as wrong from what you posted is that you are not encoding the data you are posting. Notice how I used encodeURIComponent on the parameter values. Try that first on your original post. Other than that, what I posted is basically doing attempting to do synchronous request, but without "freezing" the browser.
0
 

Author Comment

by:stevong
ID: 22846912
Thanks!

What about the shift() and positive() ? and

            q[q.length]=userid;
            q[q.length]=ad;
            return false;


What's the rationale?

THanks
0
Better Security Awareness With Threat Intelligence

See how one of the leading financial services organizations uses Recorded Future as part of a holistic threat intelligence program to promote security awareness and proactively and efficiently identify threats.

 
LVL 82

Expert Comment

by:hielo
ID: 22846929
>>What about the shift()
Your function name is positive(). When you call positive the first time, a request will be made immediately. If you then click immediately before the previous request completes, the values are saved in the q array. So if you click the link consecutively 3 times, one request will be made immediately, the other two will be "pending". So on the second click, the parameters are added at the end of the array. When you click a third time, the parameters for that click are also added at the end of the array. The point is that in the array, the values infront of the array are the parameters of the early requests, so those should be "serviced" first. The shift() removes the items from the front of the array.

>>What about the positive() ?
When the previous request completes, I am simply checking if the q array contains any items (which equates to having "pending requests") and if so, I call positive() by passing the items from the front of the array first.
0
 

Author Closing Comment

by:stevong
ID: 31511724
Thanks!
0
 

Author Comment

by:stevong
ID: 22848102
Anyway, may I ask:

Why is xmlHttp assigned as a global variable instead?
0
 
LVL 82

Expert Comment

by:hielo
ID: 22855648
>>Why is xmlHttp assigned as a global variable instead?
If you do not do so, you won't know if there is request in progress.
0

Featured Post

How to improve team productivity

Quip adds documents, spreadsheets, and tasklists to your Slack experience
- Elevate ideas to Quip docs
- Share Quip docs in Slack
- Get notified of changes to your docs
- Available on iOS/Android/Desktop/Web
- Online/Offline

Join & Write a Comment

Suggested Solutions

Introduction A frequently asked question goes something like this:  "I am running a long process in the background and I want to alert my client when the process finishes.  How can I send a message to the browser?"  Unfortunately, the short answer …
Several part series to implement Internet Explorer 11 Enterprise Mode
Google currently has a new report that is in beta and coming soon to Webmaster Tool accounts. This Micro Tutorial will highlight new features for Google Webmaster Tools.
Shows how to create a shortcut to site-search Experts Exchange using Google in the Chrome browser. This eliminates the need to type out site:experts-exchange.com whenever you want to search the site. Launch the Search Engine Menu: In chrome, via you…

747 members asked questions and received personalized solutions in the past 7 days.

Join the community of 500,000 technology professionals and ask your questions.

Join & Ask a Question

Need Help in Real-Time?

Connect with top rated Experts

10 Experts available now in Live!

Get 1:1 Help Now