原生Ajax 和jQuery Ajax的區別範例分析_jquery

　　前言：這次介紹的是利用ajax與後台進行資料交換的小例子，所以demo必須透過伺服器來開啟。伺服器環境非常好搭建，從網路下載wamp或xampp，一步步安裝就ok，然後再把寫好的頁面放在伺服器中指定的位置。開啟時，在瀏覽器網址列輸入「localhost/指定頁面」或「127.0.0.1/指定頁面」開啟。

　　以下列出demo的HTML、PHP、原生ajax 、jq ajax程式碼。

　　HTML代碼：

複製程式碼 程式碼如下:

   
   
   
   


   

       

           

               
• 春

               
• 夏

               
• 秋

               
• 冬季

           

       

       

       
       

   

　　PHP代碼：

複製程式碼 程式碼如下:

$details = array (
    'spring'    =>    "

人間四月芳菲盡，山寺桃花始盛開

",
    'summer'    =>    "

水晶簾動微風起，滿架薔薇一院香

",
    'fall'    =>    "

金井梧桐秋葉黃，珠簾不捲夜來霜

",
    'winter'        =>    "

梅須遜雪三分白，但雪卻輸梅一段香

"
);
echo $details[$_REQUEST['LiName']];
?>

遠非ajax：

複製程式碼程式碼如下：

    var lis = document.getElementById('list').getElementsByTagName('li');
    window.onload = initPage;
    函數 initPage() {
        for (var i=0; i             txt = lis[i];
            txt.onclick = function () {
                getDetails(this.id);
            }
        }
    }
    函數 creatRequest() {
        嘗試{
            請求 = new XMLHttpRequest();
        }
        抓住（tryMS）{
            嘗試{
                request = new ActiveXObject("Msxml2.XMLHTTP");
            }
            抓住（其他MS）{
                嘗試{
                    request = new ActiveXObject("Miscrosoft.XMLHTTP");
                }
                以且擷取（失敗）{
                    請求 = null;
                }
            }
        }
        退貨要求；
    }
    函數 getDetails(itemName) {
        請求 = creatRequest();
        if (請求== null) {
            alert('沒有成功建立請求')
            返回；
        }
        var url = "getDetails.php?LiName=" escape(itemName);
        request.open("GET",url,true);
        request.onreadystatechange = displayDetails;
        request.send(null);
    }
    函數顯示詳細資料() {
        if (request.readyState == 4) {
        if (request.status == 200) {
            detailDiv = document.getElementById("inf");
            detailDiv.innerHTML = request.responseText;
        }
      }
    }  
腳本>

JQ ajax:

複製程式碼程式碼如下：

$('#list li').click ( function () {                      
        $.ajax({                          
            類型：'GET',                                   資料：'',                                   
url:"getDetails.php?LiName=" this.id
,                        成功：函數（資料）{                                       $('#inf').html(資料);                            },             資料型態：'文字'，             錯誤：函數 (){               
                Alert("失敗！");           
            }
        })                   
    });
腳本>