집 > 기사 > 웹 프론트엔드 > Js가 전역 Ajax 요청을 가로챕니다.

Js가 전역 Ajax 요청을 가로챕니다.

小云云원래의: 2017-12-09 16:52:431711검색

다음과 같은 요구 사항이 있었던 적이 있습니까? 모든 Ajax 요청에 통합 서명을 추가해야 함, 특정 인터페이스가 요청된 횟수를 계산해야 함, 가져오거나 게시할 http 요청 방법을 제한해야 함, 분석해야 함 다른 사람의 네트워크 프로토콜 등, 그렇다면 어떻게 해야 할까요? 생각해 보세요. 모든 Ajax 요청을 가로챌 수 있다면 문제는 매우 간단해질 것입니다!

사용방법

1. 스크립트를 직접 도입

ajaxhook.js

<script src="wendu.ajaxhook.js"></script>

을 도입하여 필요한 ajax 콜백이나 함수를 가로채세요.

hookAjax({
    //拦截回调
    onreadystatechange:function(xhr){
        console.log("onreadystatechange called: %O",xhr)
    },
    onload:function(xhr){
        console.log("onload called: %O",xhr)
    },
    //拦截函数
    open:function(arg){
     console.log("open called: method:%s,url:%s,async:%s",arg[0],arg[1],arg[2])
    }
})

좋아요, 테스트를 위해 jQuery(v3.1)의 get 메소드를 사용합니다:

// get current page source code 
$.get().done(function(d){
    console.log(d.substr(0,30)+"...")
})

결과:

> open called: method:GET,url:http://localhost:63342/Ajax-hook/demo.html,async:true
> onload called: XMLHttpRequest
> <!DOCTYPE html>
  <html>
  <head l...

차단에 성공했습니다! 또한 jQuery3.1이 onreadystatechange를 포기하고 대신 onload를 사용한 것을 볼 수 있습니다.

2. CommonJs 아래의 모듈 구축 도구 환경에서

webpack 아래에 있다고 가정하면 첫 번째 단계는 ajax-hook npm 플러그인을 설치하는 것입니다.

npm install ajax-hook --save-dev

두 번째 단계는 모듈을 소개하고 API를 호출하는 것입니다. :

const ah=require("ajax-hook")
ah.hookAjax({ 
  onreadystatechange:function(xhr){ ... },
  onload:function(xhr){ ... }, 
  ...
})
...
ah.unHookAjax()

API

hookAjax( ob)

ob, 유형은 객체이고, 키는 가로채려는 콜백이나 함수이고, 값은 가로채기 함수입니다.
반환 값: 원본 XMLHttpRequest. 쓰기 요청이 있는데 가로채기를 원하지 않는 경우 new this를 사용할 수 있습니다.

unHookAjax()

차단을 제거하면 차단이 무효화됩니다.

Ajax 동작 변경

모든 Ajax 요청을 가로채고, 요청 메서드를 감지하고, "GET"인 경우 요청을 중단하고 프롬프트를 표시합니다.

hookAjax({
  open:function(arg){
    if(arg[0]=="GET"){
      console.log("Request was aborted! method must be post! ")
      return true;
    }
  } 
 })

모든 Ajax 요청을 가로채고, 통합 타임스탬프 추가 요청

hookAjax({
  open:function(arg){
    arg[1]+="?timestamp="+Date.now();
  } 
 })

요청 반환 수정 데이터 "responseText"

hookAjax({
   onload:function(xhr){
    //请求到的数据首部添加"hook!" 
    xhr.responseText="hook!"+xhr.responseText;
   }
 })

결과:

hook!<!DOCTYPE html>
<html>
<h...

이 예제를 사용하면 처음에 언급한 요구 사항을 쉽게 실현할 수 있다고 생각합니다. 마지막으로 unHook

   hookAjax({
        onreadystatechange:function(xhr){
            console.log("onreadystatechange called: %O",xhr)
            //return true

        },
        onload:function(xhr){
            console.log("onload called")
            xhr.responseText="hook"+xhr.responseText;
            //return true;
        },
        open:function(arg){
          console.log("open called: method:%s,url:%s,async:%s",arg[0],arg[1],arg[2])
          arg[1]+="?hook_tag=1";

        },
        send:function(arg){
         console.log("send called: %O",arg[0])
        }
    })

    $.get().done(function(d){
        console.log(d.substr(0,30)+"...")
        //use original XMLHttpRequest
        console.log("unhook")
        unHookAjax()
        $.get().done(function(d){
            console.log(d.substr(0,10))
        })

    })

출력을 테스트하세요.

open called: method:GET,url:http://localhost:63342/Ajax-hook/demo.html,async:true
send called: null
onload called
hook<!DOCTYPE html>
<html>
<he...
unhook
<!DOCTYPE

Note

차단 함수의 반환 값이 true인 경우 ajax 요청을 차단합니다. 기본값은 false입니다. 요구.
모든 콜백 차단 함수의 매개변수는 onreadystatechange, onload와 같은 현재 XMLHttpRequest 인스턴스입니다. ajax 원래 메소드의 모든 차단 함수는 원래 매개변수를 배열 형식으로 차단 함수에 전달하며 다음을 수행할 수 있습니다. 차단 기능에서 수정하세요.