JavaScript가 AJAX 이벤트를 검출하다

JavaScript가 AJAX 이벤트를 검출하다

네, 기본적으로는 javascript를 첨부한 페이지에 약간의 javascript를 첨부하면 (콜에서 직접 호출하지 않고) ajax 요청이 있을 경우 이를 감지하고 작업을 수행할 수 있습니다.

저는 jquery에서 어떻게 해야 하는지 알아냈습니다.jquery에서 ajax 요청이 이루어지고 있는지요.다음은 이에 대한 코드 예시입니다.

$.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"
  }
);

이 코드를 사용하면 $.post(..)를 호출하는 장소와 방법에 관계없이 글로벌이벤트 리스너는 트리거 됩니다.호출 방법이나 시간에 관계없이 $.get 또는 $.ajax(모든 jquery ajax 메서드)를 사용하는 경우에도 작동합니다(온클릭, 페이지 로드 시 등).

단, 어떤 js 프레임워크가 사용되고 있는지, 어떤 프레임워크가 사용되고 있지 않은지에 관계없이 이 청취자를 트리거로 확장할 수 있기를 원합니다.예를 들어 페이지에 다음 코드(w3schools의 일반 Ajax 코드)도 있다고 합시다.

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();
}

그리고 랜덤 링크에서 해당 함수에 대한 클릭콜이 있으면 글로벌 Ajax 이벤트청취자도 이 요구를 검출할 수 있습니다.이 코드를 페이지에 추가하여 임의의 링크의 온클릭에 첨부했지만(네, 코드 자체는 동작합니다), 위의 jquery "global event listener" 코드는 해당 콜을 검출하지 못했습니다.

좀 더 자세히 알아보니 기본적으로 개체를 임시 객체에 저장하고 지정된 함수를 호출한 다음 임시 함수를 호출하는 "래퍼" 객체로 현재 개체를 덮어쓸 수 있습니다. 그러나 이 작업을 수행하려면 생성/사용 중인 원래 개체를 미리 알아야 합니다.하지만 항상 미리 알지는 못하겠지만...

그래서... 이게 가능해?범용 오브젝트인지 xyz 프레임워크인지에 관계없이 ajax get/post 요구가 이루어졌는지를 검출할 수 있는 방법이 있습니까?아니면 각 프레임워크를 처리하기 위해 코드를 중복해서 작성하거나 사용하는 Ajax 오브젝트를 미리 알아야 합니까?

편집:

요청이 발생한 것을 감지하는 것만으로는 부족하다는 것을 깜빡했습니다.요청서에 전송되는 데이터도 캡처해야 합니다.아래의 코멘트에 기재되어 있는 링크는, 「a」의 요구가 있었는지 아닌지를 판별하는 데 도움이 됩니다만, 이하의 링크에 기재되어 있는 답변은, 적어도 저에게는 명확하지 않습니다.

자, 지금까지 생각해낸 것은 다음과 같습니다.

<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하거나 .js 파일에 포함시키거나 하세요.그러면 s_ajaxListener라는 개체가 생성됩니다.AJAX GET 또는 POST 요구가 발행될 때마다 s_ajaxListener.callback()이 호출되어 다음 속성을 사용할 수 있습니다.

s_ajax Listener.method : 사용되는 아약스 방식.이것은 GET 또는 POST 중 하나여야 합니다.주의: 값은 항상 대문자는 아닙니다.특정 요청의 코드화 방법에 따라 달라집니다.대소문자를 구분하지 않는 비교를 위해 자동으로 대문자를 사용할지 Lower Case()에 맡길지 고민하고 있습니다.

s_ajaxListener.url : 요청된 스크립트의 URL(쿼리 문자열이 있는 경우 포함)(url 인코딩됨).데이터 전송 방법 및 브라우저/프레임워크에 따라 예를 들어 이 값은 ", "+", "%20"이 될 수 있습니다.나는 여기서 그것을 해독할지 아니면 다른 것에 맡길지 고민하고 있다.

s_ajaxListener.data : 전송되는 데이터(예: foo=bar&a=b) (url-inter로 .url과 같은 '발행')

주의:

현상태로는 IE6과 호환되지 않습니다.IE6 호환성을 원하기 때문에 이 솔루션은 저에게 충분하지 않습니다.하지만 많은 사람들이 IE6에 관심이 없기 때문에, IE6에 관심이 없다면 당신에게 도움이 될 것이기 때문에, 저는 현재의 상태로 제 솔루션을 게시하기로 결정했습니다.

(이 게시일 현재)에서 테스트했습니다.현재 Safari, 현재 Chrome, 현재 FireFox, IE8, IE8(IE7 호환).IE6에서는 ActiveX 오브젝트를 사용하고, 그 외의 거의 모든 것은 XMLHttpRequest를 사용하기 때문에, 현재는 IE6에서는 동작하지 않습니다.

현재로선 시제품/확장/오버로드(?) 방법을 잘 모르겠습니다.XMLHTTP')를 참조해 주세요.이게 제가 지금 연구하고 있는...아는 사람 있나요?

위에서 테스트한 각 브라우저에서는 범용 오브젝트로부터의 AJAX 요구와 jquery 프레임워크와 프로토타입 프레임워크에서도 동작합니다.다른 프레임워크가 있는 것은 알지만 IMO가 이 두 가지 주요 프레임워크입니다.QA MoTools를 사용할 수도 있지만, 그 외에는 테스트만 하면 됩니다.

다른 브라우저 및/또는 프레임워크에 대한 테스트 및 결과 게시를 통해 기여하고 싶은 사람은 누구나 있습니다.

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>

다른 스크립트(XHR 또는 fetch)에 의한 AJAX 이벤트를 청취할 필요가 있고, 이 SO 포스트에서 영감을 얻어 GitHub에서 매우 다재다능한 AjaxListener.js의 작은 유틸리티를 만들었습니다(주의: IE <7은 지원되지 않습니다).

기본 사용법:

function mylistener(req, res)
{
    // API is either 'xhr' or 'fetch'
    console.log('REQUEST', 'API', req.getAPI(), 'Method', req.getMethod(), 'URL', req.getURL(), 'Headers', req.getHeaders(), 'Body', req.getBody());
    console.log('RESPONSE', 'API', res.getAPI(), 'Status', res.getStatus(), 'URL', res.getURL(), 'Headers', res.getHeaders(), 'Body', res.getBody());
}

AjaxListener.install().onRequest(mylistener);

//AjaxListener.onRequest(mylistener, false); // unlisten

//AjaxListener.uninstall(); // uninstall

유용했으면 좋겠다.

언급URL : https://stackoverflow.com/questions/3596583/javascript-detect-an-ajax-event