引語：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 索取)
不要害怕今日的苦，你要相信明天，更苦！
![為JSON 資料加入斜杠 \[圖]](data:image/gif;base64,R0lGODlhAQABAIAAAP///wAAACwAAAAAAQABAAACAkQBADs=)