JavaScript: обнаружение запросов AJAX

Question

Есть ли способ обнаружить глобальные вызовы AJAX (особенно ответы) на веб-странице с помощью общего JavaScript (не с фреймворками)?

Я уже рассмотрел вопрос «JavaScript detect an AJAX event», здесь, в StackOverflow, и попытался внести исправления в код принятого ответа в мое приложение, но это не сработало. Я никогда ничего не делал с AJAX до этого, я не знаю достаточно, чтобы изменить его на работу.

Мне не нужно ничего фантазировать, мне просто нужно обнаружить все (конкретное, на самом деле, но я должен был бы обнаружить все сначала и перейти оттуда) ответы AJAX и исправить их в оператор IF для использования. Итак, в конце концов, мне хотелось бы что-то вроде:

if (ajax.response == "certainResponseType"){ 
    //Code 
} 

, например.

Update: Кажется, я должен уточнить, что я не пытаюсь отправить запрос - Я разрабатываю скрипт контента, и мне нужно, чтобы быть в состоянии обнаружить веб-страницы, в AJAX запросы (не сделать мой собственный), поэтому я могу выполнить функцию, когда обнаружен ответ.

Answer 1

Это может быть немного сложно. Как насчет этого?

var _send = XMLHttpRequest.prototype.send; 
XMLHttpRequest.prototype.send = function() { 

    /* Wrap onreadystaechange callback */ 
    var callback = this.onreadystatechange; 
    this.onreadystatechange = function() {    
     if (this.readyState == 4) { 
      /* We are in response; do something, 
       like logging or anything you want */ 
     } 
     callback.apply(this, arguments); 
    } 

    _send.apply(this, arguments); 
} 

Я не тестировал его, но он выглядит более-менее точным.

Обратите внимание: если вы используете фреймворки (например, jQuery), они могут переопределить onreadystatechange после вызова send (я думаю, что jQuery делает). Или они могут переопределить метод send (но это маловероятно). Таким образом, это частичное решение.

EDIT: В настоящее время (начало 2018 года) это осложняется с помощью the new fetch API. Глобальная функция fetch также должна быть переопределена аналогичным образом.

Answer 2

Вот код (протестировано вставив в консоли Chrome 31.0.1650.63 в) для ловли и заготовки или иной обработки Ajax запросов и их ответы:

(function() { 
    var proxied = window.XMLHttpRequest.prototype.send; 
    window.XMLHttpRequest.prototype.send = function() { 
     console.log(arguments); 
     //Here is where you can add any code to process the request. 
     //If you want to pass the Ajax request object, pass the 'pointer' below 
     var pointer = this 
     var intervalId = window.setInterval(function(){ 
       if(pointer.readyState != 4){ 
         return; 
       } 
       console.log(pointer.responseText); 
       //Here is where you can add any code to process the response. 
       //If you want to pass the Ajax request object, pass the 'pointer' below 
       clearInterval(intervalId); 

     }, 1);//I found a delay of 1 to be sufficient, modify it as you need. 
     return proxied.apply(this, [].slice.call(arguments)); 
    }; 


})(); 

Этот код решает вышеупомянутую проблему с принятым ответом :

Обратите внимание, что он не может работать, если вы используете рамки (например, JQuery), потому что они могут переопределить onreadystatechange после вызова отправки (я думаю, что JQuery делает). Или они могут переопределить метод отправки (но это маловероятно). Так что это частичное решение.

Потому что он не полагается на обратный вызов onreadystatechange, который не изменяется, но контролирует сам «readyState».

Я приспособил ответ здесь: https://stackoverflow.com/a/7778218/1153227

Answer 3

Дает этому попытку.Обнаруживает ответы Ajax, то я добавил условно с использованием XMLHttpRequest propoerties readyState & статуса для запуска функции, если статус ответа = OK

var oldXHR = window.XMLHttpRequest; 

function newXHR() { 
    var realXHR = new oldXHR(); 
    realXHR.addEventListener("readystatechange", function() { 
     if(realXHR.readyState==4 && realXHR.status==200){ 
      afterAjaxComplete() //run your code here 
     } 
    }, false); 
    return realXHR; 
} 
window.XMLHttpRequest = newXHR; 

Измененный: Monitor all JavaScript events in the browser console