引語：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 索取)