I am using Ajax a lot, but I have problem, that so many times it doesn't work (it returns an empty string, or just hung at the server for long time with no response).

If may wait sometimes the ajax is called and getting response from server for 10 seconds, and sometimes this becomes very long time consuming, and I can wait several minutes to run a specific simple ajax call.

Here is an example of code I put at each ajax (there are two attitudes - I think I shall use the jquery always, but I want to know if my code is OK).

Code 1: (old fashioned)

var tout;

function testAjax1() {
    'use strict';

    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) {
            if (tout) {
                clearTimeout(tout);
            }
            alert(xmlhttp.responseText);
            alert("success");
        }
    };

    function ajaxTimeout() {
        xmlhttp.abort();
        alert("timeout");
    }

    clearTimeout(tout);

    tout = setTimeout(function () {
        ajaxTimeout();
    }, 10000);

    xmlhttp.open("POST", "testAjax1.php", true);
    xmlhttp.setRequestHeader("Content-type", "application/x-www-form-urlencoded");

    xmlhttp.send("");
}

function ajax2, ajax3, ... ajax100 exists.

Code 2: (jquery):

function testAjax1() {
    'use strict';
    var s;

    $.ajax({
        url : "testAjax1.php",
        type: "POST",
        dataType: "html",
        timeout: 10000
    }).success(function (result) {
        s = result;
        alert(s);
        alert("success");
    }).fail(function (jqXHR, textStatus) {
        s = jqXHR.responseText;
        if (textStatus === "timeout") {
            alert("timeout");
        } else {
            s = jqXHR.responseText;
            alert(s);
        }
    });
}
 function ajax2, ajax3, ... ajax100 exists.

I use lot of ajax functions call, but:

1. I think that response from ajax1 is captured by ajax2, i.e.

2. For some reason - the responses from ajaxs functions seem too long time consuming. I don't know what - For code 1 and for code 2.

Here is the main header for jquery in html page

(I have copied the jquery into my own site)

<link rel="stylesheet" href="./css/jquery-1.9.1-ui.css" type="text/css" media="screen"/>
<link rel="stylesheet" href="./css/alljqfonts.css" type="text/css" media="screen">

<script src="./jquery/jquery-1.8.2.min.js"></script>
<script src="./jquery/jquery-1.9.1-ui.min.js"></script>       
<script src="./jquery/jquery.ui.touch-punch.js"></script>
<script src="./jquery/jquery.exif.js"></script>
<script src="./jquery/jquery.qtip-1.0.0-rc3.min.js"></script>
<script src="./jquery/jQueryRotate.2.2.js"></script>
<script src="./jquery/jquery.Jcrop.js"></script>
<script src="./jquery/jquery.Jcrop.min.js"></script>

What may be wrong?

Thanks :)

You can not fire parallel ajax calls. Every browser has different limitations.

Solution:

Fire every ajax call on a different subdomain. Then can be parallel requests.