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()
这两个函数可以用于请求发送时给出客户提示,表示请求已经发送,请耐心等待。 完成之后可以告知完成。
这种实现方式通常为提交时出发蒙版事件,将页面做一个蒙版,避免重复操作, 完成之后将蒙版隐藏。