无法在Chrome下加载资源！ 目前不工作ajax

Question

I am using this ajax code for checking domains. For each domain, a request is sent to API. I create 2000 rows in textarea with 3 suffixes (6000 domain) and click on submit. After submit all domains checked and display domain status in the table with ajax. In the first time display table of domains but after a few second table removed and code not display result!

How to fix this problem?

Chrome's console displays this error:

Failed to load resource: net::ERR_INSUFFICIENT_RESOURCES

Demo Link

Ajax code(ajax.js):

$(document).ready(function () {
    $("#submit").click(function () {            

        // check if anything is selected:
        if(!$('#domains').val() || !$('[type="checkbox"]:checked').length){
            return false;
        }
        // disable the button:
        var btn = $(this).prop('disabled', true);

        var domain = $('#domains').val().split("\n");
        var counter = 0;

        // an indicator to state when the button should be enabled again:
        var ajaxQueue = 0;

        //send ajax request for earse txt file (new request)
        $.ajax({
                type: "GET",
                url: "includes/ajax/ajax.php",
                data: {new_request: ajaxQueue },
        });

        var Table = '<table class="paginated table table-bordered table-striped table-responsive domain-table"><thead><tr><th>ID</th><th>Domain Name</th><th>.Com</th><th>.Net</th><th>.Org</th><th>.Ir</th><th>.Biz</th><th>.Info</th><th>.Us</th><th>.Name</th><th>.Pro</th><th>.Eu</th><th>.In</th><th>.Me</th><th>.Tv</th><th>.Cc</th></tr></thead><tbody>';

        // create the td elements, but do not perform AJAX requests there:
        $.each(domain, function (i, val) {
            counter++;
            Table += '<tr><td>'+ counter +'</td><td>'+ val +'</td>';
            $('input[type=checkbox]').each(function () {
                if($(this).is(':checked')){
                    ajaxQueue++;
                    // if checkbox is checked make td element with specified values and a "load-me" class:
                    Table += '<td class="load-me" data-domain="'+val+'" data-suffix="'+$(this).val()+'"><small>loading...</small></td>';
                }else{
                    Table += '<td><span class=text-muted><i class="fa fa-minus"></i></span></td>';
                }
            });
            Table += '</tr>';
        });

        // Replace HTML of the 'domain_tables' div and perform AJAX request for each td element with "load-me" class:
        $('#domain_tables').html(Table+'</tbody></table>').find('td.load-me').each(function(){
            var td = $(this);

            $.ajax({
                type: "POST",
                url: "includes/ajax/ajax.php",
                dataType: "json",
                data: {domain: td.attr('data-domain'), suffix: td.attr('data-suffix')},
                success: function (msg) {
                    // decrease ajaxQueue and if it's 0 enable button again:
                    ajaxQueue--;
                    if(ajaxQueue === 0){
                        btn.prop('disabled', false);
                    }
                    if(msg.suc == false){
                        td.html('<span class=text-danger><i class="fa fa-check"></i></span>');
                    }else{
                        td.html('<span class=text-success><i class="fa fa-times"></i></span>');
                    }
                },
                error: function (err) {
                    $('#domain_tables').html(err.error);
                }
            });
        });

    // clear textarea and uncheck checkboxs
    $("#reset").click(function(){
        $('input[type=checkbox]').attr('checked', false);
        $('#domains').val('');
        $('#submit').prop('disabled', false);
    });

    // table paganation
    $('table.paginated').each(function() {
        var currentPage = 0;
        var numPerPage = 100;
        var $table = $(this);
        $table.bind('repaginate', function() {
            $table.find('tbody tr').hide().slice(currentPage * numPerPage, (currentPage + 1) * numPerPage).show();
        });
        $table.trigger('repaginate');
        var numRows = $table.find('tbody tr').length;
        var numPages = Math.ceil(numRows / numPerPage);
        var $pager = $('<ul class="pager pagination"></ul>');
        for (var page = 0; page < numPages; page++) {
            $('<li class="page-number"></li>').text(page + 1).bind('click', {
                newPage: page
            }, function(event) {
                currentPage = event.data['newPage'];
                $table.trigger('repaginate');
                $(this).addClass('active').siblings().removeClass('active');
            }).appendTo($pager).addClass('clickable');
        }
        if(numRows > 100 ){
            $pager.insertAfter($table).find('span.page-number:first').addClass('active');
        }
    });

    });



}); 

PHP code (ajax.php):

<?php
if($_SERVER['REQUEST_METHOD']=='GET'){
    $new_request = $_GET['new_request'];
    // check new request flag for erase all data from txt file
    if(isset($new_request) && $new_request == 0 ){
        $handle = fopen ("../textfile/data.txt", "w+");
        fclose($handle);
    }
}
if($_SERVER['REQUEST_METHOD']=='POST'){
    $domain = $_POST['domain'];
    $suffixes = $_POST['suffix'];

    $target = 'http://whois.apitruck.com/'.$domain.".".$suffixes;
    $getcontent = file_get_contents($target);
    $json = json_decode($getcontent);
    $status = $json->response->registered;

    if($status){
        die(json_encode(array('suc'=>true)));
    } else {
        $file = '../textfile/data.txt';
        // Open the file to get existing content
        $current = file_get_contents($file);
        // Append a new person to the file
        $current .= $domain.".".$suffixes." | \n";
        // Write the contents back to the file
        file_put_contents($file, $current);

        die(json_encode(array('suc'=>false)));
    }
}
?>

Answer 1

According to Chrome's code review the reason you get that error is that you reach the constraint of how many requests can be outstanding for your rendered process, and as you mentioned - you're talking about ~6000 requests.

The Error:

net::ERR_INSUFFICIENT_RESOURCES

The Reason:

Add a constraint on how many requests can be outstanding for any given render process (browser-side).

Once the constraint is reached, subsequent requests will fail with net::ERR_INSUFFICIENT_RESOURCES.

The bound is defined as "25 MB", which represents the amount of private bytes we expect the pending requests to consume in the browser. This number translates into around 6000 typical requests.

Note that the upload data of a request is not currently considered part of the request's in-memory cost -- more data is needed on the average/maximum upload sizes of users before deciding what a compatible limit is.

Source: https://codereview.chromium.org/18541

How to work it out anyway?

My suggestion is to take the input and add it to the database, into aa pending_requests table. In your server, create a cronjob that runs every few minutes and accomplish X requests from that table and once it's complete - remove them from that table so the next time the cronjob runs it will go to the next X requests.

Many services that work with multiple-requests use this kind of method in a sort of a way. They usually notify the user by email when their task is complete.