Ajax的优势:不需要插件支持。优秀的用户体验。提供web程序性能。减轻服务器和带宽负担。
Ajax的不足:浏览器对XMLHttpRequest的支持不足。破坏浏览器的前进后退功能。对搜索引擎的支持不足。开发和调试工具的缺乏。
js的Ajax例子:
function ajax(){
var xmlHttpReq=null;
if(window.ActiveXObject){
xmlHttpReq=new Active XObject("Microsoft.XMLHTTP");
}else if(window.XmlHttpRequest){
xmlHttpReq=new XmlHttpRequest();
}
xmlHttpReq.open("GET","url',true);
xmlHttpReq.send(null);
if(xmlHttpReq.readyState==4){
if(xmlHttpReq.state==200){
alert(xmlHttpReq.responseText());
}
}
}
jQuery中的Ajax例子
1.load()
1.1载入html文档
load(url[,data][,callback])
url:请求html页面的url地址
data:可选,发送到服务器额key/value数据
callback:可选,请求完成时的回调函数,无论请求成功失败
<div id="text"></div>
$("#text").load("test.html")//加载test.html页面,加载并插入到div中
1.2筛选载入的html文档
url==url selector,可以用选择起来选择载入的内容
$("#text").load("test.html .hello")//载入test.html中class为hello的的内容
没有data就是get,有data就是post
1.4回调函数
function(responseText,textStatus,XMLHttpRequest){
//responseText:请求返回的内容
//textStatus:请求状态,success,error,timeout,notmodified4种
//XmlHttpRequest:XMLHttpRequest对象。
}
2.$.get()和$.post()
2.1$.get()
$.get(url[,data][callback][,type])
url:请求地址data:可选,发送到服务器的数据,会做为QueryString附加到请求url中
callback:可选,载入成功是执行的函数
type:可选,服务器返回的内容格式,xml,json,html。
回调函数:
function(data,textStatus){
//data:返回的数据
//textStatus:4种状态
}
2.2$.post
和$.get的区别:
1.GET请求见参数附加在url后进行传输,POST请求则是作为HTTP消息的实体内容发送给服务器,Ajax中对用户不可见
2.GET请求对数据有大小限制,POST方式传递方式要大的多
3.GET方式请求的数据会被浏览器缓存起来,用户浏览历史记录中可以读到数据,所以会有安全问题。
3.$.getScript()和$.getJson()
$.getScript()不用全部加载所有的js文件,有些文件用到时在加载就行了
$.getScript("../js/hello.js",function(){
})
$.getJson()用来加载json文件
$.getJson("text.json",function(data){
})
4.$.ajax()
$.ajax(options)只有一个参数
内容为:
1.url:请求地址,默认当前页地址
2.type:请求方式,默认get
2.timeout:设置超时时间,会覆盖$.ajaxSetup()中的配置
3.data:发送给服务端的数据,
4.dataType:预期服务器返回的数据类型,jsonp格式:xxx?callback=?时,jquery会替换最后一个?为正确的函数名,用来执行回调函数。
5.beforeSend:发送请求是可以修改XMLHttpRequest对象的函数。返回false可以取消请求。
6.complete:请求完成后调用的函数,不管成功失败。
7.success:请求成功后调用的函数,data和textStatus
8.errot:请求失败后调用的函数,XMLHttpRequest,textStatus,errorThrown
9.global:默认为true,是否触发全局Ajax事件
$.ajax({
url:"/xxx",
type:"get",
data:{},
success:function(data){
}
})
序列化元素
1.serialize()
如果表单数据多,可以使用$("#form").serialize(),会把值变为字符串格式。会自动编码。
2.serializeArray()不是返回数组,而是返回json数据
3.$.param()
用来将一个数组和对象按照key/value序列化
全局事件
ajax开始时会触发ajaxStart(function(){}),
结束时会触发ajaxStop(function(){})。
ajaxComplete(callBack):完成时执行
ajaxError(callback):ajax错误时执行
ajaxSend(callback):ajax发送请执行
ajaxSuccess(callback):ajax成功时执行
无论定义在哪里,只要有ajax请求就会执行。