電子發燒友App
jQuery
jQuery是一個快速、簡潔的JavaScript框架，是繼Prototype之后又一個優秀的JavaScript代碼庫（或JavaScript框架）。jQuery設計的宗旨是“write Less，Do More”，即倡導寫更少的代碼，做更多的事情。它封裝JavaScript常用的功能代碼，提供一種簡便的JavaScript設計模式，優化HTML文檔操作、事件處理、動畫設計和Ajax交互。
jQuery的核心特性可以總結為：具有獨特的鏈式語法和短小清晰的多功能接口；具有高效靈活的css選擇器，并且可對CSS選擇器進行擴展；擁有便捷的插件擴展機制和豐富的插件。jQuery兼容各種主流瀏覽器，如IE 6.0+、FF 1.5+、Safari 2.0+、Opera 9.0+等。
ajax
Ajax 開發與傳統的 B/S開發有很大的不同。這些不同引入了新的編程問題，最大的問題在于易用性。由于 Ajax 依賴瀏覽器的 JavaScript 和XML，瀏覽器的兼容性和支持的標準也變得和 JavaScript 的運行時性能一樣重要了。這些問題中的大部分來源于瀏覽器、服務器和技術的組合，因此必須理解如何才能最好的使用這些技術。
綜合各種變化的技術和強耦合的客戶服務端環境，Ajax 提出了一種新的開發方式。Ajax 開發人員必須理解傳統的 MVC 架構，這限制了應用層次之間的邊界。同時，開發人員還需要考慮 B/S 環境的外部和使用 Ajax 技術來重定型 MVC 邊界。最重要的是，Ajax 開發人員必須禁止以頁面集合的方式來考慮 Web 應用而需要將其認為是單個頁面。一旦 UI 設計與服務架構之間的范圍被嚴格區分開來后，開發人員就需要更新和變化的技術集合了。
JQuery中ajax的簡單使用教程
當接觸一項新技術時，首先我們要問自己四個問題，如果這四個問題我們都能學習并理解到位，那么可以說這個新技術你已經完成了初步掌握，下面我們就這四個問題來說ajax應該怎么學習。如果你已經看過我寫的JS中ajax的使用教程，相信你對ajax已經有了一個基礎了解。那么可以直接看第四部分，以便節約您的時間。
一，ajax是什么？
AJAX = 異步 JavaScript 和 XML。是一種用于創建快速動態網頁的技術。通過在后臺與服務器進行少量數據交換，AJAX 可以使網頁實現異步更新。這意味著可以在不重新加載整個網頁的情況下，對網頁的某部分進行更新。傳統的網頁（不使用 AJAX）如果需要更新內容，必需重載整個網頁面。有很多使用 AJAX 的應用程序案例：新浪微博、Google 地圖、開心網等等。
二，ajax用在哪里？
簡單說是需要連接數據庫的地方，但是連接數據庫傳輸的信息量很少，用不著刷新整個頁面，這種類型的適合用ajax，避免了屬性整個頁面帶來的資源浪費。
三，為什么要使用ajax？
減輕服務器的負擔，按需取數，可以最大程度的減少冗余請求和響應對服務造成的負擔。無惻新更新頁面，減少用戶心理和實際的等待時間。帶來更好的用戶體驗。可以把以前一些服務器負擔的工作轉嫁到客戶端，利用客戶端閑置的能力來處理，減輕服務器和速寫的負擔，節約空間和寬帶租用成本。可以調用外部數據。基于標準化的并被廣泛支持的技術，不需要下載插件或者小程序。進一步促進頁面呈現和數據的分離。
四，怎么使用在JS中使用ajax？使用時我們要了解的基礎知識
1，JQuery是什么東西？
是一個JavaScript類庫，封裝了大量的JavaScript底層代碼。
2，JQuery的Ajax操作，對JavaScript底層Ajax操作進行了封裝，提供了兩種方法進行操作
第一種是底層的$.ajax（）操作
［html］ view plain copy$.ajax（{
url：“url”，
type：“get”，
dataType：“json”，
data：{
userID：“1”
}，
success:function（response）{
}，
error:function（） {
}
}）;
［html］ view plain copy
第二種是快捷操作$.get（）。.$.post（）。。。
［html］ view plain copy$.get（
“url”，
{userID：“123”}，
function（response） {
}
）
［html］ view plain copy$.post（
“url”，
{userID：“123”}，
function（response） {
}
）
簡單實例
［html］ 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”》加入購物車《/a》
《a href=“#” class=“btn btn-primary” role=“button”》立即購買《/a》
《/p》
《/div》
《/div》
《/div》--》
《/div》
《div class=“row shirt”》
《div class=“page-header”》
《h1》襯衫《small》眾多品牌齊聚，商務休閑首選《/small》《/h1》
《/div》
《/div》
《/div》
《script》
$（function（） {
/* 加載熱銷商品列表頁*/
$.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（“加入購物車”）;
var $buyNow = $（“《button》”）.addClass（“btn”）.addClass（“btn-primary”）.text（“立即購買”）;
$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）;
}
}
}）;
/*
加載襯衫商品列表頁
*/
$.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》
工商網監
評論