電子發(fā)燒友App
jQuery
jQuery是一個(gè)快速、簡(jiǎn)潔的JavaScript框架，是繼Prototype之后又一個(gè)優(yōu)秀的JavaScript代碼庫(kù)（或JavaScript框架）。jQuery設(shè)計(jì)的宗旨是“write Less，Do More”，即倡導(dǎo)寫更少的代碼，做更多的事情。它封裝JavaScript常用的功能代碼，提供一種簡(jiǎn)便的JavaScript設(shè)計(jì)模式，優(yōu)化HTML文檔操作、事件處理、動(dòng)畫設(shè)計(jì)和Ajax交互。
jQuery的核心特性可以總結(jié)為：具有獨(dú)特的鏈?zhǔn)秸Z(yǔ)法和短小清晰的多功能接口；具有高效靈活的css選擇器，并且可對(duì)CSS選擇器進(jìn)行擴(kuò)展；擁有便捷的插件擴(kuò)展機(jī)制和豐富的插件。jQuery兼容各種主流瀏覽器，如IE 6.0+、FF 1.5+、Safari 2.0+、Opera 9.0+等。
ajax
Ajax 開發(fā)與傳統(tǒng)的 B/S開發(fā)有很大的不同。這些不同引入了新的編程問題，最大的問題在于易用性。由于 Ajax 依賴瀏覽器的 JavaScript 和XML，瀏覽器的兼容性和支持的標(biāo)準(zhǔn)也變得和 JavaScript 的運(yùn)行時(shí)性能一樣重要了。這些問題中的大部分來源于瀏覽器、服務(wù)器和技術(shù)的組合，因此必須理解如何才能最好的使用這些技術(shù)。
綜合各種變化的技術(shù)和強(qiáng)耦合的客戶服務(wù)端環(huán)境，Ajax 提出了一種新的開發(fā)方式。Ajax 開發(fā)人員必須理解傳統(tǒng)的 MVC 架構(gòu)，這限制了應(yīng)用層次之間的邊界。同時(shí)，開發(fā)人員還需要考慮 B/S 環(huán)境的外部和使用 Ajax 技術(shù)來重定型 MVC 邊界。最重要的是，Ajax 開發(fā)人員必須禁止以頁(yè)面集合的方式來考慮 Web 應(yīng)用而需要將其認(rèn)為是單個(gè)頁(yè)面。一旦 UI 設(shè)計(jì)與服務(wù)架構(gòu)之間的范圍被嚴(yán)格區(qū)分開來后，開發(fā)人員就需要更新和變化的技術(shù)集合了。
JQuery中ajax的簡(jiǎn)單使用教程
當(dāng)接觸一項(xiàng)新技術(shù)時(shí)，首先我們要問自己四個(gè)問題，如果這四個(gè)問題我們都能學(xué)習(xí)并理解到位，那么可以說這個(gè)新技術(shù)你已經(jīng)完成了初步掌握，下面我們就這四個(gè)問題來說ajax應(yīng)該怎么學(xué)習(xí)。如果你已經(jīng)看過我寫的JS中ajax的使用教程，相信你對(duì)ajax已經(jīng)有了一個(gè)基礎(chǔ)了解。那么可以直接看第四部分，以便節(jié)約您的時(shí)間。
一，ajax是什么？
AJAX = 異步 JavaScript 和 XML。是一種用于創(chuàng)建快速動(dòng)態(tài)網(wǎng)頁(yè)的技術(shù)。通過在后臺(tái)與服務(wù)器進(jìn)行少量數(shù)據(jù)交換，AJAX 可以使網(wǎng)頁(yè)實(shí)現(xiàn)異步更新。這意味著可以在不重新加載整個(gè)網(wǎng)頁(yè)的情況下，對(duì)網(wǎng)頁(yè)的某部分進(jìn)行更新。傳統(tǒng)的網(wǎng)頁(yè)（不使用 AJAX）如果需要更新內(nèi)容，必需重載整個(gè)網(wǎng)頁(yè)面。有很多使用 AJAX 的應(yīng)用程序案例：新浪微博、Google 地圖、開心網(wǎng)等等。
二，ajax用在哪里？
簡(jiǎn)單說是需要連接數(shù)據(jù)庫(kù)的地方，但是連接數(shù)據(jù)庫(kù)傳輸?shù)?a target="_blank">信息量很少，用不著刷新整個(gè)頁(yè)面，這種類型的適合用ajax，避免了屬性整個(gè)頁(yè)面帶來的資源浪費(fèi)。
三，為什么要使用ajax？
減輕服務(wù)器的負(fù)擔(dān)，按需取數(shù)，可以最大程度的減少冗余請(qǐng)求和響應(yīng)對(duì)服務(wù)造成的負(fù)擔(dān)。無惻新更新頁(yè)面，減少用戶心理和實(shí)際的等待時(shí)間。帶來更好的用戶體驗(yàn)?？梢园岩郧耙恍┓?wù)器負(fù)擔(dān)的工作轉(zhuǎn)嫁到客戶端，利用客戶端閑置的能力來處理，減輕服務(wù)器和速寫的負(fù)擔(dān)，節(jié)約空間和寬帶租用成本?？梢哉{(diào)用外部數(shù)據(jù)?；跇?biāo)準(zhǔn)化的并被廣泛支持的技術(shù)，不需要下載插件或者小程序。進(jìn)一步促進(jìn)頁(yè)面呈現(xiàn)和數(shù)據(jù)的分離。
四，怎么使用在JS中使用ajax？使用時(shí)我們要了解的基礎(chǔ)知識(shí)
1，JQuery是什么東西？
是一個(gè)JavaScript類庫(kù)，封裝了大量的JavaScript底層代碼。
2，JQuery的Ajax操作，對(duì)JavaScript底層Ajax操作進(jìn)行了封裝，提供了兩種方法進(jìn)行操作
第一種是底層的$.ajax（）操作
?。踙tml］ view plain copy$.ajax（{
url：“url”，
type：“get”，
dataType：“json”，
data：{
userID：“1”
}，
success:function（response）{
}，
error:function（） {
}
}）;
?。踙tml］ view plain copy
第二種是快捷操作$.get（）。.$.post（）。。。
［html］ view plain copy$.get（
“url”，
{userID：“123”}，
function（response） {
}
?。?/p>
［html］ view plain copy$.post（
“url”，
{userID：“123”}，
function（response） {
}
）
簡(jiǎn)單實(shí)例
?。踙tml］ view plain copy《！DOCTYPE html》
《html lang=“en”》
《head》
《meta charset=“UTF-8”》
《title》Title《/title》
《link rel=“stylesheet” href=“js/lib/bootstrap-3.3.7-dist/css/bootstrap.min.css”》
《script src=“js/lib/jquery2.2.4/jquery-2.2.4.js”》《/script》
《script src=“js/lib/bootstrap-3.3.7-dist/js/bootstrap.min.js”》《/script》
《style》
.thumbnail{
max-height:350px;
height:330px;
overflow:hidden;
}
.thumbnail 》 img{
width:140px;height:140px;
}
《/style》
《/head》
《body》
《div class=“container”》
《div class=“row hotgoodslist”》
《div class=“page-header”》
《h1》熱銷商品《small》年度熱銷商品排行榜《/small》《/h1》
《/div》
《！--《div class=“col-sm-4 col-md-3”》
《div class=“thumbnail”》
《img src=“。。?！?alt=“。。。”》
《div class=“caption”》
《h3》￥《span》400《/span》《/h3》
《p》商品名稱《/p》
《p》
《a href=“#” class=“btn btn-danger” role=“button”》加入購(gòu)物車《/a》
《a href=“#” class=“btn btn-primary” role=“button”》立即購(gòu)買《/a》
《/p》
《/div》
《/div》
《/div》--》
《/div》
《div class=“row shirt”》
《div class=“page-header”》
《h1》襯衫《small》眾多品牌齊聚，商務(wù)休閑首選《/small》《/h1》
《/div》
《/div》
《/div》
《script》
$（function（） {
/* 加載熱銷商品列表頁(yè)*/
$.ajax（{
url：“http://datainfo.duapp.com/shopdata/getGoods.php？callback=？”，
type：“get”，
dataType：“jsonp”，
success:function（resp） {
console.log（resp）;
for（var i = 0; i 《 resp.length; i ++） {
// DOM操作添加商品
var $goodsBox = $（“《div》”）.addClass（“col-md-3”）.addClass（“col-sm-4”）;
var $thumbnail = $（“《div》”）.addClass（“thumbnail”）;
var $img = $（“《img》”）.attr（“src”， resp［i］.goodsListImg）;
var $caption = $（“《div》”）.addClass（“caption”）;
var $priceSpan = $（“《span》”）.text（resp［i］.price）;
var $price = $（“《h3》”）.text（“￥”）.append（$priceSpan）;
var $name = $（“《p》”）.text（resp［i］.goodsName）;
var $id = $（“《p》”）.text（resp［i］.goodsID）.css（“visible”， “hidden”）;
var $addCart = $（“《button》”）.addClass（“btn”）.addClass（“btn-danger”）.text（“加入購(gòu)物車”）;
var $buyNow = $（“《button》”）.addClass（“btn”）.addClass（“btn-primary”）.text（“立即購(gòu)買”）;
$caption.append（$price）;
$caption.append（$name）;
$caption.append（$id）;
$thumbnail.append（$img）;
$thumbnail.append（$caption）;
$thumbnail.append（$addCart）;
$thumbnail.append（$buyNow）;
$goodsBox.append（$thumbnail）
$（“.hotgoodslist”）.append（$goodsBox）;
}
}
}）;
/*
加載襯衫商品列表頁(yè)
*/
$.ajax（{
url：“http://datainfo.duapp.com/shopdata/getGoods.php？callback=？”，
type：“get”，
data：{
classID:1
}，
dataType：“jsonp”，
success:function（resp） {
console.log（resp）;
for（var i = 0; i 《 resp.length; i ++） {
// DOM操作添加商品
var $goodsBox = $（“《div》”）.addClass（“col-md-3”）.addClass（“col-sm-4”）;
var $thumbnail = $（“《div》”）.addClass（“thumbnail”）;
var $img = $（“《img》”）.attr（“src”， resp［i］.goodsListImg）;
var $caption = $（“《div》”）.addClass（“caption”）;
var $priceSpan = $（“《span》”）.text（resp［i］.price）;
var $price = $（“《h3》”）.append（$priceSpan）;
var $name = $（“《p》”）.text（resp［i］.goodsName）;
var $id = $（“《p》”）.text（resp［i］.goodsID）.css（“visible”， “hidden”）;
$caption.append（$price）;
$caption.append（$name）;
$caption.append（$id）;
$thumbnail.append（$img）;
$thumbnail.append（$caption）;
$goodsBox.append（$thumbnail）
$（“.shirt”）.append（$goodsBox）;
}
}
}）;
}）
《/script》
《/body》
《/html》
工商網(wǎng)監(jiān)
評(píng)論