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