透過JS 攔截全域ajax請求實例解析-js教程-PHP中文網

首頁

web前端

js教程

透過JS 攔截全域ajax請求實例解析

高洛峰

Mar 28, 2017 pm 02:39 PM

ajaxjs攔截請求

你是否有過下面的需求：需要給所有ajax請求添加統一簽名、需要統計某個接口被請求的次數、需要限制http請求的方法必須為get或post、需要分析別人網絡協議等等，那麼如何做？想想，如果能夠攔截所有ajax請求，那麼問題就會變的很簡單！

Ajax-hook源碼位址: https://github.com/wendux/Ajax-hook

如何使用

1.引入ajaxhook. 。

<script src="wendu.ajaxhook.js"></script>

ok, 我們使用jQuery(v3.1) 的get方法來測一下：

hookAjax({
//拦截回调
onreadystatechange:function(xhr){
console.log("onreadystatechange called: %O",xhr)
},
onload:function(xhr){
console.log("onload called: %O",xhr)
},
//拦截函数
open:function(arg){
console.log("open called: method:%s,url:%s,async:%s",arg[0],arg[1],arg[2])
}
})

結果 :

// get current page source code 
$.get().done(function(d){
console.log(d.substr(0,30)+"...")
})

攔截成功了！我們也可以看到jQuery3.1內部已經放棄onreadystatechange而改用onload了。

API

hookAjax(ob)

1.ob,類型是對象，key為想要攔截的回呼或函數，value為我們的攔截函數。 2.傳回值: 原始的 XMLHttpRequest。如果有寫請求不想被攔截，可以new 這個。

unHookAjax()

1.載攔截；卸載後，攔截將失效。改變ajax行為

攔截所有ajax請求，檢測請求method,如果是“GET”,則中斷請求並給出提示

> open called: method:GET,url:http://localhost:63342/Ajax-hook/demo.html,async:true
> onload called: XMLHttpRequest
> <!DOCTYPE html>
<html>
<head l...

攔截所有ajax請求，請求統一添加時間戳

hookAjax({
open:function(arg){
if(arg[0]=="GET"){
console.log("Request was aborted! method must be post! ")
return true;
}
} 
})

修改請求返回的數據「responseText」

hookAjax({
open:function(arg){
arg[1]+="?timestamp="+Date.now();
} 
})

結果:

hookAjax({
onload:function(xhr){
//请求到的数据首部添加"hook!" 
xhr.responseText="hook!"+xhr.responseText;
}
})

有了這些範例，相信開頭提到的需求都很容易實現。最後測一下unHook

hook!<!DOCTYPE html>
<html>
<h...

輸出：

hookAjax({
onreadystatechange:function(xhr){
console.log("onreadystatechange called: %O",xhr)
//return true
},
onload:function(xhr){
console.log("onload called")
xhr.responseText="hook"+xhr.responseText;
//return true;
},
open:function(arg){
console.log("open called: method:%s,url:%s,async:%s",arg[0],arg[1],arg[2])
arg[1]+="?hook_tag=1";
},
send:function(arg){
console.log("send called: %O",arg[0])
}
})
$.get().done(function(d){
console.log(d.substr(0,30)+"...")
//use original XMLHttpRequest
console.log("unhook")
unHookAjax()
$.get().done(function(d){
console.log(d.substr(0,10))
})
})

注意

1.攔截函數回傳值是一個boolean，如果為true則會阻斷ajax請求，默認為false,不會阻斷請求。

2.所有的回調攔截函數的參數為當前的XMLHttpRequest 實例，如onreadystatechange、onload；所有ajax原始方法的攔截函數會將原始參數以數組的形式傳遞給攔截函數，你可以在攔截函數中修改它。

以上所述是小編給大家介紹的JS 攔截全局ajax請求實例解析，希望對大家有所幫助，如果大家有任何疑問請給我留言，小編會及時回覆大家的。

解決攔截器對ajax請求的攔截實例詳解

Node.js伺服器環境下使用Mock.js攔截AJAX請求的教學

陳述

本文內容由網友自願投稿，版權歸原作者所有。本站不承擔相應的法律責任。如發現涉嫌抄襲或侵權的內容，請聯絡admin@php.cn

JavaScript引擎：比較實施Apr 13, 2025 am 12:05 AM

不同JavaScript引擎在解析和執行JavaScript代碼時，效果會有所不同，因為每個引擎的實現原理和優化策略各有差異。 1.詞法分析：將源碼轉換為詞法單元。 2.語法分析：生成抽象語法樹。 3.優化和編譯：通過JIT編譯器生成機器碼。 4.執行：運行機器碼。 V8引擎通過即時編譯和隱藏類優化，SpiderMonkey使用類型推斷系統，導致在相同代碼上的性能表現不同。

超越瀏覽器：現實世界中的JavaScriptApr 12, 2025 am 12:06 AM

JavaScript在現實世界中的應用包括服務器端編程、移動應用開發和物聯網控制：1.通過Node.js實現服務器端編程，適用於高並發請求處理。 2.通過ReactNative進行移動應用開發，支持跨平台部署。 3.通過Johnny-Five庫用於物聯網設備控制，適用於硬件交互。

使用Next.js（後端集成）構建多租戶SaaS應用程序Apr 11, 2025 am 08:23 AM

我使用您的日常技術工具構建了功能性的多租戶SaaS應用程序（一個Edtech應用程序），您可以做同樣的事情。首先，什麼是多租戶SaaS應用程序？多租戶SaaS應用程序可讓您從唱歌中為多個客戶提供服務

如何使用Next.js（前端集成）構建多租戶SaaS應用程序Apr 11, 2025 am 08:22 AM

本文展示了與許可證確保的後端的前端集成，並使用Next.js構建功能性Edtech SaaS應用程序。前端獲取用戶權限以控制UI的可見性並確保API要求遵守角色庫

JavaScript：探索網絡語言的多功能性Apr 11, 2025 am 12:01 AM

JavaScript是現代Web開發的核心語言，因其多樣性和靈活性而廣泛應用。 1)前端開發：通過DOM操作和現代框架（如React、Vue.js、Angular）構建動態網頁和單頁面應用。 2)服務器端開發：Node.js利用非阻塞I/O模型處理高並發和實時應用。 3)移動和桌面應用開發：通過ReactNative和Electron實現跨平台開發，提高開發效率。

JavaScript的演變：當前的趨勢和未來前景Apr 10, 2025 am 09:33 AM

JavaScript的最新趨勢包括TypeScript的崛起、現代框架和庫的流行以及WebAssembly的應用。未來前景涵蓋更強大的類型系統、服務器端JavaScript的發展、人工智能和機器學習的擴展以及物聯網和邊緣計算的潛力。

神秘的JavaScript：它的作用以及為什麼重要Apr 09, 2025 am 12:07 AM

JavaScript是現代Web開發的基石，它的主要功能包括事件驅動編程、動態內容生成和異步編程。 1)事件驅動編程允許網頁根據用戶操作動態變化。 2)動態內容生成使得頁面內容可以根據條件調整。 3)異步編程確保用戶界面不被阻塞。 JavaScript廣泛應用於網頁交互、單頁面應用和服務器端開發，極大地提升了用戶體驗和跨平台開發的靈活性。