總結jquery中的六種Ajax資料互動應用

jquery中的幾種ajax請求，包括最底層的方法$.ajax()，第二層的load()、$.post()、$.ajax()，第三層的$.getJSON()、$.getScript()。

代碼如下

複製代碼

<script type="text/javascript"> //jquery中的幾種ajax請求 function ajaxRequest(){     /*        $.ajax();最底層的方法        load()、$.post()、$.ajax();第二層        $.getJSON(); $.getScript();//第三層      /* /*******************************load方法********************************/         //url地址/data發送資料json格式索引值對/回呼函數 load通常用         //來擷取web上待用資料檔案，並不能體現ajax的全部價值        load(url,[data(key/value)],[callback]);             //1.load能將遠程html代碼添加到dom中           $("#text").load("test.html");        //2.load 篩選載入html文檔        $("#text").load("test.html .para");        //3.傳遞方式get        $("#text").load("test.php",function(){         //...        });        //傳遞方式post        $("#text").load("test.php",{name:"rain",age:"22"},function(){        //...        });        //4.回呼函數        $("#text").load("test.html",function(responseText,textStatus,XMLHttpRequest){        //responsetText 請求返回內容        //textStatus 請求狀態，success、error、notmodified、timeout 4種        //XMLHttpRequest對象        });        /********************************************get方法************************************************/         //$.get();方法使用GET非同步請求         /*url地址/data發送資料json格式索引值對/calback回呼函數/type傳回型別()           回呼函數有兩個 function(data,textStatus)data返回來的可以是xml、json檔案、html片段          textStatus請求狀態：success、error、notmodified、timeout 4種          textStatus返回success才會被調用 這一點跟load不同         */         $.get(url,[.data],[.calback],[.type]);         $.get("test.action",{name:"zhangsan",age:"10"},function(data,textStatus){                     /*...最後一個參數表示返回的是json格式             json、格式非常嚴格{"name":"張三","age","20"} 必須是這種格式而不是             {name:"zhangsan",age:"10"}任何一個{}不匹配擷取缺少逗號，都會導致頁面上的指令碼終止運行                                        甚至帶來其他更嚴重的負面影響當然在不就的將來javascript             xml跟json一樣容易解析，並且解析的xml將會成為主流的資料交換格式，不過在它之前json                                        依然有很強的生命力         */         },"json"); /********************************************post方法************************************************/           /*                 $.post()請求 他與get之間的區別         1、GET會將參數跟在URL後進行傳遞，而POST請求則是作為HTTP訊息的實體內容         發送給WEB伺服器。當然，在Ajax請求中，這種區別對使用者是可見的。                 2、GET方式對傳輸的資料大小限制（通常不能大於2KB），而使用POST方式傳遞         資料量要比GET方式大的多（理論上不受限制）         3、GET方式請求的資料會被瀏覽器緩衝起來，因此其他人可以從瀏覽器的記錄         中讀取到這些資料，例如帳號、密碼等，在某種情況下，GET方式會帶來嚴重的安全         性問題，而POST方式相對來說可以避免這些問題         4、GET方式和POST方式傳遞的資料在伺服器上擷取也是不相同。在PHP中，GET方式         的資料可以用$_GET[]擷取，而POST方式可以用$_POST[]擷取，兩種方式都可以用         $_REQUEST[]來擷取。                 $.post(url,[.data],[.calback],[.type]);         */         $.post("test.action",{name:"zhangsan",age:"10"},function(data,textStatus){         //...........另外load方法有參數傳遞時，會使用post請求發送請求         },"json"); /********************************************ajax方法************************************************/          /*          使用load $.get() $.post() 方法完成一些常規的Ajax程式，要編寫一些複雜的Ajax程式，         那麼就的用到$.ajax();不僅能同時實現與load、get、post方法實現同樣的的功能，而且         還可以設定beforeSend（提交前回呼函數）、error（請求失敗處理）、success（請求成功         後處理）以及complete（請求完成後處理）回呼函數，通過這些回呼函數，可以給使用者更多         的Ajax提示資訊。另外，還有一些參數，可以設定Ajax請求的逾時時間或者頁面的最後更改狀態         等。                 ajax中的參數詳解         url:（預設為當前網頁地址）發送請求的地址         type:請求的方式 post、get預設為get，注意http請求的方法，例如PUT和DELETE也可以使用，         但僅有部分瀏覽器支援         timeout:佈建要求逾時間（毫秒），此設定將覆蓋$.ajaxSetup()方法的全域變數         data：發送到伺服器的資料可以在URL後面也可以使用json格式key/value對         dataType:返回資料類型 xml、html、script、json、jsonp、text         beforeSend：發送請求修改XMLHttpRequest對象的函數，例如添加自訂HTTP頭、         在beforeSend中如果返回false中取消本次ajax請求、XmLHttpRequest對象唯一的參數、         function(XMLHttpRequest){         this;//調用貝齒Ajax請求傳遞的options參數         }         complete:請求完成紅調用的回呼函數（請求成功失敗均調用）         success:請求成功調用的回調回呼函數，有兩個參數。1.由伺服器返回，並更具dataType參數進行         處理後的資料。2.描述狀態的字串         function(data,textStatus){         //data可能是xmlDac、jsonObj、html、text等等         this;//調用本次ajax請求傳遞的options參數         }                 error：請求失敗時調用的函數，該函數有3個參數，即XMLHttpRequest對象、錯誤資訊、捕獲的錯誤         對象（可選）。Ajax時間函數如下：         function(XMLHttpRequest,textStatus,errorThrown){         //通常情況下textStatus河errorThown只有其中一個包含資訊，         this;調用本次Ajax請求是傳遞的options參數                 }         global：預設為true，表示是否觸發全域Ajax事件。設定為false將不會觸發全域Ajax事件，AjaxStart或者         AjaxStop可用控制各種Ajax事件         */         $.ajax({             type:"POST",//請求方式             url:"test.html",//url訪問地址             data:{name:"戰三",age:"11"}//傳遞參數             dataType:"json",//傳回值類型             success:function(data){//成功資料處理             //data...資料處理                         },             error:function(msg){//失敗處理                 alert(msg);             }                     }); /********************************************ajax方法************************************************/                  /*         只用用post，get 傳遞參數 如果一個表單中的資料多了 就有點麻煩了         序列化元素serialize();他將dom對象序列化成一個字串         $("#form1").serizlize();         $.post("this.html",$("#form1").serizlize(),function(data){         //處理...         })             serizlizeArray方法返回不是一個字串，而是將dom元素序列化後返回一個就送格式的資料，         $.param()方法：他是serizlize（）方法的核心，用來對一個數組或對象按照kay/value進行序列化         var obj={a:1,b:2,c:3};         var k=$.param(obj);         alert(k);//輸出a=1&b=2&c3         */ /********************************************getScript方法************************************************/         /*         有時候 在頁面上初次載入時沒有必要將所有的js檔案都加出來 可以動態建立載入js檔案         可以使用$.getScript();         */         $("#send").click(function(){             $.getScript("js.js");         }); /********************************************getJSON方法************************************************/         /*             $.getJSON()用於載入JSON檔案 跟getScript()用法一樣         */         $("#send").click(function(){             $.getJSON("js.json");         });                    $("#send").click(function(){             $.getJSON("js.json",function(data){                 //data資料處理             });         });        } } </script>