在 ajax 次调用中响应媒体查询

Question

我正在尝试使用浏览器监听调整大小事件，并在超过 < 48 rem 的阈值时，向服务器发送 "xs" => exta 小请求 header。相反，对于 > 48 rem，将发送 "sm" => small

到目前为止，想到了这个 -

if (matchMedia) {
  var mq = window.matchMedia("(max-width: 48rem)");
  mq.addListener(WidthChange);
  WidthChange(mq);
}

// media query change
function WidthChange(mq) {
  if (mq.matches) {
    // window width is less than 48rem
    (function(send) {
        XMLHttpRequest.prototype.send = function(data) {
            // in this case I'm injecting an access token (eg. accessToken) in the request headers before it gets sent
            this.setRequestHeader('x-size-token', ' ');
            this.setRequestHeader('x-size-token', "xs");
            send.call(this, data);
        };
    })(XMLHttpRequest.prototype.send);  
  } else {
    // window width is at least 48rem
     (function(send) {
        XMLHttpRequest.prototype.send = function(data) {
            // in this case I'm injecting an access token (eg. accessToken) in the request headers before it gets sent
            this.setRequestHeader('x-size-token', ' ');
            this.setRequestHeader('x-size-token', "sm");
            send.call(this, data);
        };
     })(XMLHttpRequest.prototype.send);
  }

}

这是以这种方式附加到请求 header :

sm
xs,sm
sm,xs,sm

所以基本上，不是覆盖旧的，而是附加到它。

他们的方式是只有一件事进入 requestHeader ，要么是 xs/ sm ？

编辑：

根据一些在每次调整大小事件时重新加载的建议，它确实有效，但我无法在每次调整大小事件时重新加载，因为有很多状态可能会丢失：

$(window).on('resize',function(){location.reload();});

Answer 1

下面是对我有用的东西：

function WidthChange(mq) {
      if (mq.matches) {
        // window width is less than 48rem
        $.ajaxSetup({
             headers : {
                 "x-size-token" : "xs"
             }
         }); 
      } else {
        // window width is at least 48rem
        $.ajaxSetup({
             headers : {
                 "x-size-token" : "sm"
             }
        });
      }
    }

所以我没有在 vanilla JS 中拦截 ajax 调用和设置请求 headers，而是使用 jquery ajaxSetup 为我设置 headers现在我发现即使在调整大小时没有重新加载，下一个 ajax 请求也会采用正确的值而不附加到旧值：

xs
sm
xs

在 ajax 次调用中响应媒体查询

Reacting to media query in ajax calls

javascript

ajax

jquery

media-queries