锋利的jQuery读书笔记-第6章 jQuery与Ajax的应用
来源:互联网 发布:sqlserver 回滚 编辑:程序博客网 时间:2024/05/24 02:05
Ajax的全称为: Asynchronous JavaScript and XML (异步JavaScript和XML)
一、Ajax的优势与不足
优势:
1.不需要任何插件支持
2.优秀的客户体验:不需要刷新就可以获取到新的数据
3.提高web程序的性能:传统模式中的表单Form提交变更为XHR(XMLHttpRequest)对象提交,即按需提交
4.减轻了服务器和带宽的压力
不足:
1.浏览器对XHR对象的支持度不足 (这一点在如今已经基本不存在,主流浏览器都支持)
2.破坏了浏览器正常的“”前进““”后退“功能
3.对搜索引擎的支持不足(搜索引擎的爬虫无法识别)
4.开发和吊事工具的缺乏(FireFox和Chrome都已经可以很好的支撑)
整体而言,当今主流的浏览器已经非常好的支撑了Ajax, 优势已经远远大于不足,本书出版于2012年,当时的浏览器支撑力度不足。
二、Ajax的XMLHttpsRequest对象(简写为XHR)
最早引入于IE5.0 Active X组件, 之后各大浏览器都是以JavaScript内置对象来实现,发送异步请求,接受返回和发起回调函数都是由XHR对象完成的。
三、jQuery中的Ajax
1.$.get() 和 $.post()的区别
Get请求会把参数拼接在URL后面传递,POST则把参数放在HTTP消息的实体内部。
Get方式对传输的数据大小有限制(通常不大于2KB),POST大得多,理论上不受限制。
Get方式请求的数据会被浏览器缓存起来,POST则不会。(也就是说的POST安全性更佳,其实并不是因为POST不把参数拼接在URL后面而更安全,POST中的HTTP消息也是可以被拦截后查看到内容。 安全性是指它不会被浏览器缓存,降低了泄露的风险)
两种方式在服务端的获取存在差异。
2.$.getScript()
$(function(){ $('#send').click(function() { $.getScript('test.js'); }); })
这里可以按照需要来加载新的js文件,但是这里要记住只能加载js,不能用来发送请求。
3.$.ajax()方法
它是jQuery最底层的ajax实现,其他所有的方法都是在它基础上进行的封装。
语法为: $.ajax(options) options为一个对象,里面包含很多可选参数,常用的如下:
url:服务请求地址
type:Get还是POST
data:请求数据(String或者Object)
dataType: 是XML还是HTML还是JSON。。。。
beforeSend:发送前调用函数
complete:完成后回调函数(无论成功失败都会发送)
success:成功后回调函数
error:失败后回调函数
global:true/false 默认为true表示触发全局事件
$(function(){ $('#send').click(function() { $.ajax({ type: "POST", url: "http://api.flickr.com/services/feeds/photos_public.gne?tags=car&tagmode=any&format=json&jsoncallback=?", dataType: "json", success : function(data){ //do success; }}); }); })
四、序列化元素
jQuery提供了一种简单的方式获取和传递form表单中的字段,避免多字段的表单一个一个写字段名
1.serialize()方法:
对比一下就明白了
$.post("get1.jsp", "username="+$('#username').val()+"&content="+$('#content').val(), function (data, textStatus){ $("#resText").html(data); // 把返回的数据添加到页面上});
这种写法等同于:
$.post("get1.jsp", $("#form1").serialize() , function (data, textStatus){ $("#resText").html(data); // 把返回的数据添加到页面上});实际上就是把表单里面字段全都获取出来拼接在一起。 当然有些请求不是字符串,需要发送数组,那么久可以用到第二个方法
2.serializeArray()方法:
实际上是一样的,只是将刚才的字符串变成了一个数组返回。
$("#send").click(function(){var $data = $("#form1").serializeArray(); alert( $data ); })打印一下就知道是个什么样子的东西
3.$.param()方法
实际就是上面2个方法的核心算法
$(function(){ var obj={a:1,b:2,c:3};var k = $.param(obj);alert(k) // 输出 a=1&b=2&c=3})
五、jQuery的Ajax全局事件
ajaxStart()
AjaxStop()
这两个函数可以用于请求发送时给出客户提示,表示请求已经发送,请耐心等待。 完成之后可以告知完成。
这种实现方式通常为提交时出发蒙版事件,将页面做一个蒙版,避免重复操作, 完成之后将蒙版隐藏。
- 《锋利的jQuery》读书笔记 第6章 jQuery与Ajax的应用
- 锋利的jQuery读书笔记-第6章 jQuery与Ajax的应用
- 《锋利的jQuery》第六章、 jQuery与Ajax应用
- 【锋利的JQuery】0x06 JQuery与Ajax的应用
- 《锋利的jQuery》读书笔记 第1章 认识jQuery
- 《锋利的jQuery》读书笔记 第2章 jQuery选择器
- 锋利的jQuery读书笔记-第1章 认识jQuery
- 锋利的jQuery读书笔记-第2章 jQuery选择器
- 锋利的jquery 笔记 第6章 ajax
- 《锋利的jQuery》读书笔记 第5章 jQuery对表单、表格的操作及更多应用
- 锋利的jQuery读书笔记-第5章 jQuery对表单、表格的操作及更多应用
- 锋利的jQuery 第六章 jQuery于Ajax的应用
- 《锋利的jQuery》之jQuery与Ajax
- 【锋利的jQuery】读书笔记
- 锋利的jQuery(读书笔记)
- 【读书笔记】锋利的 jQuery
- 锋利的jqueryCH6---jquery与ajax的应用
- 《锋利的jQuery》的读书笔记 -- jQuery应用实例
- BZOJ4300[绝世好题]题解--DP
- Spark2.x 快速入门教程 2
- 基于像素分析的连连看辅助程序学习
- Spring in Action(八):Spring中使用JDBC
- Overfencing 穿越栅栏
- 锋利的jQuery读书笔记-第6章 jQuery与Ajax的应用
- Spark2.x 快速入门教程 3
- 杨杨的游戏
- Android进度条
- HTML5 列表相关元素
- 免费下载嵌入式Linux基础全套视频教程
- 我想要的是什么?能做的又是什么?
- Spark2.x 快速入门教程 4
- [bzoj1433][ZJOI2009]假期的宿舍 二分图最大匹配