Maison  >  Article  >  interface Web  >  Comment implémenter une longue connexion entre le serveur et le navigateur en ajax

Comment implémenter une longue connexion entre le serveur et le navigateur en ajax

php中世界最好的语言
php中世界最好的语言original
2018-04-04 17:02:551962parcourir

Cette fois, je vais vous montrer comment ajax peut réaliser une longue connexion entre le serveur et le navigateur. Quelles sont les précautions pour qu'ajax réalise une longue connexion entre le serveur et le navigateur. un cas pratique, jetons un coup d'oeil.

Parfois, le serveur doit transmettre activement des données au navigateur. Ajax est utilisé pour implémenter cette fonction. Veuillez voir ici pour plus de détails :

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

Je pense que vous l'avez maîtrisé après avoir lu. C'est le cas dans cet article. Pour des informations plus intéressantes, veuillez prêter attention aux autres articles connexes sur le site Web chinois de php !

Lecture recommandée :

FileUpload implémente le téléchargement de fichiers uniques

Méthode Ajax et form+iframe pour implémenter le téléchargement de fichiers (image et texte détaillés explication) )

Ce qui précède est le contenu détaillé de. pour plus d'informations, suivez d'autres articles connexes sur le site Web de PHP en chinois!

Déclaration:
Le contenu de cet article est volontairement contribué par les internautes et les droits d'auteur appartiennent à l'auteur original. Ce site n'assume aucune responsabilité légale correspondante. Si vous trouvez un contenu suspecté de plagiat ou de contrefaçon, veuillez contacter admin@php.cn