精华内容
下载资源
问答
  • Ajax-hook拦截所有的Ajax请求

    千次阅读 2018-11-14 23:57:39
    在解决同一个浏览器登录多个账户,解决sesson覆盖问题的时候,我想到的办法是为每一个用户的session...这样,我需要给所有的ajax请求带上这个accessToken,有没有简单的办法,有的,Ajax-hook可以做到。 Ajax-hook...

    在解决同一个浏览器登录多个账户,解决sesson覆盖问题的时候,我想到的办法是为每一个用户的session定义唯一的key,例如“sessionUser”+accessToken.

    accessToken是登录校验成功后,生成的唯一字符串,你可以使用UUID策略。这样,我需要给所有的ajax请求带上这个accessToken,有没有简单的办法,有的,Ajax-hook可以做到。

    Ajax-hook使用场景:需要给所有ajax请求添加统一签名、需要统计某个接口被请求的次数、需要限制http请求的方法必须为get或post、需要分析别人网络协议等等。

    Ajax-hook开源地址

    /** 
     * intercept ajax request
     * */
    !function (ob) {
        ob.hookAjax = function (funs) {
            window._ahrealxhr = window._ahrealxhr || XMLHttpRequest
            XMLHttpRequest = function () {
                this.xhr = new window._ahrealxhr;
                for (var attr in this.xhr) {
                    var type = "";
                    try {
                        type = typeof this.xhr[attr]
                    } catch (e) {}
                    if (type === "function") {
                        this[attr] = hookfun(attr);
                    } else {
                        Object.defineProperty(this, attr, {
                            get: getFactory(attr),
                            set: setFactory(attr)
                        })
                    }
                }
            }
    
            function getFactory(attr) {
                return function () {
                    return this.hasOwnProperty(attr + "_")?this[attr + "_"]:this.xhr[attr];
                }
            }
    
            function setFactory(attr) {
                return function (f) {
                    var xhr = this.xhr;
                    var that = this;
                    if (attr.indexOf("on") != 0) {
                        this[attr + "_"] = f;
                        return;
                    }
                    if (funs[attr]) {
                        xhr[attr] = function () {
                            funs[attr](that) || f.apply(xhr, arguments);
                        }
                    } else {
                        xhr[attr] = f;
                    }
                }
            }
    
            function hookfun(fun) {
                return function () {
                    var args = [].slice.call(arguments)
                    if (funs[fun] && funs[fun].call(this, args, this.xhr)) {
                        return;
                    }
                    return this.xhr[fun].apply(this.xhr, args);
                }
            }
            return window._ahrealxhr;
        }
        ob.unHookAjax = function () {
            if (window._ahrealxhr)  XMLHttpRequest = window._ahrealxhr;
            window._ahrealxhr = undefined;
        }
    }(window);
    

    使用方法:

    hookAjax({
    	onload:function(xhr) {
    		
    	},
    	open:function(arg){
    	    if (arg[1].indexOf('?') != -1) {
    	        arg[1]+="&accessToken="+$("#accessToken").val();
    	    }else {
    	        arg[1]+="?accessToken="+$("#accessToken").val();
    	    }
    	}
    
    });
    
    展开全文
  • var open = window.XMLHttpRequest.prototype....所有ajax请求在发送处理之前可以截到,但是异步请求拦截不到返回来数据,它直接进了ajaxsuccess。感觉是没有触发onstatechange,请问大家我该如何处理?谢谢。
  • 技术交流QQ群【JAVA,C++,Python,.NET,BigData,AI】:170933152 在用若依系统的时候发现,自己再...所有的ajax请求,都会走这个地方,可以在这里做一些拦截. 比如:下面这里,可以给 为所有 AJAX 请求设置默认 URL 和 ...

    技术交流QQ群【JAVA,C++,Python,.NET,BigData,AI】:170933152  

    在用若依系统的时候发现,自己再ajax请求的地方,错误的时候已经提示了信息,但是

    还会有错误提示,这里是因为若依底层,自己用ajaxsetup又拦截了一下

    所有的ajax请求,都会走这个地方,可以在这里做一些拦截.

    比如:下面这里,可以给

    为所有 AJAX 请求设置默认 URL 和 success 函数:

    <!DOCTYPE html>
    <html>
    <head>
    <meta charset="utf-8">
    <title>菜鸟教程(runoob.com)</title>
    <script src="https://cdn.staticfile.org/jquery/1.10.2/jquery.min.js">
    </script>
    <script>
    $(document).ready(function(){
        $("button").click(function(){
            $.ajaxSetup({
                url:"demo_ajax_load.txt",
                success:function(result){
                    $("div").html(result);
                }
            });
            $.ajax();
        });
    });
    </script>
    </head>
    <body>

    <div><h2>使用 AJAX 修改文本内容</h2></div>
    <button>修改内容</button>

    </body>
    </html>

     

    展开全文
  • 但是,如果你没有使用这些网络库,又或是你并不是网页开发者,而你需要分析某个网页所有Ajax请求,又或是你是一个应用开发者,你webview中需要拦截所有网页网络请求(网页并不是你开发)…… 这种时候,你...
  • jQuery - 拦截所有Ajax请求(统一处理超时、返回结果、错误状态码 ) 前言 通过 jQuery 提供的 ajaxSetup 方法,我们可以拦截页面上所有的 Ajax 请求响应(包括 .ajax、.ajax、.ajax、.post、$.get)。这样我们可以...

    jQuery - 拦截所有Ajax请求(统一处理超时、返回结果、错误状态码 )

    前言

    通过 jQuery 提供的 ajaxSetup 方法,我们可以拦截页面上所有的 Ajax 请求响应(包括 .ajax.ajax、.post、$.get)。这样我们可以对这些 Ajax 请求响应做统一的处理。比如判断 sesion 是否失效,失效的话就跳转到登录页。下面通过几个样例进行演示。
    原文出自:www.hangge.com
    转载请保留原文链接:http://www.hangge.com/blog/cache/detail_1412.html

    一、统一处理返回结果

    1. 后台返回数据样例

      比如后台返回如下格式的 JSON 数据,包括正常情况和异常情况。

        //正常数据返回
        {"state":1, "msg":"", "data":"欢迎访问hangge.com"}
         
        //session超时数据返回
        {"state":-1, "msg":"session超时,请重新登录!"}
         
        //异常情况数据返回
        {"state":0, "msg":"服务器繁忙,请稍后再试。"}
    
    1. 前台处理样例
        //全局的ajax访问,处理ajax清求时异常
        $.ajaxSetup({
           contentType:"application/x-www-form-urlencoded;charset=utf-8",
           complete:function(XMLHttpRequest,textStatus){
              //通过XMLHttpRequest取得响应结果
              var res = XMLHttpRequest.responseText;
              try{
                var jsonData = JSON.parse(res);
                if(jsonData.state == -1){
                  //如果超时就处理 ,指定要跳转的页面(比如登陆页)
                  alert(jsonData.msg);
                  window.location.replace("/login/index.php");
                }else if(jsonData.state == 0){
                  //其他的异常情况,给个提示。
                  alert(jsonData.msg);
                }else{
                  //正常情况就不统一处理了
                }
              }catch(e){
              }
            }
         });
         
        //获取数据
        function getContent() {
          $.get("content.php", function (data){
              var jsonData = JSON.parse(data);
              //只处理正常的情况
              if(jsonData.state == 1){
                alert(jsonData.data);
              }
           });
        }
    

    二、统一处理异常的HTTP状态码

           我们还可以通过 Ajax 拦截,根据异常的 HTTP 状态码(404、500等)统一处理各种请求错误、服务器错误等情况。

    $.ajaxSetup({
       contentType:"application/x-www-form-urlencoded;charset=utf-8",
       complete:function(XMLHttpRequest,textStatus){
       },
       statusCode: {
         404: function() {
             alert('数据获取/输入失败,没有此服务。404');
         },
         504: function() {
             alert('数据获取/输入失败,服务器没有响应。504');
         },
         500: function() {
             alert('服务器有误。500');
         }
       }
    });
    
    展开全文
  • 想想,如果能够拦截所有ajax请求,那么问题就会变很简单!:grinning_face_with_smiling_eyes:,少年,想法有点大胆,不过,我欣赏!直接上轮子,Ajax-hook不仅可以满足你想要,同时可以给你更多。 Ajax-hook源码...
  • js拦截全局ajax请求

    2018-04-19 13:57:00
    你是否有过下面需求:需要给所有ajax请求添加统一签名、需要统计某个接口被请求次数、需要限制http请求方法必须为get或post、需要分析别人网络协议...想想,如果能够拦截所有ajax请求,那么问题就会变很简单!

    你是否有过下面的需求:需要给所有ajax请求添加统一签名、需要统计某个接口被请求的次数、需要限制http请求的方法必须为get或post、需要分析别人网络协议等等,那么如何做?想想,如果能够拦截所有ajax请求,那么问题就会变的很简单!?,少年,想法有点大胆,不过,我欣赏!直接上轮子,Ajax-hook不仅可以满足你想要的,同时可以给你更多。

    本博客原始地址:www.jianshu.com/p/9b634f1c9…
    Ajax-hook源码地址 : github.com/wendux/Ajax… 欢迎star

    注:本文为作者之前在简书博客发布的文章,掘金原创权限刚开,复制过来,如果您之前看过,跳过吧!

    如何使用

    ###一. 直接引入脚本

    1. 引入ajaxhook.js

      <script src="wendu.ajaxhook.js"></script>
    2. 拦截需要的ajax 回调或函数。

      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])
          }
      })

    ok, 我们使用jQuery(v3.1) 的get方法来测一下:

    // get current page source code 
    $.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
    > <!DOCTYPE html>
      <html>
      <head l...

    拦截成功了! 我们也可以看到jQuery3.1内部已经放弃onreadystatechange而改用onload了。

    ###二. CommonJs下的模块构建工具环境中

    假设在webpack下,第一步, 安装ajax-hook npm插件

    npm install ajax-hook --save-dev

    第二步,引入模块并调用api:

    const ah=require("ajax-hook")
    ah.hookAjax({ 
      onreadystatechange:function(xhr){ ... },
      onload:function(xhr){ ... }, 
      ...
    })
    ...
    ah.unHookAjax()

    API

    hookAjax(ob)

    • ob,类型是对象,key为想要拦截的回调或函数,value为我们的拦截函数。
    • 返回值: 原始的 XMLHttpRequest。如果有写请求不想被拦截,可以new 这个。

    unHookAjax()

    • 卸载拦截;卸载后,拦截将失效。

    改变ajax行为

    拦截所有ajax请求,检测请求method,如果是“GET”,则中断请求并给出提示

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

    拦截所有ajax请求,请求统一添加时间戳

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

    修改请求返回的数据“responseText”

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

    结果:

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

    有了这些示例,相信开篇提到的需求都很容易实现。最后测一下unHook

       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))
            })
    
        })

    输出:

    open called: method:GET,url:http://localhost:63342/Ajax-hook/demo.html,async:true
    send called: null
    onload called
    hook<!DOCTYPE html>
    <html>
    <he...
    unhook
    <!DOCTYPE

    注意

    1. 拦截函数返回值是一个boolean,如果为true则会阻断ajax请求,默认为false,不会阻断请求。
    2. 所有的回调拦截函数的参数为当前的XMLHttpRequest 实例,如onreadystatechange、onload;所有ajax原始方法的拦截函数会将原始参数以数组的形式传递给拦截函数,你可以在拦截函数中修改它。

    作者:wendux
    链接:https://juejin.im/post/58c91dff2f301e007e31afac
    来源:掘金
    著作权归作者所有。商业转载请联系作者获得授权,非商业转载请注明出处。
    展开全文
  • js 拦截全局 ajax 请求

    2017-03-15 21:32:00
    你是否有过下面需求:需要给所有ajax请求添加统一签名、需要统计某个接口被请求次数、需要限制http请求方法必须为get或post、需要分析别人网络协议...想想,如果能够拦截所有ajax请求,那么问题就会变很简单!
  • Fly拦截全局Ajax请求

    千次阅读 2017-11-01 13:15:46
    但是,如果你没有使用这些网络库,又或是你并不是网页开发者,而你需要分析某个网页所有Ajax请求,又或是你是一个应用开发者,你webview中需要拦截所有网页网络请求(网页并不是你开发)…… 这种时候,你...
  • Js 拦截全局ajax请求

    2017-11-28 19:24:27
    你是否有过下面需求:需要给所有ajax请求添加...想想,如果能够拦截所有ajax请求,那么问题就会变很简单!?,少年,想法有点大胆,不过,我欣赏!直接上轮子,Ajax-hook不仅可以满足你想要,同时可以给你更...
  • 需要把所有ajax请求header取出来 所以写了如下代码 chrome测试通过 &lt;!DOCTYPE html&gt; &lt;html lang="en"&gt; &lt;head&gt; &lt;meta charset="UTF-8&...
  • Android Webview虽然提供了页面加载及资源请求的钩子,但是对于h5的ajax请求并没有提供干涉的接口,这意味着我们不能在webview中干涉javascript发起的http请求,而有时候我们确实需要能够截获ajax请求并实现一些功能...
  • js拦截所有jquery的ajax异步请求,设置全局配置或者其他操作   解决方法: 实现了post,get等方法的拦截并设置了一些全局配置,就不用每一个请求都设置,beforeSend方法说明请求ajax前会执行beforeSend配置的...
  • ==================js 拦截全局 ajax 请求你是否有过下面需求:需要给所有ajax请求添加统一签名、需要统计某个接口被请求次数、需要限制http请求...想想,如果能够拦截所有ajax请求,那么问题就会变很简单!
  • 但是,如果你没有使用这些网络库,又或是你并不是网页开发者,而你需要分析某个网页所有Ajax请求,又或是你是一个应用开发者,你webview中需要拦截所有网页网络请求(网页并不是你开发)...... 这种时候,...
  • 我想要在页面的所有ajax请求发出去之前和数据返回到页面上之前做一次拦截, 在发出去之前对请求参数做处理再发送,数据回来后对返回数据做处理再返回。 我用XMLHttpRequest谢了一段js代码做拦截,在发出去之前都没有...
  • 之前尝试方法是在拦截器中返回一个标识给ajax,然后再在每一个ajax请求成功之后根据标识“isNotLogin”进行页面跳转,但是这样也很麻烦,每一个ajax请求之后,都需要写一句if(returnStr=="isNotLogin"){ window....
  • 项目使用ssm作为后台框架,...1.定义一个filter,拦截所有的请求。 package com.acat.filter; import javax.servlet.*; import javax.servlet.http.HttpServletRequest; import javax.servlet.http.HttpServletResp...
  • 接到这样一个需求,需要在 WebView 的所有网络请求中,在请求的url中,加上一个sign=xxxx 标志位,同时添加手机本地数据比如 sessionToken=sd54f5sd4ffsdf45454564 、deviceId=863970025919887 例如 ...
  • 背景是项目中使用Spring Security 进行安全控制 再使用Ajax的时候会报 403(ajax get 方式是没问题 post 时候会报) ...(这里要说是用是thymeleaf模板 所有才会有 th:如果是jsp话使用EL表达...
  • /** * session拦截器 */ public class SessionInterceptor implements HandlerInterceptor{ ... * @return true:执行下一个拦截器,直到所有拦截器都执行完,再执行被拦截的Controller * false:从...
  • 自定义shiro实现识别ajax请求的拒绝返回json,还是普通返回页面 在写后端时候加入了Shiro做登录认证和会话超时管理,前端页面访问重定向没有问题,但是Ajax访问接口时,如果会话超时,则只会返回一个页面,但是...
  • 一种拦截AJAX数据方法

    千次阅读 2017-02-20 17:10:50
    一个实际运营中的产品,突然遇到了这样的展示需求:在前端拦截所有的AJAX请求,将其中的XXX电力局字样全部改为XXX水利局字样。首先想到的是利用jQuery的全局AJAX方法,但检索了一遍.ajaxComplete、.ajaxComplete、....
  • 接下来的拦截器将拦截所有的ajax调用,并在任何api请求未决时显示加载图标。 先决条件 以下代码只能在angularJs 1. *项目中使用。 该代码与ES6兼容 项目应该有 为了显示错误模态,我们使用BootStrap模态。 代码...

空空如也

空空如也

1 2 3 4 5 ... 11
收藏数 219
精华内容 87
关键字:

拦截所有的ajax请求