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…