jquery的ajax總結
一、總結
一句話總結：ajax函數中層級關系如下：
最底層的封裝方式：
$.ajax();
第二層：
.load(),$.get(), $.post()
最高層：
$.getscript()和$.getJSON();
1、serialize()方法的作用是什么（最后生成的序列化字符串長什么樣）？
⑥使用serialize()方法序列化表單元素值
使用serialize()方法可以將表單中有name屬性的元素值進行序列化，生成標准URL編碼文本字符串，直接可用於ajax請求，它的調用格式如下：
$(selector).serialize()
其中selector參數是一個或多個表單中的元素或表單元素本身。
例如，在表單中添加多個元素，點擊“序列化”按鈕后，調用serialize()方法，將表單元素序列化后的標准URL編碼文本字符串顯示在頁面中，如下圖所示：
在瀏覽器中的顯示效果：
2、ajaxStart()和ajaxStop()方法是干嘛的？
⑨使用ajaxStart()和ajaxStop()方法
ajaxStart()和ajaxStop()方法是綁定Ajax事件。ajaxStart()方法用於在Ajax請求發出前觸發函數，ajaxStop()方法用於在Ajax請求完成后觸發函數。它們的調用格式為：
$(selector).ajaxStart(function())和$(selector).ajaxStop(function())
其中，兩個方法中括號都是綁定的函數，當發送Ajax請求前執行ajaxStart()方法綁定的函數，請求成功后，執行ajaxStop ()方法綁定的函數。
例如，在調用ajax()方法請求服務器數據前，使用動畫顯示正在加載中，當請求成功后，該動畫自動隱藏，如下圖所示：
在瀏覽器中的結果：
從圖中可以看出，由於使用ajaxStart()和ajaxStop()方法綁定了動畫元素，因此，在開始發送Ajax請求時，元素顯示，請求完成時，動畫元素自動隱藏。
3、ajaxSetup()方法是干嘛的？
⑧使用ajaxSetup()方法設置全局Ajax默認選項
使用ajaxSetup()方法可以設置Ajax請求的一些全局性選項值，設置完成后，后面的Ajax請求將不需要再添加這些選項值，它的調用格式為：
jQuery.ajaxSetup([options])或$.ajaxSetup([options])
可選項options參數為一個對象，通過該對象設置Ajax請求時的全局選項值。
例如，先調用ajaxSetup()方法設置全局的Ajax選項值，再點擊兩個按鈕，分別使用ajax()方法請求不同的服務器數據，並將數據內容顯示在頁面，如下圖所示：
4、ajax是同步請求還是異步請求？
異步和同步：
異步：好比我們發短信，非阻塞
同步：好比我們打電話 阻塞
ajax都是實行的是異步加載模式
5、什么時候需要用到.ajaxStart()和.ajaxStop()？
在Ajax異步發送請求時,遇到網速較慢的情況,就會出現請求時間較長的問題。而超過一定時間的請求,用戶就會變得不再耐煩而關閉頁面。而如果在請求期間能給用戶一些提示,比如:正在努力加載中...,那么相同的請求時間會讓用戶體驗更加的好一些。
jQuery提供了兩個全局事件,.ajaxStart()和.ajaxStop()。這兩個全局事件,只要用戶觸發
了Ajax,請求開始時(未完成其他請求)激活.ajaxStart(),請求結束時(所有請求都結束了)
激活.ajaxStop()。
二、JQuery中ajax的相關方法總結
前提條件
話說是jquery中的ajax方法，那么前提條件當然是引入jquery啦。
<script src="http://libs.baidu.com/jquery/1.9.0/jquery.js" type="text/javascript"></script>
具體方法
①load()
使用load()方法通過Ajax請求加載服務器中的數據，並把返回的數據放置到指定的元素中，它的調用格式為：
load(url,[data],[callback])
參數url為加載服務器地址，可選項data參數為請求時發送的數據，callback參數為數據請求成功后，執行的回調函數。
例如，點擊“加載”按鈕時，向服務器請求加載一個指定頁面的內容，加載成功后，將數據內容顯示在<div>元素中，並將加載按鈕變為不可用。如下圖所示：
②使用getJSON()方法異步加載JSON格式數據
使用getJSON()方法可以通過Ajax異步請求的方式，獲取服務器中的數組，並對獲取的數據進行解析，顯示在頁面中，它的調用格式為：
jQuery.getJSON(url,[data],[callback])或$.getJSON(url,[data],[callback])
其中，url參數為請求加載json格式文件的服務器地址，可選項data參數為請求時發送的數據，callback參數為數據請求成功后，執行的回調函數。
例如，點擊頁面中的“加載”按鈕，調用getJSON()方法獲取服務器中JSON格式文件中的數據，並遍歷數據，將指定的字段名內容顯示在頁面中。如下圖所示：
③使用getScript()方法異步加載並執行js文件
使用getScript()方法異步請求並執行服務器中的JavaScript格式的文件，它的調用格式如下所示：
jQuery.getScript(url,[callback])或$.getScript(url,[callback])
參數url為服務器請求地址，可選項callback參數為請求成功后執行的回調函數。
例如，點擊“加載”按鈕，調用getScript()加載並執行服務器中指定名稱的JavaScript格式的文件，並在頁面中顯示加載后的數據內容，如下圖所示：
在瀏覽器中顯示的效果：
④使用get()方法以GET方式從服務器獲取數據
使用get()方法時，采用GET方式向服務器請求數據，並通過方法中回調函數的參數返回請求的數據，它的調用格式如下：
$.get(url,[callback])
參數url為服務器請求地址，可選項callback參數為請求成功后執行的回調函數。
例如，當點擊“加載”按鈕時，調用get()方法向服務器中的一個.php文件以GET方式請求數據，並將返回的數據內容顯示在頁面中，如下圖所示：
⑤使用post()方法以POST方式從服務器發送數據
與get()方法相比，post()方法多用於以POST方式向服務器發送數據，服務器接收到數據之后，進行處理，並將處理結果返回頁面，調用格式如下：
$.post(url,[data],[callback])
參數url為服務器請求地址，可選項data為向服務器請求時發送的數據，可選項callback參數為請求成功后執行的回調函數。
例如，在輸入框中錄入一個數字，點擊“檢測”按鈕，調用post()方法向服務器以POST方式發送請求，檢測輸入值的奇偶性，並顯示在頁面中，如下圖所示：
⑥使用serialize()方法序列化表單元素值
使用serialize()方法可以將表單中有name屬性的元素值進行序列化，生成標准URL編碼文本字符串，直接可用於ajax請求，它的調用格式如下：
$(selector).serialize()
其中selector參數是一個或多個表單中的元素或表單元素本身。
例如，在表單中添加多個元素，點擊“序列化”按鈕后，調用serialize()方法，將表單元素序列化后的標准URL編碼文本字符串顯示在頁面中，如下圖所示：
在瀏覽器中的顯示效果：
⑦使用ajax()方法加載服務器數據
使用ajax()方法是最底層、功能最強大的請求服務器數據的方法，它不僅可以獲取服務器返回的數據，還能向服務器發送請求並傳遞數值，它的調用格式如下：
jQuery.ajax([settings])或$.ajax([settings])
其中參數settings為發送ajax請求時的配置對象，在該對象中，url表示服務器請求的路徑，data為請求時傳遞的數據，dataType為服務器返回的數據類型，success為請求成功的執行的回調函數，type為發送數據請求的方式，默認為get。
例如，點擊頁面中的“加載”按鈕，調用ajax()方法向服務器請求加載一個txt文件，並將返回的文件中的內容顯示在頁面，如下圖所示：
⑧使用ajaxSetup()方法設置全局Ajax默認選項
使用ajaxSetup()方法可以設置Ajax請求的一些全局性選項值，設置完成后，后面的Ajax請求將不需要再添加這些選項值，它的調用格式為：
jQuery.ajaxSetup([options])或$.ajaxSetup([options])
可選項options參數為一個對象，通過該對象設置Ajax請求時的全局選項值。
例如，先調用ajaxSetup()方法設置全局的Ajax選項值，再點擊兩個按鈕，分別使用ajax()方法請求不同的服務器數據，並將數據內容顯示在頁面，如下圖所示：
⑨使用ajaxStart()和ajaxStop()方法
ajaxStart()和ajaxStop()方法是綁定Ajax事件。ajaxStart()方法用於在Ajax請求發出前觸發函數，ajaxStop()方法用於在Ajax請求完成后觸發函數。它們的調用格式為：
$(selector).ajaxStart(function())和$(selector).ajaxStop(function())
其中，兩個方法中括號都是綁定的函數，當發送Ajax請求前執行ajaxStart()方法綁定的函數，請求成功后，執行ajaxStop ()方法綁定的函數。
例如，在調用ajax()方法請求服務器數據前，使用動畫顯示正在加載中，當請求成功后，該動畫自動隱藏，如下圖所示：
在瀏覽器中的結果：
從圖中可以看出，由於使用ajaxStart()和ajaxStop()方法綁定了動畫元素，因此，在開始發送Ajax請求時，元素顯示，請求完成時，動畫元素自動隱藏。
https://www.cnblogs.com/LuckyWinty/p/5279032.html
三、jquery的ajax總結中....
ajax的優勢和不足
優勢：
1.不需要插件支持(一般瀏覽器且默認開啟JavaScript即可);
2.用戶體驗極佳(不刷新頁面即可獲取可更新的數據);
3.提升Web程序的性能(在傳遞數據方面做到按需放松,不必整體提交);
4.減輕服務器和帶寬的負擔(將服務器的一些操作轉移到客戶端);
缺點：
1.不同版本的瀏覽器度XMLHttpRequest對象支持度不足(比如IE5之前);
2.前進、后退的功能被破壞(因為Ajax永遠在當前頁,不會幾率前后頁面);
3.搜索引擎的支持度不夠(因為搜索引擎爬蟲還不能理解JS引起變化數據的內容);
4.開發調試工具缺乏(相對於其他語言的工具集來說,JS或Ajax調試開發少的可憐)。
異步和同步：
異步：好比我們發短信，非阻塞
同步：好比我們打電話 阻塞
ajax都是實行的是異步加載模式
jquery采用了三層封裝：
最底層的封裝方式：
$.ajax();
第二層：
.load(),$.get(), $.post()
最高層：
$.getscript()和$.getJSON();
.load()三個參數：url－請求url地址，data（發送的key／value數據），callback（成功或失敗）;.load()方法是局部方法,因為他需要一個包含元素的jQuery對象作為前綴。適合做靜態文件的異步獲取
案例：
$("#btn").click(function(){
$("#box").load('./2.html');
}
2.$("#btn").click(function(){
$("#box").load('./1.php');
})
3.$("#btn").click(function(){
$("#box").load('./1.php',{url:'lle'});
})
4.$("#btn").click(function(){
$("#box").load('./1.php',{url:'lle'});
},function(response,status,xhr){
console.log(response);
})
注意:status得到的值,如果成功返回數據則為:success,否則為:error。XMLHttpRequest對象屬於JavaScript范疇,可以調用一些屬性如下:
屬性名
說明
responseText
作為響應主體被返回的文本
responseXML
如果響應主體內容類型是"text/xml"或"application/xml",
則返回包含響應數據的XML DOM文檔
status
響應的HTTP狀態
statusText
HTTP狀態的說明
2.$.get()和$.post()是全局方法,無須指定某個元素。使用在需要傳遞參數到服務器頁面的
案例：
$("#btn").click(function(){
$.get('./1.php',{
url:'lle'
}, function(response,status,xhr){
if(status=='success'){
$("#box").html(response);－－－
}
})
})
注意:第四參數type是指定異步返回的類型。一般情況下type參數是智能判斷,並不需要我們主動設置,如果主動設置,則會強行按照指定類型格式返回。
$.post()方法的使用和$.get()基本上，具體區別如下:
1.GET請求是通過URL提交的,而POST請求則是HTTP消息實體提交的;
2.GET提交有大小限制(2KB),而POST方式不受限制;
3.GET方式會被緩存下來,可能有安全性問題,而POST沒有這個問題;
4.GET方式通過$_GET[]獲取,POST方式通過$_POST[]獲取。
3.$.post();
$("#btn").click(function(){
$.post('./1.php',{
url:'lle'
}, function(response,status,xhr,type){
if(status=='success'){
$("#box").html(response);
console.log(type);
}
})
})
$.getScript()和$.getJSON()
jQuery提供了一組用於特定異步加載的方法:$.getScript(),用於加載特定的JS文件;
$.getJSON(),用於專門加載JSON文件
//點擊按鈕后再加載JS文件$('input').click(function () {
$.getScript('test.js');
});
$.getJSON()方法是專門用於加載JSON文件的,使用方法和之前的類似。$('input').click(function () {
$.getJSON('test.json', function (response, status, xhr) {
alert(response[0].url);
});
});
4.$.ajax()
$.ajax()是所有ajax方法中最底層的方法,所有其他方法都是基於$.ajax()方法的封裝。
$('form button').click(function () {
$.ajax({
type : 'POST',
url : '1.php',
data : $('form').serialize(),
success : function (response, status, xhr) { alert(response);
} });
});
小案例：自己用最近學了點php基本語法寫后台數據，挺興奮的！畢竟自己心里知道一路自學前端以來，這次又是一個不錯的成長！加油！
5.加載請求：
在Ajax異步發送請求時,遇到網速較慢的情況,就會出現請求時間較長的問題。而超過一定時間的請求,用戶就會變得不再耐煩而關閉頁面。而如果在請求期間能給用戶一些提示,比如:正在努力加載中...,那么相同的請求時間會讓用戶體驗更加的好一些。
jQuery提供了兩個全局事件,.ajaxStart()和.ajaxStop()。這兩個全局事件,只要用戶觸發
了Ajax,請求開始時(未完成其他請求)激活.ajaxStart(),請求結束時(所有請求都結束了)
激活.ajaxStop()。
參考：jquery的ajax總結中.... - 簡書
https://www.jianshu.com/p/6d8efb1812e2