Android Webview拦截ajax请求

Android Webview虽然提供了页面加载及资源请求的钩子，可是对于h5的ajax请求并无提供干涉的接口，这意味着咱们不能在webview中干涉javascript发起的http请求，而有时候咱们确实须要可以截获ajax请求并实现一些功能如：统一的网络请求管理、cookie同步、证书校验、访问控制等。

那么究竟有没有办法能在Webview中拦截ajax请求呢？

我百度谷歌一圈后，找到了这篇文章，你能够参考一下：http://blog.csdn.net/kpioneer123/article/details/51438204 。若是没有看懂，那就不用理会了，毕竟本文毫不会撩起你的兴趣，而后却戛然而至的，好了，咱们仍是直奔主题吧。

思路

虽然在 Webview中没法直接拦截 ajax请求（其实在shouldInterceptRequest 中是能够收到ajax请求的，可是遗憾的是取不到请求参数，这样也是没有意义的）， 咱们能够转换思路，能不能在js中将全部的请求转发到native中，这样也就达到了相同的目的。若是能够，那就须要一种在javascript和native之间通讯的桥梁（javascript bridge），经过它，javascript将请求信息传递给native, native完成真正的请求后再将结果数据传递给javascript。那么咱们的思路就是：

1. 在javascript中拦截全部ajax请求，而后经过javascript bridge将请求信息传递给native
2. native收到请求信息后，进行一些与处理逻辑，而后完成本次请求，将请求结果经过javascript bridge再回传给javascript.

这样，在第二步native上收到请求信息后，咱们就能够进行统一的网络请求管理、cookie同步、证书校验、访问控制。思路虽然简单，但实现起来倒是比较麻烦，由于须要前端和native都须要作很多的工做。那么有什么简单的方法吗？固然有！

轮子

fly.js 是一个支持请求重定向的轻量级、跨平台的Javascript http请求库 ，前端可使用它轻松发起网络请求，它会自动将请求转发至native. 如今解决了第一个问题，接下来咱们须要选一个javascript bridge, 而如今开源的javascript bridge挺多，你能够选择任意一个你喜欢的。可是，在此强烈推荐一下 DSBridge它是一个使用很是简单并支持同步的跨平台javascript birdge， 最关键的的是DSBridge 的demo中就有接收处理fly.js转发的http请求的示例，而且给出了okhttp的实现，而且， fly.js 官方也提供了 DSBridge 的adapter. 下面咱们以DSBridge为例，演示一下整个过程：

实例

前端

//引入dsbridge adapter
var adapter = require("flyio/dist/npm/adapter/dsbridge")
var EngineWrapper = require("flyio/dist/npm/engine-wrapper")
var dsEngine = EngineWrapper(adapter)
var fly = new Fly(dsEngine);

//接下来，经过fly发起的ajax请求都会转发到native上
fly.post('/user', {
    name: 'Doris',
    age: 24
    phone:"18513222525"
  })
  .then(function (response) {
    console.log(response);
  })
  .catch(function (error) {
    console.log(error);
  });
复制代码

Native端

@JavascriptInterface
 public void onAjaxRequest(JSONObject jsonObject, final CompletionHandler handler){
    //jsonObject 为fly adapter 传给端的requerst对象
    //端上完成请求后，将响应对象经过hander返回给fly adapter
    //hanlder(response)
 }
复制代码

fly.js中dsbridge的adapter会调用Native的 onAjaxRequest方法，native只需实现这个方法便可，完整的请求实现能够参照 DSbridge demo中 AjaxHandler 的实现.

值得注意的是， fly.js并非只支持DSBridge ，它能够支持任何javascript bridge，只是不一样的javascript bridge的数据传输协议不一样，须要分别提供一个adapter, 详情请参考：fly.js之http engine及adapter .

最后

贴出fly.js和DSBridge的github地址，欢迎star ! 有什么问题也能够关注我或留言。

fly.js: https://github.com/wendux/fly

DSBridge-Android: github.com/wendux/DSBr…

DSBridge-IOS: github.com/wendux/DSBr…