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》
技术专区
- mybatis动态sql详解
- 用VHDL语言设计数据传输系统中的HDB3编码器
- 裸机程序如何驱动硬件？看前辈是怎么说的
- 应用面向对象编程SoC原则的典型示例
- 嵌入式开发之java常用开发工具介绍
