Commit
This commit does not belong to any branch on this repository, and may belong to a fork outside of the repository.
2. Support attributes interception.
- Loading branch information
duwen
committed
Aug 27, 2018
1 parent
b180b06
commit 2afc154
Showing
2 changed files
with
126 additions
and
0 deletions.
There are no files selected for viewing
This file contains bidirectional Unicode text that may be interpreted or compiled differently than what appears below. To review, open the file in an editor that reveals hidden Unicode characters.
Learn more about bidirectional Unicode characters
| Original file line number | Diff line number | Diff line change |
|---|---|---|
| @@ -0,0 +1,126 @@ | ||
| # Ajax-hook | ||
|
|
||
| [](https://www.npmjs.org/package/ajax-hook) [](https://travis-ci.org/wendux/Ajax-hook) [](https://opensource.org/licenses/mit-license.php)   [](https://unpkg.com/ajax-hook@1.8.0/dist/ajaxhook.min.js) | ||
|
|
||
|
|
||
|
|
||
|  | ||
|
|
||
| 中文文档:[http://www.jianshu.com/p/9b634f1c9615](http://www.jianshu.com/p/9b634f1c9615) | ||
|
|
||
| 原理解析:[http://www.jianshu.com/p/7337ac624b8e](http://www.jianshu.com/p/7337ac624b8e) | ||
|
|
||
| ## Introduction | ||
|
|
||
| Hooking Javascript XMLHttpRequest ，It can intercept Ajax requests and responses by underlying proxy. | ||
|
|
||
| ## Usage | ||
|
|
||
| 1. Installing | ||
|
|
||
| - Using cdn | ||
|
|
||
| ```html | ||
| <script src="https://unpkg.com/ajax-hook/dist/ajaxhook.min.js"></script> | ||
| ``` | ||
|
|
||
| - Using npm | ||
|
|
||
| ```shell | ||
| npm install ajax-hook | ||
| ``` | ||
|
|
||
| 2. hook the callbacks and functions you want . | ||
|
|
||
| ```javascript | ||
| hookAjax({ | ||
| //hook callbacks | ||
| onreadystatechange:function(xhr){ | ||
| console.log("onreadystatechange called: %O",xhr) | ||
| }, | ||
| onload:function(xhr){ | ||
| console.log("onload called: %O",xhr) | ||
| }, | ||
| //hook function | ||
| 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({...}) | ||
| ``` | ||
|
|
||
| Now, it worked! we use jQuery ajax to test . | ||
|
|
||
| ```javascript | ||
| // get current page source code | ||
| $.get().done(function(d){ | ||
| console.log(d.substr(0,30)+"...") | ||
| }) | ||
| ``` | ||
|
|
||
| The result : | ||
|
|
||
| ``` | ||
| > open called: method:GET,url:http://localhost:63342/Ajax-hook/demo.html,async:true | ||
| > onload called: XMLHttpRequest | ||
| > <!DOCTYPE html> | ||
| <html> | ||
| <head l... | ||
| ``` | ||
|
|
||
| **See the demo "demo.html" for more details.** | ||
|
|
||
| ## API | ||
|
|
||
| ### hookAjax(ob) | ||
|
|
||
| - ob; type is Object | ||
| - return value: original XMLHttpRequest | ||
|
|
||
| ### unHookAjax() | ||
|
|
||
| - unhook Ajax | ||
|
|
||
| ## Changing the default Ajax behavior | ||
|
|
||
| The return value type of all hook-functions is boolean, if `true`, the ajax request will be interrupted ,`false` or `undefined` will continue . for example: | ||
|
|
||
| ```javascript | ||
|
|
||
| hookAjax({ | ||
| open:function(arg,xhr){ | ||
| if(arg[0]=="GET"){ | ||
| console.log("Request was aborted! method must be post! ") | ||
| return true; | ||
| } | ||
| } | ||
| }) | ||
| ``` | ||
|
|
||
| Changing the "responseText" | ||
|
|
||
| ```javascript | ||
| hookAjax({ | ||
| onload:function(xhr){ | ||
| console.log("onload called: %O",xhr) | ||
| xhr.responseText="hook!"+xhr.responseText; | ||
| } | ||
| }) | ||
| ``` | ||
|
|
||
| Result: | ||
|
|
||
| ``` | ||
| hook!<!DOCTYPE html> | ||
| <html> | ||
| <h... | ||
| ``` | ||
|
|
||
|
|
||
|
|
||
| ## Notice | ||
|
|
||
| All callbacks such as onreadystatechange、onload and son on, the first argument is current XMLHttpRequest instance. All functions, such as open, send and so on, the first parameter is an array of the original parameters, the second parameter is the current origin XMLHttpRequest instance. |
