# Ajax-hook **Repository Path**: randywangrandy/Ajax-hook ## Basic Information - **Project Name**: Ajax-hook - **Description**: :trident: Intercepting browser's AJAX requests which made by XMLHttpRequest. - **Primary Language**: Unknown - **License**: Not specified - **Default Branch**: master - **Homepage**: None - **GVP Project**: No ## Statistics - **Stars**: 0 - **Forks**: 0 - **Created**: 2020-08-18 - **Last Updated**: 2020-12-19 ## Categories & Tags **Categories**: Uncategorized **Tags**: None ## README 中文简体|[English](./README-EN.md) # Ajax-hook [![npm version](https://img.shields.io/npm/v/ajax-hook.svg)](https://www.npmjs.org/package/ajax-hook) [![build status](https://travis-ci.org/wendux/Ajax-hook.svg?branch=master)](https://travis-ci.org/wendux/Ajax-hook) [![license](https://img.shields.io/github/license/mashape/apistatus.svg)](https://opensource.org/licenses/mit-license.php) ![](https://img.shields.io/badge/typeScript-support-orange.svg) ![](https://img.shields.io/badge/support-%3E%3Des5-orange.svg) [![](https://img.shields.io/github/size/wendux/Ajax-hook/dist/ajaxhook.min.js.svg)](https://unpkg.com/ajax-hook@1.8.0/dist/ajaxhook.min.js) ![image](https://github.com/wendux/Ajax-hook/raw/master/ajaxhook.png) 原理解析:[http://www.jianshu.com/p/7337ac624b8e](http://www.jianshu.com/p/7337ac624b8e) ## 简介 Ajax-hook是一个精巧的用于拦截XMLHttpRequest全局对象的库，它可以在XMLHttpRequest对象发起请求之前和收到响应内容之后获得处理权。通过它你可以在底层对请求进行统一的操作。 ## 使用 ### 安装 - CDN引入 ```html ``` - NPM引入 ```shell npm install ajax-hook ``` ### 拦截`XMLHttpRequest`回调和方法 ```javascript hookAjax({ //拦截回调 onreadystatechange:function(xhr){ console.log("onreadystatechange called: %O",xhr) }, onload:function(xhr){ console.log("onload called: %O",xhr) }, //拦截方法 open:function(arg,xhr){ console.log("open called: method:%s,url:%s,async:%s",arg[0],arg[1],arg[2]) } }) // NPM // const ah=require("ajax-hook") // ah.hookAjax({...}) ``` 这样拦截就生效了，拦截的全局的`XMLHttpRequest`，所以，无论你使用的是哪种JavaScript http请求库，它们只要最终是使用`XMLHttpRequest`发起的网络请求，那么拦截都会生效。下面我们用jQuery发起一个请求： ```javascript // 获取当前页面的源码(Chrome中测试) $.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 > 假设对于同一个请求，你需要在其`open`的拦截函数和`onload` 回调中共享一个变量，但由于拦截的是全局XMLHttpRequest对象，所有网络请求会无次序的走到拦截的方法中，这时你可以通过`xhr`来对应请求的上下文信息。在上述场景中，你可以在`open`拦截函数中给`xhr`设置一个属性，然后在`onload`回调中获取即可。 - `XMLHttpRequest`的所有方法如`open`、`send等`，他们拦截函数的第一个参数是一个数组，数组的内容是其对应的原生方法的参数列表，第二个参数是本次请求对应的`XMLHttpRequest`对象（已代理）。返回值类型是一个布尔值，为true时会阻断对应的请求。 - 对于属性拦截器，为了避免循环调用导致的栈溢出，不可以在其getter拦截器中再读取其同名属性或在其setter拦截器中在给其同名属性赋值。 - 本库需要在支持ES5的浏览器环境中运行(不支持IE8)，但本库并不依赖ES6新特性。 ## 最后本库在2016年首次开源，最初只是个人研究所用，源码50行左右，实现了一个Ajax拦截的核心，并非一个完整可商用的项目。自开源后，有好多人对这个黑科技比较感兴趣，于是我便写了篇介绍的博客，由于代码比较精炼，所以对于JavaScript不是很精通的同学可能看起来比较吃力，之后专门写了一篇原理解析的文章，现在已经有很多公司已经将ajax-hook用于线上项目中，直到我知道美团、滴滴也用到之后，笔者对此库进行了修改和扩展以增强其健壮性和实用性，现在已经达到商用的标准，本库也将进行技术支持。如果你喜欢，欢迎Star，如果有问题，欢迎提Issue，如果你想打赏或想请作者喝杯咖啡，请扫描下面二维码： ![image-20180827191240122](https://github.com/wendux/Ajax-hook/raw/master/pay.png)