ajax的jquery寫法和原生寫法

1、ajax的簡介
Ajax被認爲是(Asynchronous(異步) JavaScript And Xml的縮寫）。如今，容許瀏覽器與服務器通訊而無須刷新當前頁面的技術都被叫作Ajax.
同步是指：發送方發出數據後，等接收方發回響應之後才發下一個數據包的通信方式。  
異步是指：發送方發出數據後，不等接收方發回響應，接着發送下個數據包的通信方式 。
 
2、ajax的缺陷
AJAX大量使用了JavaScript和AJAX引擎，而這個取決於瀏覽器的支持。IE5.0及以上、Mozilla1.0、NetScape7及以上版本才支持，Mozilla雖然也支持AJAX，可是提供XMLHttpRequest的方式不同。因此，使用AJAX的程序必須測試針對各個瀏覽器的兼容性。
AJAX更新頁面內容的時候並無刷新整個頁面，所以，網頁的後退功能是失效的；有的用戶還常常搞不清楚如今的數據是舊的仍是已經更新過的。這個就須要在明顯位置提醒用戶「數據已更新」。
對流媒體的支持沒有FLASH好。
一些手持設備（如手機、PDA等）如今還不能很好的支持Ajax。
form數據的序列化：

$('#submit').click(function(){
  $('#form').serialize();    //會根據input裏面的name，把數據序列化成字符串；eg：name=yang
  $('#form').serializeArray();  //會根據input裏面的name，把數據序列化成數組；eg：[object]
　　//注意：沒有name會獲取不到值
  //下面兩種不是jQuery的方法
  JSON.parse()  //json字符串轉化爲json對象
  JSON.stringify()  //json對象轉化爲json字符串
});

 
3、ajax的四種type類型：
一、GET請求會向數據庫發索取數據的請求，從而來獲取信息，該請求就像數據庫的select操做同樣，只是用來查詢一下數據，不會修改、增長數據，不會影響資源的內容，即該請求不會產生反作用。不管進行多少次操做，結果都是同樣的。
二、與GET不一樣的是，PUT請求是向服務器端發送數據的，從而改變信息，該請求就像數據庫的update操做同樣，用來修改數據的內容，可是不會增長數據的種類等，也就是說不管進行多少次PUT操做，其結果並無不一樣。
三、POST請求同PUT請求相似，都是向服務器端發送數據的，可是該請求會改變數據的種類等資源，就像數據庫的insert操做同樣，會建立新的內容。幾乎目前全部的提交操做都是用POST請求的。
四、DELETE請求顧名思義，就是用來刪除某一個資源的，該請求就像數據庫的delete操做。
簡單的說就是
get理解爲查詢 delete就是刪除 post就是新增 put就是更新數據
 
4、ajax的原生寫法 

/* 
ajax({
    type:'',//請求方式
    url:'',//請求地址
    asny:true, //是否異步
    data:'',//數據
    dType:'',//請求數據類型
    success：function(response){},//執行成功的回調函數
    error:function(status){}//執行失敗的回調函數
})
參數json所須要的屬性：
    *type : string 可缺省，表明請求的方式(默認'GET')
    *url ：string 不可缺省，表明請求的地址
    *asny : boolean 可缺省，(默認'true')表明是否異步
    *data : json表明須要傳遞的數據
    *dType:data的數據類型
    *success ：可缺省，function表明成功的回調函數,該函數第一個形參表明後臺返回的數據
    *error ：可缺省，function表明失敗的回調函數,該函數第一個形參表明請求的狀態碼
*/
function ajax(obj){
    var type = obj.type || 'GET',//默認是GET
        url = obj.url,
        asny = obj.asny !== false,
        data = obj.data,
        dType = obj.dataType || 'json',
        success = obj.success,
        error = obj.error;
    //處理data
    for(var key in data){
        data += key + '=' + obj.data[key] + '&';
    }
    var xhr;//建立XMLHttpRequest
    if(window.XMLHttpRequest){
        xhr = new XMLHttpRequest();
    }else{
        try{
            xhr = new ActiveXObject('Msxml2.XMLHTTP.6.0');
        }catch(e){
            xhr = new ActiveXObject('Msxml2.XMLHTTP.3.0');
        }
    }
    if( type.toUpperCase() == 'GET' ){//處理GET
        var d = new Date();
        url += '?' + data + '_=' + d.getTime();//處理緩存問題
        data = null;
    }
    xhr.open(type,url,asny);
    xhr.setRequestHeader('Content-Type','application/x-www-form-urlencoded');//設置請求頭信息
    xhr.send(data);//發送數據
    //xhr監聽
    xhr.onreadystatechange = function(){
        if(xhr.readyState == 4 && xhr.status ==200 ){
            var response;
            if( dType == 'text' || dType == 'json'){
                if( dType == 'json'){//json
                    response = JSON.parse( xhr.responseText );
                }else{//普通文本
                    response = xhr.responseText;
                }
            }else{//XML
                response = xhr.responseXML;
            }
            success && success(response);//成功回調函數
        }else{//請求失敗
            error && error(xhr.status);//失敗回調函數
        }
    }
}

  
5、ajax的jquery寫法：

$.ajax({
　　type:"POST",  //請求方式   get查詢  post增長  put修改   delete刪除
　　url:"http://localhost:8080/info",//請求路徑
　　async:true,  //或false 是否異步
　　data:{name:'ycg',age:25},　　 
　　timeout:5000,//超時時間
　　dataType:'json',  //返回的數據格式：json/xml/html/script/jsonp/text
　　beforeSend:function(xhr){ 
　　　　console.log('發送前'); 
　　} 
　　success:function(data,textStatus,jqXHR){ 
　　　　console.log('成功'); 
　　},
　　error:function(error){
　　　　console.log('錯誤');
　　}, 
　　complete:function(){ 
　　　　console.log('結束'); 
　　}
})

 
轉載於猿2048:➫《ajax的jquery寫法和原生寫法》