上篇博客谈了AJAX,下面再说说它的优缺点,我们知道不管是什么技术一般都是因为有它的利用价值才出现的,也就是它们都是有优点的,而有老句话说的是“是药三分毒”,技术也一样,什么样的技术一般也都会有它的缺陷的。项目中只要是它的优点大于它的缺点我们就会去使用它。AJAX的缺点相对于它的优点来说基本上可以忽略,因为它的优点真的是很优秀。
AJAX优点:
1、 使用异步方式与服务器通信,不需要打断用户正在进行的操作,具有更加迅速的响应能力。
2、 可以在不更新整个页面的前提下维护数据(不刷新页面),给用户的体验非常棒。这也是它最大的优点。
3、 AJAX的原则是“按需取数据”,可以最大程度的减少冗余请求,充分利用了客户端闲置的处理能力,降低服务器的负荷。
AJAX缺点:
1、破坏浏览器后退按钮的正常行为。在动态更新页面后,用户无法回到前一个页面的状态,这是因为浏览器只能记下历史记录中的静态页面。
2、使用JavaScript作Ajax的引擎,JavaScript的兼容性和Debug需要特别注意。
AJAX让用户页面丰富起来,增强用户体验.AJAX也是所有Web开发的必修课.虽然说AJAX技术并不复杂,但是实现方式还是会因为每个开发人员而有所差异。看着它如此之好,是不是感觉使用起来还是不太方便,不太好控制而烦恼呢?不要着急,下面就再介绍一种技术,让AJAX的异步通信技术更加方便的应用到我们的程序中,那就是Jquery。
jQuery提供一系列AJAX函数来帮助我们统一这种差异, 并且让调用AJAX更加简单.jQuery提供了几个用于发送AJAX请求的函数. 其中最核心的也是最复杂的是jQuery.ajax(),所有的其他AJAX函数都是它的一个简化调用.当我们想要完全控制AJAX时可以使用此方法, 否则还是使用简化方法如get, post, load等更加方便。下面我们就来逐一认识这些个方法:
1.load(url, [data], [callback] )
载入远程 HTML 文件代码并插入至 DOM 中,默认使用 GET 方式传递,附加参数时自动转换为 POST 方式。jQuery 1.2 中,可以指定选择符,来筛选载入的 HTML 文档,DOM 中将仅插入筛选出的 HTML 代码。语法形如 "url #some > selector"。
参数:
url
|
待装入 HTML 网页网址
|
data(可选)Map,String
|
发送至服务器的 key/value 数据。在jQuery 1.3中也可以接受一个字符串了。
|
callback(可选)Callback
|
载入成功时回调函数。
|
示例:
描述: 加载 feeds.html 文件内容。
jQuery 代码:
$("#feeds").load("feeds.html");
2.jQuery.get(url, [data], [callback], [type] )
通过远程 HTTP GET 请求载入信息,这是一个简单的 GET 请求功能以取代复杂 $.ajax 。请求成功时可调用回调函数。如果需要在出错时执行函数,请使用 $.ajax。
参数:前面的解释参见1
type(可选)String
返回内容格式,xml,html, script, json, text, _default。
示例:
描述: 显示 test.php 返回值(HTML 或 XML,取决于返回值)。
jQuery 代码:
$.get("test.php",function(data){
alert("Data Loaded: " + data);
});
描述: 显示 test.cgi 返回值(HTML 或 XML,取决于返回值),添加一组请求参数。
jQuery 代码:
$.get("test.cgi",{ name: "John", time: "2pm" },
function(data){
alert("Data Loaded: " + data);
});
3.jQuery.getJSON(url, [data], [callback] )
通过 HTTP GET 请求载入 JSON 数据,在 jQuery 1.2 中,您可以通过使用JSONP形式的回调函数来加载其他网域的JSON数据,如 "myurl?callback=?"。jQuery 将自动替换 ? 为正确的函数名,以执行回调函数。 注意:此行以后的代码将在这个回调函数执行前执行。
参数:解释参见1
示例:
描述: 从 test.js 载入 JSON 数据,附加参数,显示 JSON 数据中一个 name 字段数据。
jQuery 代码:
$.getJSON("test.js",{ name: "John", time: "2pm" }, function(json){
alert("JSON Data: " +json.users[3].name);
});
4.jQuery.getScript(url, [callback] )
通过 HTTP GET 请求载入并执行一个 JavaScript 文件,jQuery 1.2 版本之前,getScript 只能调用同域 JS 文件。 1.2中,您可以跨域调用 JavaScript 文件。注意:Safari 2 或更早的版本不能在全局作用域中同步执行脚本。如果通过 getScript 加入脚本,请加入延时函数。
参数:参见1
示例:
描述:加载并执行 test.js ,成功后显示信息。
jQuery 代码:
$.getScript("test.js",function(){
alert("Script loaded andexecuted.");
});
5.jQuery.post(url, [data], [callback], [type] )
通过远程 HTTP POST 请求载入信息,这是一个简单的 POST 请求功能以取代复杂 $.ajax 。请求成功时可调用回调函数。如果需要在出错时执行函数,请使用 $.ajax。
参数:参见2
示例:
描述1:请求 test.php 网页,忽略返回值
jQuery 代码:
$.post("test.php");
描述2:请求 test.php 页面,并一起发送一些额外的数据(同时仍然忽略返回值)
jQuery 代码:
$.post("test.php",{ name: "John", time: "2pm" } );
描述3:输出来自请求页面 test.php 的结果(HTML 或 XML,取决于所返回的内容)
jQuery 代码:
$.post("test.php",function(data){
alert("Data Loaded: " + data);
});
6.jQuery.ajax(options )
通过 HTTP 请求加载远程数据。jQuery 底层 AJAX 实现。简单易用的高层实现见 $.get, $.post 等。$.ajax() 返回其创建的 XMLHttpRequest 对象。大多数情况下你无需直接操作该函数,除非你需要操作不常用的选项,以获得更多的灵活性。
最简单的情况下,$.ajax()可以不带任何参数直接使用。
注意:所有的选项都可以通过 $.ajaxSetup()函数来全局设置。
一些参数介绍请参见:
http://www.cnblogs.com/zengen/archive/2011/03/25/1995761.html
关于jQuery.ajax百度文库里介绍的非常全面(还有示例):
http://baike.baidu.com/view/6278307.htm
总结:
各种功能的实现随着技术的不断革新将会变得越来越简单,我们只需要掌握某些主流技术的基本原理和学习的方法即可,有了一套完整的思想,学习什么技术基本上都一样,有时候遇到一门新技术我们可能用两三天的时间就能明白其大概的框架,参考说明就能将其应用到我们的项目中来。
分享到:
相关推荐
1.异步调用aspx.cs方法 2.异步调用WebService方法 3.异步调用一般处理程序方法 4.异步调用动态网页方法 7.返回对象集合参数 8.传递对象集合参数
Jquery在一定程度上改写了以往对JavaScript的写法,本人就用jquery实现上篇中用ajax实现异步通信的效果,感受一下jquery的魅力。 首先你需要下载jquery的最新的js文件,并将其引入到文件中,你也可以在此下载:点我...
jQuery Ajax 全解析.pdf 学习javaScript 异步通信 局部刷新
3) 使用XMLHttpRequest来和服务器进行异步通信。 4) 使用javascript来绑定和调用。 通过AJAX异步技术,可以在客户端脚本与web服务器交互数据的过程中使用XMLHttpRequest对象来完成HTTP请求(Request)/应答(Response...
Ajax工作原理是提供与服务器异步通信的能力,从而使用户从请求/响应的循环中解脱出来。借助于Ajax,可以在用户单击按钮时,使用JavaScript和DHTML立即更新UI,并向服务器发出异步请求,以执行更新或查询数据库。当...
犀利开发 jQuery内核详解与实践内容简介:本书循序渐进地讲解了jQuery高效开发的方法和技巧,内容包括jQuery框架的设计模式和思路、Sizzle选择器的构成和工作机制、DOM文档操作、事件处理、动画设计、Ajax异步通信、...
本书循序渐进地讲解了jquery高效开发的方法和技巧,内容包括jquery框架的设计模式和思路、sizzle选择器的构成和工作机制、dom文档操作、事件处理、动画设计、ajax异步通信、插件扩展和辅助工具等。 执行效率是...
是一个简单的POST 请求功能以取代复杂 $.ajax,请求成功时可调用回调函数,感兴趣的朋友可以参考下哈,希望对你有所帮助
我试图用JQuery在Ajax中实现异步通信的基础。 使用JQuery有一些遗留问题,但我不后悔将其作为SPA的基础。 评论文章: :
本书循序渐进地讲解了jquery高效开发的方法和技巧,内容包括jquery框架的设计模式和思路、sizzle选择器的构成和工作机制、dom文档操作、事件处理、动画设计、ajax异步通信、插件扩展和辅助工具等。 执行效率是...
本书循序渐进地讲解了jquery高效开发的方法和技巧,内容包括jquery框架的设计模式和思路、sizzle选择器的构成和工作机制、dom文档操作、事件处理、动画设计、ajax异步通信、插件扩展和辅助工具等。 执行效率是...
使用XMLHttpRequest来和服务器进行异步通信。(核心) 4.使用javascript来绑定和调用。 在我们前端处理数据的时候免不了要 ajax 与后台通信, ajax 是通过 XMLHttpRequest 对象与服务器进行通信的, jquery 在 ...
JSON是客服端与服务器进行交互常用的数据格式,与AJAX,JQuery等一起使用,达到异步通信的目的。这里把就jQuery.js文件和8个jar包文件打包在一起,供大家使用。其中有8个jar包文件,一般会使用其中6个,javadoc和...
通过 AJAX,JavaScript 可使用 JavaScript 的 XMLHttpRequest 对象来直接与服务器进行通信。通过这个对象,您JavaScript 可在不重载页面的情况与 Web 服务器交换数据。 jQuery是一种javascript框架,是对javascript...
*使用了Ajax异步刷新,封装Jquery,使用了图片的IO上传等技术 *建议使用Tomcat9和jdk8 ## 项目备注 1、该资源内项目代码都经过测试运行成功,功能ok的情况下才上传的,请放心下载使用! 2、本项目适合计算机相关...
在使用AJAX时,这里我用的是原生的js而不是jQuery等框架,因为女王告诉我们原生的才是最强大的。。。。 话不多说,先看代码 这段代码构造一个XHR对象的实例request,并用它来建立异步请求。在onread
jqGrid 是一个用来显示网格数据的jQuery插件,通过使用jqGrid可以轻松实现前端页面与后台数据的ajax异步通信。
本项目的硬件部分主要采用LoRa通信模块以及各种传感器等电子元器件,软件部分包括SpringBoot与MyBatis框架和Ajax前后端异步通信技术,使用的是MySQL数据库和Navicat软件,前端使用的是jQuery与Vue框架,基于前后端...
jqGrid 是一个用来显示网格数据的jQuery插件,通过使用jqGrid可以轻松实现前端页面与后台数据的ajax异步通信。文档比较全面,
本项目的硬件部分主要采用LoRa通信模块以及各种传感器等电子元器件,软件部分包括SpringBoot与MyBatis框架和Ajax前后端异步通信技术,使用的是MySQL数据库和Navicat软件,前端使用的是jQuery与Vue框架,基于前后端...