你的位置:首页 > Java教程

[Java教程]闲话ajax,例ajax轮询,ajax上传文件


  引语:ajax这门技术早已见怪不怪了,我本人也只是就自己真实的经验去总结一些不足道的话。供不是特别了解的朋友参考参考!

  本来早就想写一篇关于ajax的文章的,但是前段时间一直很忙,就搁置了,趁着元旦放假,赶紧补上吧!

  ajax的出现,可以出给用户带来了很好的体验,证据如下:

    1、感觉:以前要给用户呈现新的内容,就必须要刷新当前页面,结果往往是这样:用户看着看着,唰...,然后又重头看起,我那个去,这谁受得了; 自从有了ajax后,就是这样的,用户关注哪一块,变化哪一块,我们就更新那一块,完全看不出差别。

    2、时间:如果有的内容要显示出现将会是非常耗时的,如统计数据一类,按照以前,都是等待所有数据都准备完全了,半天之后,终于可以一起显示了; 自从有了ajax之后,这点耗时的东西就交给他吧,把主要的类型快速显示出来,用户完全没感觉啊!

    3、隐性错误:如果服务器发生了一些500错误,在以前,那整个网页就绝对不行了; 有了ajax后,如果仅是ajax部分错误,对其他地方将完全无影响,但是你最好尽快修复好错误!

  ajax的意义大概就在于这些吧,具体的应用场景根据情况而定,应用好ajax技术,给用户一个更好的体验!

  下面是本文分享的两个点,ajax轮询,ajax上传文件(因为这两个看起来稍微有点意义):

    1、ajax轮询

      ajax作为异步和服务器交互,作轮询,不停接收服务器内容是个不错的选择,用于做一些简单的消息通知,定时刷新局部信息都有着不错的功效!

    2、ajax上传文件,这里,主要用到两个插件,jquery.validate.js, jquery.form.js, 用到表单验证只是为了正常场景下一些操作以及自己不设置提交项,jquery.form.js则是一个可异步的表单提交插件,主要使用方法为 ajaxSubmit. 代码如下:

<!doctype html><html lang="en"><head>  <meta charset="UTF-8">  <title>Ajax---轮询--上传文件举例</title>  <script src='./js/jquery-1.11.2.min.js'></script>  <script src='./js/tools.js'></script>  <script>    $(function(){      var msgContainer = '#msg-container';      var setStop = 0;      $("#btn").on("click", {btn: $("#btn")}, function(ev){        $.ajax({          type: "POST",          dataType: "json",          url: "poll.php",        //设置请求地址          timeout: 80000,         //ajax请求超时时间80秒          data: {time: "20"},       //20秒后无论结果服务器都返回数据          success: function(data, textStatus){            //从服务器得到数据,显示数据并继续查询            if(data.success == "1"){              $(msgContainer).html($(msgContainer).val() + "\r\n[有数据]" + data.text);            }            //未从服务器得到数据,继续查询            if(data.success == "0"){              $(msgContainer).html($(msgContainer).val() + "\r\n[无数据]");            }          },          //Ajax请求超时,继续查询          error: function(if(textStatus == "timeout"){              $(msgContainer).html($(msgContainer).val() + "\r\n[超时]");            }          },          complete: function(if($(msgContainer).html().length > 100){              $(msgContainer).html('清空');            }            if(!setStop){              ev.data.btn.click();            }          }        });      });      $('#stop-query').on('click', function(){        setStop = 1;      });      //表单验证      $('#Form1').validate({        errorClass : 'color-red',  //设置错误的class        rules : { //规则          cate_name : {required:true},          sort : { digits:true }        },        messages : {//提示内容          cate_name : {required:'&nbsp;&nbsp;*分类名必填'},          sort : {digits:"&nbsp;&nbsp;排序必须是正整数"}        },        submitHandler : function(form){submitForm(form);}      });    });    //表单ajax提交, fn为提交成功后要执行的回调函数,没有则刷新当前页面    function submitForm(form, fn){      $(form).ajaxSubmit({        success : function(response, statusText){          if(response.status==1){            var info = response.info ? response.info : '提交成功...';            alert(info);            setTimeout(function(){              if(typeof(fn) === 'function'){fn(response);}else{window.location.reload(true);}            },1);          }else{            console.log('提交失败')          }        },        beforeSubmit : function (formData, jqForm, options) {          console.log('数据提交中...');        },        complete: function(data){          console.log(data);        }      });    }  </script>  <style>    html,body{margin: 0; height: 100%;}    .wrap{width: 50%; margin: 0 auto;background: #048E6A; height: 100%;text-align: center; position: relative;}    .container{padding: 20px; line-height: 40px;}    .container.with-back{background: #46ff50;}    .ext-container ul{width: 100%; margin: 0; padding: 0;}    ul li{list-style-type: none;}    .ext-container ul li{background: #F38A66; padding: 3px;}    .ext-container ul li:hover{background: #3E9054;}    .ext-container ul.list li a{text-decoration: none; color: #ffffff;display: block;}  </style></head><body><div class="wrap">  <div class="ext-container">    <ul class="list">      <li><a href="javascript:;">ajax上传文件</a></li>    </ul>  </div>  <div class="container">    <input id="btn" type="button" value="点击轮询测试开始" />    <input type="button" id="stop-query" value="点击停止" />    <div id="msg">      <textarea name="msg" id="msg-container" cols="30" rows="10"></textarea>    </div>  </div>  <div class="container with-back">    <div>上传文件--测试</div>    <form action="tmp.php" id="Form1" method="post" enctype="multipart/form-data" >      <div>        <input type="file" name="fileTest" id="file-test" />        <input type="submit" value="上传了" id="submit-form" />      </div>    </form>  </div></div></body></html>    

  后台代码示例,poll.php,轮询:

<?php
if(empty($_POST['time']))exit(); set_time_limit(0);//无限请求超时时间 $i=0; while (true){ usleep(500000);//0.5秒 $i++; //若得到数据则马上返回数据给客服端,并结束本次请求 $rand=rand(1,999); if($rand <= 300){ $arr=array('success'=>"1",'name'=>'xiaocai','text'=>$rand); echo json_encode($arr); exit(); } //服务器($_POST['time']*0.5)秒后告诉客服端无数据 if($i == $_POST['time']){ $arr=array( 'success' => "0", 'name' => 'hi', 'text' => $rand ); echo json_encode($arr); exit(); } }

  后台代码示例2,tmp.php,上传文件:

<?php  var_dump($_FILES);      //仅打印出结果测试即可

  借助于这些插件,开发是如此的简单!

  注:当用第三方插件时,也最好是自己处理ajax请求,因为这样你会更方便地处理各种响应,而不是ajax就仅仅是一个ajax,因为这样的体验也是完全不够的!(听说extjs挺好的,有机会也可以去用用)

  要做就要做到最好!(tools.js 是jquery.validate.js, jquery.form.js的一起压缩的文件,有需要的请@me 索取)