jquery中的ajax实例教程

　　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》