JavaScript:AJAX 요청 탐지
범용 JavaScript(프레임워크가 아닌)를 사용하는 웹 페이지에서 글로벌 AJAX 콜(특히 응답)을 검출하는 방법이 있습니까?
여기 StackOverflow에 있는 "JavaScript detect a AJAX event" 질문을 이미 검토했고, 수락된 답변의 코드를 제 애플리케이션에 패치하려고 했지만 효과가 없었습니다.저도 AJAX를 사용해 본 적이 없기 때문에, AJAX를 조작할 수 있을 만큼 잘 모릅니다.
복잡한 것은 필요 없습니다.AJAX 응답을 모두 검출하고(실제로, 모든 것을 검출하고 나서, 거기서부터) IF 스테이트먼트에 패치를 붙이면 사용할 수 있습니다.그래서 결국엔 이렇게 하고 싶어요.
if (ajax.response == "certainResponseType"){
//Code
}
,예를들면.
업데이트: 요청을 전송하려는 것이 아님을 명확히 해야 할 것 같습니다.콘텐츠 스크립트를 작성하고 있으며 웹 페이지의 AJAX 요청을 검출할 수 있어야 합니다(내 것이 아님). 따라서 응답이 검출되었을 때 기능을 실행할 수 있습니다.
다음은 Ajax 요청 및 응답을 캡처 및 로깅하거나 처리하기 위한 코드(Chrome 31.0.1650.63 콘솔에 붙여넣기하여 테스트됨)입니다.
(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 등)를 사용하면 send를 호출한 후 onready state change를 덮어쓸 수 있기 때문에 작동하지 않을 수 있습니다(jQuery는 그렇게 생각합니다).또는 송신 방식을 덮어쓸 수도 있습니다(단, 이것은 가능성이 낮습니다).그래서 그것은 부분적인 해결책이다.
변경되지 않은 'on ready state change' 콜백에 의존하지 않고 'ready State' 자체를 감시하기 때문입니다.
여기서 답변을 수정했습니다.https://stackoverflow.com/a/7778218/1153227
한 번 해봐.Ajax 응답을 검출한 후 XMLHttpRequesties propoerties readyState 및 status를 사용하여 조건을 추가하여 응답 상태가 = 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;
수정처:브라우저 콘솔에서 모든 JavaScript 이벤트 모니터링
이건 좀 까다로울 수 있어요.이건 어때?
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 등)를가 "jQuery"를 덮어쓸 수 수.onreadystatechange 후send(jquery) 니, 들, 재, or, or, 들, 습, 습, 습, 습, or, or, or, or, or, or, or, orsendmethod(단, 이것은 가능성이 낮다).그래서 그것은 부분적인 해결책이다.
편집: 요즘(2018년 초)에는 새로운 fetch API로 인해 더 복잡해집니다.세계적인fetch함수도 마찬가지로 재정의해야 합니다.
이 질문에 대한 현대적인 답변(2021년 4월 현재)은 다음과 같습니다.PerformanceObserver이 두 가지를 모두 관찰할 수 있습니다.XMLHttpRequest요구와fetch()요구:
<!-- Place this at the top of your page's <head>: -->
<script type="text/javascript">
var myRequestLog = []; // Using `var` (instead of `let` or `const`) so it creates an implicit property on the (global) `window` object so you can easily access this log from anywhere just by using `window.myRequestLog[...]`.
function onRequestsObserved( batch ) {
myRequestLog.push( ...batch.getEntries() );
}
var requestObserver = new PerformanceObserver( onRequestsObserved );
requestObserver.observe( { type: 'resource' /*, buffered: true */ } );
</script>
위의 스니펫을 사용하여 요청을 기록하고 글로벌 모선에 보고할 수 있습니다.window.addEventListenr('error', ... )콜백
- 그
batch.getEntries()함수는 DOM 배열을 반환합니다.PerformanceResourceTiming오브젝트(청취만 하고 있기 때문에type: 'resource'(그렇지 않으면 서로 다른 오브젝트 배열이 반환됩니다). - 각각
PerformanceResourceTiming오브젝트에는 다음과 같은 유용한 속성이 있습니다.- 그
initiatorType속성은 다음과 같습니다.- 요청이 요소에 의해 발생한 경우 HTML 요소 이름(태그 이름):
'link'- 요청은 a에서 왔습니다.<link>를 참조해 주세요.'script'- 요청은 a를 로드하는 것이었습니다.<script>.'img'- 요청은 다음 명령어를 로드하는 것입니다.<img />요소.- 기타
'xmlhttprequest'- 요청은 에 의해XMLHttpRequest호출.'fetch'- 요청은 에 의해fetch()불러.
- 요청이 요소에 의해 발생한 경우 HTML 요소 이름(태그 이름):
name- 리소스/요구의 URI입니다. (리다이렉션이 있는 경우 원래 요청 URI인지 최종 요청 URI인지 확실하지 않습니다.)startTime: 주의: 실제로는 이 시점부터PerformanceObserver.observe()요청 시작 시 호출되었습니다.duration: 주의: 실제로는 이 시점부터PerformanceObserver.observe()요구가 완료되었을 때 호출되었습니다.요구의 지속시간만이 아닙니다."실제" 기간을 얻으려면 빼야 합니다.startTime부터duration.transferSize: 응답 바이트 수.
- 그
언급URL : https://stackoverflow.com/questions/10783463/javascript-detect-ajax-requests
'programing' 카테고리의 다른 글
| Convert a JSON schema to a python class (0) | 2023.03.21 |
|---|---|
| 닫힘 이벤트 후 각도 의 모달 (0) | 2023.03.21 |
| Wordpress 관리 막대가 사이트 프런트엔드에 표시되지 않음 (0) | 2023.03.21 |
| 동일 오리진 정책 및 CORS(크로스 오리진 자원 공유) (0) | 2023.03.21 |
| Java.lang.NoClassDefFoundError: com/fasterxml/jackson/databind/exc/InvalidDefinition예외. (0) | 2023.03.21 |