代碼筆記 | ajax實現服務器與瀏覽器長連接的功能

 
<script type="text/javascript" src="__CSS__/bootstrap-3.3.5-dist/js/bootstrap.min.js"></script>
<script type="text/javascript">
    var uid = "{$uid}";
    var i = 0;
    var timer;
    $().ready(function(){
        //打開掃碼登錄模態框
        $('#login').click(function(){
            //如果用戶已經登錄，則返回
            if(uid){ 
                return ;
            }
            //打開模態框，通過remote選項從遠程加載數據
            $('#loginModel').modal({
                remote: "{:U('user/login')}"
            });
        });
          
        //模態框隱藏之後清空數據
        $("#loginModel").on("hidden.bs.modal", function() {
            $(this).removeData("bs.modal");
        });
          
        //當模態框顯示出來後，通過定時返回來向服務器請求數據，定時器是每三秒請求一次服務器
        $('#loginModel').on('shown.bs.modal', function (e) {
            timer = setInterval(ajax_request, 3000);
        });
    });
      
    //ajax 請求函數，
    function ajax_request(){
        i++;
        //如果已經請求20此沒有請求成功，則強制結束，給出提示信息，因爲每3s調用一次，供調用20次，大概就是一分鐘的時間
        if(i > 20){
            $('.login_info1').html('<span style="color:red;">登錄超時，如需登錄請刷新頁面~</span>');
            clearInterval(timer);
            return ;
        }
          
        $.ajax({
            type: "post",
            url: "{:U('User/login_qrcode')}",
            timeout : 3000,
            data: { "scene_id": $('#scene_id').val() },
            success: function (msg){                
                if(1 == msg.status){
                    $('.login_info1').html('<span style="color:#0C9;">'+msg.info+'</span>');
                    setTimeout(refresh, 3000);
                    return ;
                }
            },
            error: function(){
            }
        });
    }
      
    //重載頁面
    function refresh(){
        location.reload();
    }
</script>