Raschiare / intercettare dati AJAX utilizzando JavaScript?

È ansible utilizzare JavaScript per racimolare tutte le modifiche in una pagina Web che viene aggiornata dal vivo con AJAX? Il sito che desidero analizzare i dati degli aggiornamenti usando AJAX ogni secondo e voglio prendere tutte le modifiche. Questo è un sito Web di aste e diversi oggetti possono cambiare ogni volta che un utente fa un’offerta. Quando viene effettuata un’offerta, la seguente modifica:

Il prezzo dell’offerta attuale L’attuale offerente elevato Il timer dell’asta ha aggiunto del tempo a esso

Desidero prendere questi dati utilizzando un’estensione di Chrome basata su JavaScript. C’è un listener AJAX per JavaScript che può realizzare questo? Un kit di attrezzi? Ho bisogno di una direzione. JavaScript può realizzare questo?

Mostrerò due modi per risolvere il problema. Qualunque sia il metodo che scegli, non dimenticare di leggere il fondo della mia risposta!

Per prima cosa, presento un metodo semplice che funziona solo se la pagina utilizza jQuery . Il secondo metodo sembra leggermente più complesso, ma funzionerà anche su pagine senza jQuery.

I seguenti esempi mostrano come implementare i filtri in base al metodo (ad es. POST / GET), agli URL e ai corpi di dati e di risposta (POST).

Utilizzare un evento Ajax globale in jQuery

Ulteriori informazioni sul metodo jQuery sono disponibili nella documentazione di .ajaxSuccess . Uso:

 jQuery.ajaxSuccess(function(event, xhr, ajaxOptions) { /* Method */ ajaxOptions.type /* URL */ ajaxOptions.url /* Response body */ xhr.responseText /* Request body */ ajaxOptions.data }); 

Modo JavaScript puro

Quando il sito Web non utilizza jQuery per le sue richieste AJAX, è necessario modificare il metodo XMLHttpRequest incorporato. Ciò richiede più codice …:

 (function() { var XHR = XMLHttpRequest.prototype; // Remember references to original methods var open = XHR.open; var send = XHR.send; // Overwrite native methods // Collect data: XHR.open = function(method, url) { this._method = method; this._url = url; return open.apply(this, arguments); }; // Implement "ajaxSuccess" functionality XHR.send = function(postData) { this.addEventListener('load', function() { /* Method */ this._method /* URL */ this._url /* Response body */ this.responseText /* Request body */ postData }); return send.apply(this, arguments); }; })(); 

Farlo funzionare in un’estensione di Chrome

Il codice mostrato in precedenza deve essere eseguito nel contesto della pagina (nel tuo caso, una pagina d’asta). Per questo motivo, è necessario utilizzare uno script di contenuto che inietta (!) Lo script. L’utilizzo di questo non è difficile, mi riferisco a questa risposta per una spiegazione dettagliata più esempi di utilizzo: Creazione di un’estensione di Chrome: inserisci il codice in una pagina utilizzando uno script Contenuto .

Un metodo generale

Puoi leggere il corpo della richiesta, richiedere intestazioni e intestazioni di risposta con l’API chrome.webRequest . Le intestazioni possono anche essere modificate. Tuttavia non è (ancora) ansible leggere, tanto meno modificare il corpo di risposta di una richiesta. Se desideri questa funzione, vai alla pagina https://code.google.com/p/chromium/issues/detail?id=104058 .