ajax的優(yōu)勢和不足
優(yōu)勢：
? ?1.不需要插件支持(一般瀏覽器且默認(rèn)開啟JavaScript即可);
? ?2.用戶體驗極佳(不刷新頁面即可獲取可更新的數(shù)據(jù));
? 3.提升Web程序的性能(在傳遞數(shù)據(jù)方面做到按需放松,不必整體提交);
? 4.減輕服務(wù)器和帶寬的負(fù)擔(dān)(將服務(wù)器的一些操作轉(zhuǎn)移到客戶端);
缺點：
1.不同版本的瀏覽器度XMLHttpRequest對象支持度不足(比如IE5之前);
2.前進(jìn)、后退的功能被破壞(因為Ajax永遠(yuǎn)在當(dāng)前頁,不會幾率前后頁面);
3.搜索引擎的支持度不夠(因為搜索引擎爬蟲還不能理解JS引起變化數(shù)據(jù)的內(nèi)容);
4.開發(fā)調(diào)試工具缺乏(相對于其他語言的工具集來說,JS或Ajax調(diào)試開發(fā)少的可憐)闽铐。
異步和同步：
異步：好比我們發(fā)短信侧到，非阻塞
同步：好比我們打電話 阻塞
ajax都是實行的是異步加載模式
?jquery采用了三層封裝：
最底層的封裝方式：
$.ajax();
第二層：
.load(),$.get(), $.post()
最高層：
$.getscript()和$.getJSON();
.load()三個參數(shù)：url－請求url地址，data（發(fā)送的key／value數(shù)據(jù)）私痹，callback（成功或失斊晟）;.load()方法是局部方法,因為他需要一個包含元素的jQuery對象作為前綴。適合做靜態(tài)文件的異步獲取
案例：
$("#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得到的值,如果成功返回數(shù)據(jù)則為:success,否則為:error紊遵。XMLHttpRequest對象屬于JavaScript范疇,可以調(diào)用一些屬性如下:
屬性名
說明
responseText
作為響應(yīng)主體被返回的文本
responseXML
如果響應(yīng)主體內(nèi)容類型是"text/xml"或"application/xml",
則返回包含響應(yīng)數(shù)據(jù)的XML DOM文檔
status
響應(yīng)的HTTP狀態(tài)
statusText
HTTP狀態(tài)的說明
2.$.get()和$.post()是全局方法,無須指定某個元素账千。使用在需要傳遞參數(shù)到服務(wù)器頁面的
案例：
?$("#btn").click(function(){
$.get('./1.php',{
url:'lle'
}, function(response,status,xhr){
if(status=='success'){
$("#box").html(response);－－－
}
})
})
注意:第四參數(shù)type是指定異步返回的類型。一般情況下type參數(shù)是智能判斷,并不需要我們主動設(shè)置,如果主動設(shè)置,則會強(qiáng)行按照指定類型格式返回暗膜。
$.post()方法的使用和$.get()基本上匀奏，具體區(qū)別如下:
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);
} });
});
小案例：自己用最近學(xué)了點php基本語法寫后臺數(shù)據(jù)，挺興奮的瑞佩！畢竟自己心里知道一路自學(xué)前端以來聚磺，這次又是一個不錯的成長！加油钉凌！
5.加載請求：
在Ajax異步發(fā)送請求時,遇到網(wǎng)速較慢的情況,就會出現(xiàn)請求時間較長的問題咧最。而超過一定時間的請求,用戶就會變得不再耐煩而關(guān)閉頁面。而如果在請求期間能給用戶一些提示,比如:正在努力加載中...,那么相同的請求時間會讓用戶體驗更加的好一些。
jQuery提供了兩個全局事件,.ajaxStart()和.ajaxStop()矢沿。這兩個全局事件,只要用戶觸發(fā)
了Ajax,請求開始時(未完成其他請求)激活.ajaxStart(),請求結(jié)束時(所有請求都結(jié)束了)
激活.ajaxStop()滥搭。
