在每个http请求之前执行javascript操作

时间:2018-06-20 18:57:28

标签: javascript html request

是否可以在单击a-href标记后发送的每个http请求之前执行操作?我也想在每个引用的http请求(例如DOM中对图像/脚本的请求)之前执行操作。谢谢!

1 个答案:

答案 0 :(得分:1)

可以为每个HTTP ajax请求实现。

注意:示例中的虚拟请求是向HTTP Bin发送的。

JAVASCRIPT

参考文献:JS XMLHttpRequest

(function init()
{
    XMLHttpRequest.prototype._open = XMLHttpRequest.prototype.open;
    XMLHttpRequest.prototype.open = function(method, url, async, user, password){
        initialChanges();
        this._open(method, url, async, user, password);
    };
})();

function initialChanges()
{
    alert("Making a Javascript ajax request.");
}

function makeRequestViaXHR()
{
    var req = new XMLHttpRequest();
    req.open("GET","https://httpbin.org/get",false,null,null);
    req.onreadystatechange=function(){
        if(req.readyState === 4)
        {
            if(req.status === 200)
            {
                console.log(req.responseText);
            }
            else
            {
                console.log("Request Failed");
            }
        }
    };
    req.send();
}
<button onclick="makeRequestViaXHR()">Make a dummy ajax request via Javascript</button>

JQUERY

参考文献:jQuery ajaxjQuery .ajaxSend

(function init()
{
    $(document).ajaxSend(function(event,xhr,settings){
        alert("Making a jQuery ajax request.");
    });
})();

function makeRequestViaJquery()
{
    $.ajax({
        url:"https://httpbin.org/get",
        method:"GET",
        async:true,
        success:function(response){
            console.log(response);
        },
        error:function(error){
            console.log(error);
        }
    });
}
<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>

<button onclick="makeRequestViaJquery()">Make a dummy ajax request via jQuery</button>

在导航到其他页面,通过<a>标签下载文件或邮件地址的情况下,请使用addEventListener单击以执行该方法。

参考文献:HTML Element Subinterfaces

document.addEventListener("click", function(event){
    var elem = event.target;
    if(elem instanceof HTMLAnchorElement) //For <a> tag
    {
        executeThis();
    }
});

function executeThis()
{
    alert("Element is clicked");
}
<a href="https://httpbin.org/get">Click this anchor element</a>
<a href="https://dummyimage.com/300" download="image.png">Download Image</a>

仅在加载DOM之后才执行脚本。如果在加载图像之前需要执行某些功能,则需要在每个script元素之前添加带有img标签的方法。 Refer this了解更多信息。