背景：知識在不斷的更新，學習新的技術是非常有必要的，這樣才能推陳出新，適應整個軟件界的發展。使得用戶的體驗度越來越高，更好的為人民服務。Ajax技術在一定的程度上能帶來更好的用戶體驗。
### 一、Ajax
Ajax，是 Asynchronous?JavaScript + XML（異步JavaScript和XML）的簡寫。這種技術能夠想服務器請求額外的數據而無須卸載頁面(即刷新)，會帶來更好的用戶體驗。
Ajax 的核心是 JavaScript 對象 XMLHttpRequest。該對象在 Internet Explorer 5 中首次引入，它是一種支持異步請求的技術。簡而言之，XMLHttpRequest使您可以使用 JavaScript 向服務器提出請求并處理響應，而不阻塞用戶。
AJAX不是一種新的編程語言，而是一種用于創建更好更快以及交互性更強的Web應用程序的技術。
### 二、GET請求與POST請求
GET請求
GET請求是最常見的請求類型，最常用于向服務器查詢某些信息。必要時，可以將查詢字符串參數追加到 URL的末尾，以便提交給服務器。
通過URL后的問號給服務器傳遞鍵值對數據，服務器接收到返回響應數據。特殊字符傳參產生的問題可以使用 encodeURIComponent()進行編碼處理，中文字符的返回及傳參，可以講頁面保存和設置為 utf-8格式即可。
~~~
//一個通用的 URL提交函數
function addURLParam(url, name, value) {
url += (url.indexOf('?') == -1 ? '?' : '&'); //判斷的 url是否有已有參數
url += encodeURIComponent(name) + '=' + encodeURIComponent(value);
alert(url);
return url;
}
~~~
PS：當沒有 encodeURIComponent()方法時，在一些特殊字符比如“ &”，會出現錯誤導致無法獲取。
POST請求
POST請求可以包含非常多的數據，我們在使用表單提交的時候，很多就是使用的 POST傳輸方式。
而發送 POST請求的數據，不會跟在 URL的尾巴上，而是通過 send()方法向服務器提交數據。
一般來說， 向服務器發送 POST請求由于解析機制的原因， 需要進行特別的處理。 因為POST請求和 Web表單提交是不同的，需要使用 XHR來模仿表單提交。
~~~
xhr.setRequestHeader('Content-Type', 'application/x-www-form-urlencoded');
~~~
GET請求與POST請求比較
從性能上來講 POST請求比 GET請求消耗更多一些， 用相同數據比較， GET最多比 POST快兩倍。上一篇[《【JavaScript】（6）——JavaScript與XPath、JSON交互》](http://blog.csdn.net/helijie92902/article/details/50196345)中的的JSON也可以使用 Ajax來回調訪問。**
~~~
var url = 'demo.json?rand=' + Math.random();
var box = JSON.parse(xhr.responseText);
~~~
### 三、JavaScript與Ajax
因為 Ajax使用起來比較麻煩，主要就是參數問題，比如到底使用 GET還是 POST；到底是使用同步還是異步等等，我們需要用JavaScript封裝一個Ajax函數，來方便我們調用。
~~~
//封裝Ajax
function ajax(obj) {
var xhr = new createXHR();
obj.url = obj.url + '?rand=' + Math.random();
obj.data = params(obj.data);
if (obj.method === 'get') obj.url = obj.url.indexOf('?') == -1 ?
obj.url + '?' + obj.data : obj.url + '&' + obj.data;
if (obj.async === true) {
xhr.onreadystatechange = function () {
if(xhr.readyState==4)callback();
};
}
xhr.open(obj.method,obj.url,obj.async);
if(obj.method==='post'){
xhr.setRequestHeader('Content-Type','application/x-www-form-urlencoded');
xhr.send(obj.data);
}else{
xhr.send(null);
}
if(obj.async===false){
callback();
}
function callback(){
if(xhr.status==200){
obj.success(xhr.responseText); //回調
}else{
alert('數據返回失敗！狀態代碼： '+xhr.status+'，狀態信息： '+xhr.statusText);
}
}
}
//調用ajax
addEvent(document,'click',function(){ //IE6需要重寫addEvent
ajax({
method:'get',
url:'demo.php',
data:{
'name':'Lee',
'age':100
},
success:function(text){
alert(text);
},
async:true
});
});
//名值對編碼
function params(data){
var arr=[];
for(var i in data){
arr.push(encodeURIComponent(i)+'='+encodeURIComponent(data[i]));
}
return arr.join('&');
}
~~~
### 四、學習心得
1、即使再好的工具也有它的缺點，但是可以借助外界的力量讓自己變得更加完美。人生就像一張心電圖，只有高低起伏才代表活著，而成了平線之后，就代表死亡了。所以只有起起伏伏的人生才是完整的人生。
2、封裝 Ajax并不是一開始就形成以上的形態，需要經過多次變化而成。調試錯誤也是一樣的，很多錯誤并不是一下子就能調出來的，多試試，不同的方法有著不一樣的收獲。
