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

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

stevongAsked:
Who is Participating?
I wear a lot of hats...

"The solutions and answers provided on Experts Exchange have been extremely helpful to me over the last few years. I wear a lot of hats - Developer, Database Administrator, Help Desk, etc., so I know a lot of things but not a lot about one thing. Experts Exchange gives me answers from people who do know a lot about one thing, in a easy to use platform." -Todd S.

hieloCommented:
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

Experts Exchange Solution brought to you by

Your issues matter to us.

Facing a tech roadblock? Get the help and guidance you need from experienced professionals who care. Ask your question anytime, anywhere, with no hassle.

Start your 7-day free trial
stevongAuthor Commented:
Thanks hielo!

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

0
hieloCommented:
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
Cloud Class® Course: Microsoft Azure 2017

Azure has a changed a lot since it was originally introduce by adding new services and features. Do you know everything you need to about Azure? This course will teach you about the Azure App Service, monitoring and application insights, DevOps, and Team Services.

stevongAuthor Commented:
Thanks!

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

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


What's the rationale?

THanks
0
hieloCommented:
>>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
stevongAuthor Commented:
Thanks!
0
stevongAuthor Commented:
Anyway, may I ask:

Why is xmlHttp assigned as a global variable instead?
0
hieloCommented:
>>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
It's more than this solution.Get answers and train to solve all your tech problems - anytime, anywhere.Try it for free Edge Out The Competitionfor your dream job with proven skills and certifications.Get started today Stand Outas the employee with proven skills.Start learning today for free Move Your Career Forwardwith certification training in the latest technologies.Start your trial today
Web Browsers

From novice to tech pro — start learning today.

Question has a verified solution.

Are you are experiencing a similar issue? Get a personalized answer when you ask a related question.

Have a better answer? Share it in a comment.