How to implement long connection between server and browser in ajax

This time I will show you how ajax realizes a long connection between the server and the browser. What are the precautions for ajax to realize a long connection between the server and the browser? The following is a practical case, let's take a look.

Sometimes, the server needs to actively push data to the browser. Ajax is used to implement this function. Please see here for details:

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

I believe you have mastered the method after reading the case in this article. For more exciting content, please pay attention to other related articles on the php Chinese website!

Recommended reading:

FileUpload implements single file upload

Ajax and form+iframe method to implement file upload (detailed picture and text explanation) )

The above is the detailed content of How to implement long connection between server and browser in ajax. For more information, please follow other related articles on the PHP Chinese website!