title: AJAX error ERR_INSUFFICIENT_RESOURCES, how to avoid
body: <p>I tried researching about this matter, and I know that this error occurs because of too many ajax calls that's why the browser can't handle it. However I think that the solution is a case to case. Let me try to explain on how this code works</p>
  
  <p>First I select a csv file (8000 rows) then I will upload it to the database, the calling function works like this.</p>
  
  <pre><code>$(document).on("click", "#btn-group-agent-upload", function () {
  
      var reader = new FileReader();
      updateUploadPercentage(0);
  
      var file = $("#group-agent-file").prop("files")[0];
  
      reader.readAsText(file, 'UTF-8');
  
      reader.onload = Insert_Bulk_Agent;
  
  });
  </code></pre>
  
  <p>and it execute the function <code>Insert_Bulk_Agent</code> in which this</p>
  
  <pre><code>function Insert_Bulk_Agent(event) {
  
  var result = event.target.result;
  var data = $.csv.toObjects(result);
  var length = data.length;
  var count = 0;
  var arrayCollection = [];
  var tbody = $("#error-list").find("tbody");
  if (length &gt; 0) {
  
      $.each(data, function (key, val) {
  
          if(val.AgentStatus == "" || val.BirthDate == "" || val.CSP == "" || val.Classification == "" || val.ContactNumber == "" ||
              val.EmailAddress == "" || val.FirstName == "" || val.LastName == "" || val.MiddleName == "" || val.LiveDate == "" || val.Program == "") {
              $.ajax({
                  success: function () {
                      //console.log('ok');
  
                      $(tbody).append("&lt;tr&gt;&lt;td&gt;" + val.FirstName + ' ' + val.MiddleName + ' ' + val.LastName + "&lt;/td&gt;" +
                                          "&lt;td&gt;" + val.Tool + "&lt;/td&gt;&lt;/tr&gt;");
                      arrayCollection.push(val);
                      count = count + 1;
                      var percentageCompleted = count / length * 100;
                      updateUploadPercentage(parseInt(percentageCompleted));
  
                  }
              });
          } else {
  
              $.ajax({
                  xhr: function () {
                      var xhr = $.ajaxSettings.xhr();
                      xhr.upload.onprogress = function (evt) {
                          count = count + 1;
                          var percentageCompleted = count / length * 100;
                          updateUploadPercentage(parseInt(percentageCompleted));
  
                      };
                      return xhr;
                  },
                  type: "POST",
                  url: "IROA_StoredProcedures.asmx/Insert_Bulk_Agent",
                  data: JSON.stringify(val),
                  contentType: "application/json; charset=utf-8",
                  dataType: "json",
                  success: function () {
  
  
                  },
                  error: function (XMLHttpRequest) {
  
                      count = count + 1;
                      var percentageCompleted = count / length * 100;
                      updateUploadPercentage(parseInt(percentageCompleted));
                      console.log(XMLHttpRequest);
                      console.log(JSON.stringify(val));
                  }
  
              });
  
          }    
      });
  
  }
  else {
  
      alert("The selected file is empty");
  
  }
   Update_uam();
  }
  </code></pre>
  
  <p><strong>First</strong>
     The function loop through each row and evaluates if the required fields are not <code>null</code> or <code>""</code> value. If it is the function then add a row in a <code>html</code> table. If it has values it will then call an ajax that will insert the values to the database. Now the issue is it's having problem because of multiple <code>AJAX</code> calls. How can I handle this error?</p>
  
  <p><strong>Second</strong>
     There is another function that wiill call here <code>update_uam</code> is it sure that this function will execute after all the <code>Insert_Bulk_Agent</code> process?</p>