中文简体 | English

ajax-proxy

Introduction

ajax-proxy is a repo which intercepts XMLHTTPRequest refactor by es6 Proxy.

Usage

Installation

• Using CDN

<script>
  https://unpkg.com/@lazyduke/ajax-proxy/dist/index.min.js
</script>

• Using NPM

  npm install @lazyduke/ajax-proxy

Guide

基于 ES6 的 Proxy ，100 行代码实现一个 XMLHttpRequest 的拦截核心 ajax-proxy

API

ajax-proxy is very easy to use, it has only two methods called proxyAjax and unProxyAjax, you can get started quickly as long as you know of XMLHttpRequest.

proxyAjax(proxyMap)

• proxyMap: arguments object，key is the property or method which need to be intercepted, value is the intercepting function.

  • Normal property: response, responseText, timeout... those can intercept through setter/getter, we can easily set the setter of property to true while intercepting method to change some readonly property such as response. Notice: xhr in args is the intercepted instance of XMLHttpRequest while this in args is the original instance of XMLHttpRequest.(if not using arrow function)

    • intercept response (getter)

    proxyAjax({
      response: {
        getter: function(value, xhr) {
          try {
            return JSON.parse(value)
          } catch (error) {}
        }
      }
    })

    • intercept timeout (setter)

    proxyAjax({
      timeout: {
        setter: function (v, xhr) {
          return Math.max(v, 1000)
        }
    
    })

    • intercept response (setter) and onload

    proxyAjax({
      response: {
        setter: true
      },
      onload: function(xhr) {
        try {
          /**
           * In the function which intercepts 'event' property，
           * only the property of this can be operate，
           * otherwise it will cause stack overlow.
           * (certainly do not use arrow function )
           */
          xhr.response = JSON.parse(this.response)
        } catch (error) {}
      }
    })

  • 'Event' property: onload, onreadystatechange... those can intercept through getter. Notice: xhr in args is the intercepted instance of XMLHttpRequest while this in args is the original instance of XMLHttpRequest.(if not using arrow function)

  proxyAjax({
    onload: function(xhr) {
      // do some intercepting
    }
  })

  • Method: open, send... those can intercept through getter. Notice: 1.args is an array of original method's arguments, xhr is the intercepted instance of XMLHttpRequest while this is the original instance of XMLHttpRequest.(if not using arrow function) 2.we can terminate intercept by returning value true, if an object is return, it will be the new arguments to pass

    • intercept open

    proxyAjax({
      open: function(args, xhr) {
        // do some intercepting
      }
    })

    • intercept open and terminate it

    proxyAjax({
      open: function(args, xhr) {
        // do some intercepting
        return true
      }
    })

    • intercept open and pass new arguments

    proxyAjax({
      open: function(args, xhr) {
        // do some intercepting
        function changeArgs(args) {
          // change args
        }
        return changeArgs(args)
        // also support function
        // return changeArgs
      }
    })

  • Management of request's context

    Assume we want to share a variable in open and onload, xhr is the context object we can use.

    proxyAjax({
      open: function(args, xhr) {
        xhr.xxx = '...'
      },
      onload: function(xhr) {
        xhr.xxx // ‘...’
      }
    })

unProxyAjax

• Cancel the Proxy: Cancel intercepting original XMLHttpRequest object.

Notice

• As for intercepting property, do not try to get access to any property of xhr in getter function as well as doing some assignment in setter function，just do all this operation in this.
• This repo require browser environment which support ES6 and Proxy object.

Contributing

1. Clone repo

2. Type these in CMD

   npm install
   npm test

   to get started

Credits

Inspired by Ajax-hook 原理解析 of Ajax-hook.