锋利的jQuery读书笔记-第6章 jQuery与Ajax的应用

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

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

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