Пытаюсь понять, как можно вывести в консоль responseText, для всех запросов, сделанных через XMLHttpRequest по событию onreadystatechange. Информацию собираю по кусочкам, но не могу склеить воедино, т.к не очень понимаю Javascript. Вот что у меня есть:
var s_ajaxListener = {};
s_ajaxListener.tempSend = XMLHttpRequest.prototype.send;
s_ajaxListener.callback = function () {
console.log(this);
}
XMLHttpRequest.prototype.send = function(a,b) {
s_ajaxListener.tempSend.apply(this, arguments);
this.onreadystatechange = s_ajaxListener.callback;
}
Для проверки этот код вставляю в консоль браузера. По идее, он должен логировать все события onreadystatechange. Так и происходит, но тогда страница, в которую я внедрил этот код, перестает работать.
Вот такая страничка:
<!DOCTYPE html>
<html>
<head>
</head>
<body>
<button onclick="send()">Кликни</button>
<div id="result">Кликай</div>
<script>
function send() {
var httpRequest = new XMLHttpRequest();
httpRequest.onreadystatechange = function(){
if (httpRequest.readyState === 4) {// request is done
document.getElementById("result").innerText = httpRequest.responseText;
console.log(httpRequest.responseText);
}
};
httpRequest.open('GET', "/test.php?r=" + Math.random());
httpRequest.send();
}
</script>
</body>
</html>
Тут просто кнопка, по нажатию на которою запрашивается ответ с файла test.php и записывается в div result
Файл test.php
<?php
echo rand();
Вопрос в чем: почему, когда я внедрил код, перестает обновляться result?
Помогите написать правильно так, чтобы и текст обновлялся, и выводился ответ в консоль.
Спасибо.
