闲话ajax，例ajax轮询，ajax上传文件[开发篇]
引语：ajax这门技术早已见怪不怪了，我本人也只是就自己真实的经验去总结一些不足道的话。供不是特别了解的朋友参考参考！
本来早就想写一篇关于ajax的文章的，但是前段时间一直很忙，就搁置了，趁着元旦放假，赶紧补上吧！
ajax的出现，可以出给用户带来了很好的体验，证据如下：
1、感觉：以前要给用户呈现新的内容，就必须要刷新当前页面，结果往往是这样:用户看着看着，唰...，然后又重头看起，我勒个去，这谁受得了; 自从有了ajax后，就是这样的，用户关注哪一块，变化哪一块，我们就更新那一块，完全看不出差别。
2、时间：如果有的内容要显示出现将会是非常耗时的，如统计数据一类，按照以前，都是等待所有数据都准备完全了，半天之后，终于可以一起显示了; 自从有了ajax之后，这点耗时的东西就交给他吧，把主要的类型快速显示出来，用户完全没感觉啊！
3、隐性错误：如果服务器发生了一些500错误，在以前，那整个网页就绝对不行了; 有了ajax后，如果仅是ajax部分错误，对其他地方将完全无影响，但是你最好尽快修复好错误！
ajax的意义大概就在于这些吧，具体的应用场景根据情况而定，应用好ajax技术，给用户一个极致的体验！
下面是本文分享的两个点，ajax轮询，ajax上传文件(因为这两个看起来稍微有点意义):
1、ajax轮询
ajax作为异步和服务器交互，作轮询，不停接收服务器内容是个不错的选择，用于做一些简单的消息通知，定时刷新局部信息都有着不错的功效！
2、ajax上传文件
每每说到上传文件，都是头疼的事，因为为考虑到服务器安全，要求必须使用表单进行同步提交。而现有的包括本文描述的所谓异步上传文件，也只是换了一种用户看不到的form表单提交方式而已（如：提交到一个隐藏的iframe中）。不过不管怎么样，能实现效果就行。咱们要的，是结果，不是过程！
这里，主要用到两个插件，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(XMLHttpRequest,textStatus,errorThrown){ if(textStatus == "timeout"){ $(msgContainer).html($(msgContainer).val() + "\r\n[超时]"); } }, complete: function(XMLHttpRequest, textStatus){ 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:' *分类名必填'}, sort : {digits:" 排序必须是正整数"} }, 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'=>'xbingi', '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); //仅打印出结果测试即可，你可以做更多
借助于这些插件，开发是如此的简单！
注：当用第三方插件时(如bootstrap)，它可以帮你实现ajax功能，但是也最好是自己处理ajax请求，因为这样你会更方便地处理各种响应，而不是ajax就仅仅是一个ajax，因为这样的体验也是完全不够的！(听说extjs挺好的，有机会也可以去用用)
要做就要做到最好！(tools.js 是jquery.validate.js, jquery.form.js的一起压缩的文件，有需要的请@me 索取)