Question

I am trying to understand how to use an ajax request when sending the request to a js file. unfortunately, the javascript is freezing the browser. I know its freezing because I have a gif spinner that stops while the request is processing. PHP does not freeze it. Below is the code:

index.html

        <script type="text/javascript" src="http://ajax.googleapis.com/ajax/libs/jquery/1.4/jquery.min.js"></script>
    <script type='text/javascript'>     
        $(document).ready(function() {
            $("#b").click(function() {
                $.ajax({
                  url: 'ajax.js',
                  dataType: "script",
                  type: "GET" }
                );

                });         
    });

    </script>
<img src="spinner.gif">
<div id="upload">
    <button id="b">test</button>
</div>
<textarea type="text" id="text"></textarea>
<div id='input'></div>

ajax.js

    var x = 5;
for(var i = 0; i< 300000000; i++){
    x += 1;
}

$("#input").html(x);

Answer 1

It’s freezing simply because although the AJAX request is asynchronous, as soon as it has downloaded the script it starts synchronously executing that massive loop, and that will block the UI.