根據客戶端訪問URL的次數從服務器提供不同的JS文件？

我有一個web應用程序，它使用jQuery AJAX GET請求從我的服務器注入一個基於myjavascriptfile.js文件的服務器。目前，每次客戶訪問https://www.google.co.uk時都會調用此GET請求。根據客戶端訪問URL的次數從服務器提供不同的JS文件？

但是我希望能夠發送mysecondjavascriptfile.js文件到客戶端，如果客戶端已經多到https://www.google.co.uk 10倍。

你有什麼辦法可以做到這一點嗎？

來源

2015-11-19 PickMeUpLittle

你首先需要一個跟蹤機制。探索用於計算訪問次數的Cookie。然後將該cookie值包含在請求中的某個標頭中。那麼服務器端很容易。 – Brant

謝謝！你能否簡單地解釋一下cookie如何讓我知道頁面是否被訪問了10次？我認爲它不會創建10個人的Cookie？ – PickMeUpLittle

第一次訪問時，document.cookie（'visits = 1'）;每次有人訪問您的網站時，請檢查該cookie的實例，如果存在，請進行閱讀並做另一項分配，將其增加1。 – Brant

首先要做的，就是堅持客戶端到站點的命中。我認爲SessionStorage可以幫助在這裏：

sessionStorage.counter = ++(sessionStorage.counter) || 0; 

var sources = { 
    lessThanTen : 'http://yourscript.com/lessthan10hits.js', 
    moreThanTen : 'http://yourscript.com/morethan10hits.js' 
} 
var script = document.createElement('script'); 

if(sessionStorage.counter >= 10){ 
    script.src = sources.moreThanTen; 
} else { 
    script.src = sources.lessThanTen; 
} 

document.getElementsByTagName('head')[0].appendChild(script);

這當然是命中的客戶端驗證。您可以通過AJAX實現服務器端驗證，或者在10次請求後提供略微不同的HTML標記。你需要使用會話（或者簡單的cookie）來將它們保存在服務器端。

AJAX驗證：

var xhr = new XMLHttpRequest(); 
xhr.addEventListener('load', function(){ 
    var script = document.createElement('script'); 
    script.src = xhr.response; 
    document.getElementsByTagName('head')[0].appendChild(script); 
}); 
xhr.open('POST', 'http://www.urltocheckhits.com/hits'); 
xhr.send('url=' + encodeURIComponent(window.location.hostname));

然後從Node.js的（與身體解析器和表達會話）：

var sources = { 
    lessThanTen : 'http://yourscript.com/lessthan10hits.js', 
    moreThanTen : 'http://yourscript.com/morethan10hits.js' 
} 
app.post('/hits', urlEncoded, function(req, res){ 
    if(req.body){ 
     var url = req.body.url; 
     if(!req.session.views){ 
      req.session.views = { }; 
     } 
     if(req.session.views[url]){ 
      req.session.views[url]++; 
     } else { 
      req.session.views[url] = 1; 
     } 

     if(req.session.views[url] > 10){ 
      res.send(sources.moreThanTen); 
     } else { 
      res.send(sources.lessThanTen); 
     } 
    } 
});

我建議你檢查express-session和body-parser的文檔。

請注意，您需要爲此添加CORS頭（您可以使用JSONP輕鬆完成，而不是使用XHR）。

如果您只是提供JS文件而不是執行AJAX調用，然後包括返回的腳本，可能會更容易。所以，那麼你可以只：

<script src="http://onesingleurl.com/hits">

緩存的行爲怪異這樣的，所以這就是爲什麼我喜歡的另一種方法。

來源

2015-11-19 16:18:03 MinusFour

謝謝，非常有幫助。我熱衷於保持服務器端的東西。服務器端驗證會是什麼樣子？ – PickMeUpLittle

這取決於你在服務器端使用什麼。 – MinusFour

我正在使用一個簡單的node.js與快遞:) – PickMeUpLittle

根據客戶端訪問URL的次數從服務器提供不同的JS文件？

回答

相關問題