首先我們要明白ajax的原理和使用步驟

ajax是我們與後臺連線使用的一個文件，主要分為四步，有三步是我們前端工作人員去完成的，

第一步是建立ajax的物件，第二部是傳送請求到後臺，第三步是後臺所編寫的資料，第四步是我們收到後臺返回資料的處理，第四步返回的格式經常的有xml和json還有字串；

封裝ajax的函式是為了我們以後工作方便使用，以後直接呼叫就可以的了；

主要有四個引數，(‘get或post’，‘後臺做連線的檔案路徑’，send()資料，第四步接受後臺返回的值函式)

首先是第一步建立物件，

1. if(window.XMLHttpRequest){
2. xhr=newXMLHttpRequest
   (); 這步是做ie7及以上的相容
3. }
4. else{
5. xhr=newActiveXObject('Microsoft.XMLHTTP'); 這步是做ie6的相容
6. }

1. if(method=='GET'&& data){
2. //如果是get方式，並且有data：傳資料到伺服器
3. url=url+'?'+data;
4. 傳送方式有兩種，‘get'和'post'
5. } 如果用get方式傳送就不用send（）資料，如果用psot方式傳送就需要send()資料
6. xhr.open(method,url,true);
7. if(method=='GET'){
8. xhr.send
   (null);
9. }
10. else{
11. xhr.setRequestHeader('Content-Type','application/x-www-form-urlencoded');
12. xhr.send(data);
13. }
14. 最後是第四步；接受後臺返回的值；
15. 1. xhr.onreadystatechange=function(){
    2. if(xhr.readyState==4){
    3. if(xhr.status==200){
    4. if(fnsuccess){
    5. fnsuccess(xhr.responseText);//注意這裡只能接收字串，json和html資料。如果傳過來的是xml資料格式，要換用responseXML屬性
    6. }
    7. }
    8. else{
    9. alert('出差了，出錯狀態是：'+xhr.status);
    10. }
    11. }
    封成函式為；
16. 1. function ajax(method,url,data,fnsuccess){
    2. //1號線：建立ajax物件
    3. var xhr;
    4. if(window.XMLHttpRequest){
    5. xhr=newXMLHttpRequest();
    6. }
    7. else{
    8. xhr=newActiveXObject('Microsoft.XMLHTTP');
    9. }
    10. //2號線：傳送http請求（準備資料，真正的傳送）
    11. if(method=='GET'&& data){
    12. //如果是get方式，並且有data：傳資料到伺服器
    13. url=url+'?'+data;
    14. }
    15. xhr.open(method,url,true);
    16. if(method=='GET'){
    17. xhr.send(null);
    18. }
    19. else{
    20. xhr.setRequestHeader('Content-Type','application/x-www-form-urlencoded');
    21. xhr.send(data);
    22. }
    23. //4號線：拿到的資料返回給呼叫ajax函式的地方
    24. xhr.onreadystatechange=function(){
    25. if(xhr.readyState==4){
    26. if(xhr.status==200){
    27. if(fnsuccess){
    28. fnsuccess(xhr.responseText);//注意這裡只能接收字串，json和html資料。如果傳過來的是xml資料格式，要換用responseXML屬性
    29. }
    30. }
    31. else{
    32. alert('出差了，出錯狀態是：'+xhr.status);
    33. }
    34. }
    35. }
    36. }