1

I'm submitting an Ajax request from an https page to an https page. In all other browsers, this goes through instantly, but in Chrome it hangs for a long time (usually about 40 seconds).

What could be causing this? how do I fix it?

EXAMPLE JQUERY CODE THAT ALSO CAUSES THE HANG

<html>
<head>
    <script type="text/javascript" src="jquery-1-9-1.js"></script>
</head>
<body>
<br/>
<a onclick="doit()">go</a>
<script>
    function doit()
    {
        var myData = { "key": "value" };
        $.ajax({
                url: "myhandlepage.php",
                data: myData,
                dataType: 'json',
                type: 'POST',
                contentType: 'application/x-www-form-urlencoded',
                success: function (data) { alert("OK = " + data.eric); },
                error: function (data, status) { alert("FAILED:" + status); }
        });
    }
</script>
</body>
</html>

EXAMPLE CODE

//Create browser-compliant request object
if( typeof XMLHttpRequest === "undefined" ) XMLHttpRequest = function()
{
    try { return new ActiveXObject("Msxml2.XMLHTTP.6.0"); } catch(e) {}
    try { return new ActiveXObject("Msxml2.XMLHTTP.3.0"); } catch(e) {}
    try { return new ActiveXObject("Msxml2.XMLHTTP"); } catch(e) {}
    try { return new ActiveXObject("Microsoft.XMLHTTP"); } catch(e) {}

    throw new Error( "This browser does not support XMLHttpRequest." );
};

//Create object
var ajax = new XMLHttpRequest();    

//We need to open the object
ajax.open( "post", "/myhandlepage.php", true );

//Now set the callback
ajax.onreadystatechange = function()
{
    //elided, but doesn't matter, I can see the 40+ second delay in chrome developer tools
}.bind( this );

//Send the request
ajax.send( mycontent );

For clarification: no errors are shown in Chrome's developer tools.

EDIT: It appears that this issue only happens on the first request for a tab/page in Chrome. All ajax requests in that same tab/page seem to go through instantly after the first lagging request.

MORE INFO Looking in chrome:net-internals/#events on the hanging request only, in the middle of all the requests, I see this:

t=1360622033867 [st=    4]        HTTP_STREAM_PARSER_READ_HEADERS  [dt=38643]
                              --> net_error = -100 (ERR_CONNECTION_CLOSED)

Then it sends the entire request again, and that second time it goes through instantly. What could be causing this first failed request? It occurs every time I do the request for the first time to that URL since opening the browser.

Don Rhummy
  • 24,730
  • 42
  • 175
  • 330
  • why don't you just use jQuery.ajax() ? –  Feb 11 '13 at 22:14
  • jQuery ajax is exactly the same code underneath. My example code is the exact code that a browser sees when ajax is called. – Don Rhummy Feb 11 '13 at 22:17
  • Could you try with `jQuery.ajax()`? I'm not saying you should use it, I just want to see whether your backend hangs with Chrome+jQuery. If it does, the problem is not with your JavaScript code, but with the backend logic. – tompave Feb 11 '13 at 22:18
  • Also, have you looked at the request HTTP headers? Is Chrome adding something funny? – tompave Feb 11 '13 at 22:20
  • @wonderingtomato I'll try jquery. Give me a few minutes and I'll report back. Also: where can I view the headers being sent across by chrome? – Don Rhummy Feb 11 '13 at 22:22
  • Chrome dev tools might show thm. Or you can print them to the console. You could also use some listener tool: [link](http://superuser.com/questions/42813/looking-for-http-debugging-proxy-for-mac-similar-to-fiddler-on-windows). – tompave Feb 11 '13 at 22:24
  • @wonderingtomato It occurs with jQuery too! (Again, only in Chrome, not Firefox, etc) With jQuery, it hung for 38.97 seconds. (I added my code above for jquery) – Don Rhummy Feb 11 '13 at 22:36
  • Mmmm. have you tried with one of the sniffers I suggested? That `HTTP_STREAM_PARSER_READ_HEADERS` points toward some weird HTTP header, imho. Also, do you have access to the server-side? A (hacky and terrible) workaround would be to fire 2 requests, and then have the server ignore the first one. Lastly, in the actual scenario do you really need `contentType: 'application/x-www-form-urlencoded'`? What happens if you remove that bit? – tompave Feb 12 '13 at 02:26
  • @wonderingtomato I discovered something - it doesn't occur on my development server, but it does occur on the production server! The problem: I have full access to the dev server, but only access to the PHP/MySQL (not the box itself) on the production server since it's shared hosting. So how might I diagnose this via that setup? – Don Rhummy Feb 13 '13 at 18:56
  • I'm not big on PHP... Anyway, I would start with something simple. Create a basic PHP REST web service that accepts AJAX requests (like a echo server), and try to talk with that one using the browsers you are interested in. If something goes wrong, then I am afraid the problem is with Apache. – tompave Feb 14 '13 at 15:34
  • once you have enough data, you can try to contact your hosting provider for support. What's your development server? A virtual LAMP? – tompave Feb 14 '13 at 15:35
  • Yes, it's LAMP in Ubuntu in VirtualBox. – Don Rhummy Feb 14 '13 at 22:20
  • Don, is the example jQuery code you posted actually capable of causing the issue, or is that just a similar construct of code? I was experiencing the same issue you described and later found that a missing piece of code was causing a jQuery object to be sent instead of the element's value. This was making a huge JSON recursion issue. Even if that's not the case for you, try to `console.log(myData)` and see if that is somehow sending a malformed object. Does the issue occur if you do not send the data object? – Radley Sustaire Feb 19 '13 at 00:42
  • @RadGH Yes, that jQuery code does cause the issue. I will try doing more logging to see if something similar is happening and report back. – Don Rhummy Feb 19 '13 at 20:19

0 Answers0