锋利的jQuery读书笔记

发布时间:2017-6-29 10:12:48编辑:www.fx114.net 分享查询网我要评论
本篇文章主要介绍了"锋利的jQuery读书笔记",主要涉及到锋利的jQuery读书笔记方面的内容,对于锋利的jQuery读书笔记感兴趣的同学可以参考一下。

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()

这两个函数可以用于请求发送时给出客户提示,表示请求已经发送,请耐心等待。  完成之后可以告知完成。

这种实现方式通常为提交时出发蒙版事件,将页面做一个蒙版,避免重复操作, 完成之后将蒙版隐藏。



上一篇:new关键的深刻认识
下一篇:OpenCV2学习笔记(十二):特征提取算法SIFT与SURF

相关文章

相关评论

本站评论功能暂时取消,后续此功能例行通知。

一、不得利用本站危害国家安全、泄露国家秘密,不得侵犯国家社会集体的和公民的合法权益,不得利用本站制作、复制和传播不法有害信息!

二、互相尊重,对自己的言论和行为负责。

好贷网好贷款