> 웹 프론트엔드 > JS 튜토리얼 > 사용자 정의 작업을 사용하여 페이지의 모든 AJAX 요청을 가로채는 방법은 무엇입니까?

사용자 정의 작업을 사용하여 페이지의 모든 AJAX 요청을 가로채는 방법은 무엇입니까?

Patricia Arquette
풀어 주다: 2024-10-25 05:49:02
원래의
964명이 탐색했습니다.

How to Intercept All AJAX Requests on a Page with Custom Actions?

사용자 정의 작업을 사용하여 페이지의 모든 AJAX 요청 가로채기

Q: 페이지의 모든 AJAX 요청에 "후크"하는 것이 가능합니까? , 전송되기 전이나 이벤트 중에 맞춤 작업을 수행하시겠습니까?

A: 예, 다음 접근 방식을 사용하면 가능합니다.

AJAX 요청 가로채기

페이지의 모든 AJAX 요청을 가로채기 위해 요청을 시작하는 데 사용되는 XMLHttpRequest 개체의 open() 메서드를 재정의할 수 있습니다. open() 메소드를 가로채면 요청이 전송되기 전에 사용자 정의 작업을 실행할 수 있습니다.

AJAX 요청을 가로채는 코드는 다음과 같습니다.

<code class="js">(function() {
    var origOpen = XMLHttpRequest.prototype.open;
    XMLHttpRequest.prototype.open = function() {
        console.log('request started!');
        this.addEventListener('load', function() {
            console.log('request completed!');
            console.log(this.readyState); //will always be 4 (ajax is completed successfully)
            console.log(this.responseText); //whatever the response was
        });
        origOpen.apply(this, arguments);
    };
})();</code>
로그인 후 복사

위 코드를 실행하면 요청 URL 기록, 헤더 추가, 요청 데이터 수정 등 필요한 모든 작업을 수행할 수 있습니다.

타사 스크립트

이 접근 방식은 모든 AJAX 구현에서 사용되는 기본 XMLHttpRequest 객체를 가로채기 때문에 jQuery 또는 기타 AJAX 라이브러리를 사용하는 타사 스크립트입니다. 그러나 이 접근 방식은 기본 가져오기 API에서는 작동하지 않을 수 있다는 점에 유의하는 것이 중요합니다.

추가 리소스

AJAX 이벤트 처리를 위한 addEventListener API에 대한 자세한 내용은 다음을 참조하세요. https://developer.mozilla.org/en-US/docs/Web/API/XMLHttpRequest/Using_XMLHttpRequest#Monitoring_progress

브라우저 지원

이 접근 방식은 다음을 수행합니다. Internet Explorer 8 이하에서는 작동하지 않습니다.

위 내용은 사용자 정의 작업을 사용하여 페이지의 모든 AJAX 요청을 가로채는 방법은 무엇입니까?의 상세 내용입니다. 자세한 내용은 PHP 중국어 웹사이트의 기타 관련 기사를 참조하세요!

원천:php.cn
본 웹사이트의 성명
본 글의 내용은 네티즌들의 자발적인 기여로 작성되었으며, 저작권은 원저작자에게 있습니다. 본 사이트는 이에 상응하는 법적 책임을 지지 않습니다. 표절이나 침해가 의심되는 콘텐츠를 발견한 경우 admin@php.cn으로 문의하세요.
저자별 최신 기사
인기 튜토리얼
더>
최신 다운로드
더>
웹 효과
웹사이트 소스 코드
웹사이트 자료
프론트엔드 템플릿