JavaScript обнаруживает событие AJAX
Я понял, как это сделать с помощью jquery - если запрос ajax выполняется by jquery. Вот пример кода для этого:
$.post(
// requested script
'someScript.php',
// data to send
{
'foo' : 'bar',
'a' : 'b'
},
// receive response
function(response){
// do something
}
); // .post
// global event listener
$(document).ajaxSend(
function(event,request,settings){
alert(settings.url); // output: "someScript.php"
alert(settings.data); // output: "foo=bar&a=b"
}
);
С этим кодом, независимо от где/как я называю $.пост.(.), запустится глобальный прослушиватель событий. Он также работает, если я использую $.получить или.$ ajax (любые методы jQuery ajax), независимо от того, как/когда я его вызываю (прилагается как onclick, при загрузке страницы, что угодно).
тем не менее, я хочу иметь возможность расширить этот прослушиватель для запуска независимо от того, что используется JS framework, или даже если фреймворк не используется. Так, например, если бы я был и есть на странице следующий код (общий код ajax от w3schools):
function loadXMLDoc()
{
if (window.XMLHttpRequest)
{// code for IE7+, Firefox, Chrome, Opera, Safari
xmlhttp=new XMLHttpRequest();
}
else
{// code for IE6, IE5
xmlhttp=new ActiveXObject("Microsoft.XMLHTTP");
}
xmlhttp.onreadystatechange=function()
{
if (xmlhttp.readyState==4 && xmlhttp.status==200)
{
document.getElementById("myDiv").innerHTML=xmlhttp.responseText;
}
}
xmlhttp.open("GET","test.txt",true);
xmlhttp.send();
}
и тогда у меня есть на какой-то случайной ссылке вызов onclick для этой функции, мой глобальный прослушиватель событий ajax должен быть в состоянии и обнаружить эту просьбу. Ну, я добавил этот код на свою страницу и прикрепил его к onclick случайной ссылки (да, сам код работает), но код jQuery "global event listener" выше не смог обнаружить этот вызов.
Я еще немного покопался, и я знаю, что могу в основном сохранить объект в a temp object и перезаписать текущий объект с помощью объекта" обертки", который вызовет указанную функцию, а затем вызовет функцию temp, но это требует, чтобы я знал заранее исходный объект создается/используется. Но я не всегда буду знать это заранее...
So...is это возможно? Есть ли способ обнаружить запрос ajax get / post, независимо от того, было ли это сделано с помощью универсального объекта или из XYZ framework? Или мне просто придется сделать дубликат код для обработки каждой структуры, а также знать заранее ajax объект(ы) создается/используется?
edit:
Я забыл упомянуть, что это не достаточно, чтобы обнаружить, что запрос произошел. Мне также нужно захватить данные, отправляемые в запросе. Ссылка, приведенная в комментариях ниже, поможет выяснить, был ли сделан запрос "a", но не получить отправленные данные. p. s. - ответ, приведенный в ссылке ниже, не очень ясен, по крайней мере, для меня в любом случае.
2 ответов:
хорошо, это то, что я придумал до сих пор:
<script type='text/javascript'> var s_ajaxListener = new Object(); s_ajaxListener.tempOpen = XMLHttpRequest.prototype.open; s_ajaxListener.tempSend = XMLHttpRequest.prototype.send; s_ajaxListener.callback = function () { // this.method :the ajax method used // this.url :the url of the requested script (including query string, if any) (urlencoded) // this.data :the data sent, if any ex: foo=bar&a=b (urlencoded) } XMLHttpRequest.prototype.open = function(a,b) { if (!a) var a=''; if (!b) var b=''; s_ajaxListener.tempOpen.apply(this, arguments); s_ajaxListener.method = a; s_ajaxListener.url = b; if (a.toLowerCase() == 'get') { s_ajaxListener.data = b.split('?'); s_ajaxListener.data = s_ajaxListener.data[1]; } } XMLHttpRequest.prototype.send = function(a,b) { if (!a) var a=''; if (!b) var b=''; s_ajaxListener.tempSend.apply(this, arguments); if(s_ajaxListener.method.toLowerCase() == 'post')s_ajaxListener.data = a; s_ajaxListener.callback(); } </script>маршрут:
просто c / p это на Вашей странице или включить его в a .файл JS или любой другой. Это позволит создать объект, называемый s_ajaxListener. Всякий раз, когда делается запрос AJAX GET или POST, s_ajaxListener.вызывается callback (), и доступны следующие свойства:
s_ajaxListener.метод: используемый метод ajax. Это должно быть либо GET, либо POST. ОТМЕЧАТЬ: значение не всегда может быть прописным, это зависит от того, как был закодирован конкретный запрос. Я обсуждаю мудрость автоматического верхнего корпуса или оставляю его на что-то другое, чтобы toLowerCase() для сравнения без учета регистра.
s_ajaxListener.URL-адрес : url-адрес запрошенного скрипта (включая строку запроса, если таковая имеется) (urlencoded). Я заметил, что в зависимости от того, как отправляются данные и из какого браузера/фреймворка, например, это значение может оказаться как "" или "+" или "%20". Я обсуждаю мудрость расшифровки его здесь или оставить его на что-то другое.
s_ajaxListener.данные: отправленные данные, если таковые имеются, например: foo=bar&a=b (та же "проблема", что и .url с его кодировкой url-адреса)
Примечания:
Так, это не совместимо с IE6. это решение не совсем хорошо для меня, так как я хочу, чтобы оно было совместимо с IE6. Но так как многие другие люди не заботятся о IE6, я решил опубликуйте мое решение в его текущем состоянии, так как оно должно работать для вас, если вы не заботитесь о IE6.
Я проверил это в (как об этом опубликовано дата): текущий сафари, тока хром, текущие дополнения, ИЕ8, ИЕ8 (совместимо с IE7). В настоящее время он не работает с IE6, потому что IE6 использует объект ActiveX, в то время как практически все остальное использует XMLHttpRequest.
прямо сейчас я не знаю, как это сделать, ну в основном прототип / расширение / перегрузка (?) ActiveXObject ("Microsoft.XMLHTTP"). Это то, что я в настоящее время исследую...кто-нибудь знает навскидку?
в каждом из браузеров, которые я тестировал выше, это работает с AJAX-запросами от общего объекта, а также от фреймворков jquery и prototype. Я знаю, что есть и другие рамки, но IMO эти 2 являются основными. Я мог бы, возможно, QA MooTools, но кроме этого, я в порядке, только проверяя их.
Если кто-то хочет внести свой вклад в тестирование и публикация результатов о других браузерах и / или фреймворках, было бы оценено :)
для совместимости IE 6, Как насчет:
<script type='text/javascript'> var s_ajaxListener = new Object(); // Added for IE support if (typeof XMLHttpRequest === "undefined") { XMLHttpRequest = function () { try { return new ActiveXObject("Msxml2.XMLHTTP.6.0"); } catch (e) {} try { return new ActiveXObject("Msxml2.XMLHTTP.3.0"); } catch (e) {} try { return new ActiveXObject("Microsoft.XMLHTTP"); } catch (e) {} throw new Error("This browser does not support XMLHttpRequest."); }; } s_ajaxListener.tempOpen = XMLHttpRequest.prototype.open; s_ajaxListener.tempSend = XMLHttpRequest.prototype.send; s_ajaxListener.callback = function () { // this.method :the ajax method used // this.url :the url of the requested script (including query string, if any) (urlencoded) // this.data :the data sent, if any ex: foo=bar&a=b (urlencoded) } XMLHttpRequest.prototype.open = function(a,b) { if (!a) var a=''; if (!b) var b=''; s_ajaxListener.tempOpen.apply(this, arguments); s_ajaxListener.method = a; s_ajaxListener.url = b; if (a.toLowerCase() == 'get') { s_ajaxListener.data = b.split('?'); s_ajaxListener.data = s_ajaxListener.data[1]; } } XMLHttpRequest.prototype.send = function(a,b) { if (!a) var a=''; if (!b) var b=''; s_ajaxListener.tempSend.apply(this, arguments); if(s_ajaxListener.method.toLowerCase() == 'post')s_ajaxListener.data = a; s_ajaxListener.callback(); } </script>
Comments