Ajax简介
Ajax(Asynchronous JavaScript And XML),不是一种新技术,而是利用一系列交互应用相关的技术结合体。可以无刷更新页面。
优点
1、不需要插件支持
2、优秀用户体验
3、提高Web程序性能
4、减轻服务器和贷款的负担
不足
1、浏览器对XMLHttpRequest对象的支持度不足
2、破坏浏览器前进、后退按钮的正常使用
3、对搜索引擎的支持的不足
Ajax使用
Ajax的核心就是XMLHttpRequest对象,他是实现Ajax的关键,发送异步请求、接受响应及执行回调都是通过他来完成的。现在各大浏览器都以JavaScript内置对象的方式实现XmlHttpRequest对象。
示例:
function Ajax(){
var xmlHttpReq = null;//声明装载XMLHttpRequest对象
if(window.ActiveXObject){ //IE5 IE6是以ActiveObject的方式创建
xmlHttpReq = new ActiveXObject("Microsoft XMLHTTP");
}else if(window.XMLHttpRequest){
xmlHttpReq = new XMLHttpRequest();
}
xmlHttpReq.open("GET","url",true);//通过open方法初始化XMLHttpRequest对象,默认是以异步进行的,但可以把asyn参数设置为ture。
xmlHttpReq.send(null);//通过send方法发送请求,由于上面使用的是HTTP的GET方式,随意可以不指定参数或者设置为null
}
function RequestCallBack(){ //一旦readyState的值改变,将会调用该函数
if(xmlHttpReq.readyState ==4){ //检查readyState和HTTP状态
if(xmlHttpReq.status == 200){
//执行操作
}
}
}
jQuery中使用Ajax
jQuery对Ajax进行了封装,在jQuery中有三层实现方式,最底层是$.ajax()方法,第2层是$.load()、$.get()、$.post(),第3层是$.getScipt()和$.getJSON()
load()方法
load()方法是jQuery中最简单也是很常用的Ajax方法,能载入远程HTML代码并插入DOM中。
load(url[,data][,callback])
参数 | 类型 | 描述 |
url | String | 请求页面的URL地址 |
data | Object | 发送至服务器key/value参数 |
callback | Funcation | 请求完成时的回调函数,无论请求成功和失败 |
$("#newHtml").load("test.html");//将test页面加载到DOM中id为newHtml元素中
$("#newHTML").load("test.html .para"); //将test页面中class值为.para的内容加载过来
$("#newHTML").laod("test.html",{name:"yjz",age:"23"},function(responseText,textStatus,XMLHttpRequest){ //有参数及回调函数
//responseText:请求返回内容
//textStatus:请求状态:success,error,notmodified,timeout4种
//XMLHttpRequest对象
});
如果data中没有参数则使用GET方式传递,否则使用POST方式传递。
get()和post()方法
load()方法通常是从Web服务器获取静态的数据文件,项目中如果需要传递一些参数给服务器页面,可以使用$.get()和$.post()方法。这里$.get()和$.post()是jQuery中的全局函数,而之前的load是jQuery是对象的操作。
故名思义get是以GET方式进行异步请求,post是以POST方式进行异步请求。
结构:
$.get(url[,data][,callback][,type])
参数名称 | 类型 | 说明 |
url | String | 请求的URL地址 |
data(可选) | Object | 请求参数 |
callback(可选) | Function | 载入成功后的回调函数(只用Response的状态是success才会调用该方法)自动将结果和状态传递给该方法 |
type | String | 服务器返回内容格式:xml,html,script,json,text,default |
$.get("request_url",{
username:$("#username").val(),
content:$("#password").val()
},function(data,status){
//data:返回内容
//status请求状态:success、error、notmodified、timeout,只有返回success后才会被调用
});
$.post()方式与$.get()方式相同,只是请求的方式区别。
GET请求参数会在URL后进行传递,而HTTP请求则作为Post消息的实体内容发送给Web服务器,但对用户不可见。
GET请求传递数据一般不大于2KB,而POST理论不收限制
GET请求方式会被浏览器缓存起来,可以通过浏览器历史读取到这些内容,存在安全隐患,而POST可以避免
$.ajax()方法
load()方法能够完成一些常规ajax程序,但是复杂一点的Ajax程序需要使用jQuery中的$.ajax()方法,$.ajax()是load(),$.get(),$.post()的底层实现,是jQuery中Ajax的最底层实现。而且还能设定beforeSend(提交前回调函数),error(请求失败处理),success (请求成功处理)以及complete(请求完成处理)回调函数,通过这些回调函数,给用户更多的Ajax提示信息。
$.ajax(options);
参数名称 | 类型 | 说明 |
url | String | 请求url |
type | String | 请求方式:GET(默认)、POST |
timeout | Number | 设置超时时间(毫秒) |
data | Object或String | 请求参数,如果不是String类型而是Object类型,则自动转换为字符串格式 |
dataType | String | 返回数据类型,xml、html、script、json、jsonp、jQuery、text |
beforeSend | Function | 发送请求前可以修改XMLHttpRequest对象的函数。function(XMLHttpRequest){} |
complete | Function | 请求完成后调用的函数(无论请求成功和失败均调用)function(XMLHttpRequest,status) |
success | Function | 请求成功调用的回调函数function(data,status){} |
error | Function | 请求失败调用的回道函数function(XMLHttpRequest,textStatus,errorThrown){},//testStatus和errorThrow只有一个包含信息 |
$.ajax({
url : "../indexDim/addDim",
type : "post",
data : "dim_name="+dim_name+"&dim_column="+dim_column+"&dim_table="+dim_table+"&dim_descr="+dim_descr+"&status="+status,
dataType:json,
success : function(data){
if(data.code==1){
window.location.href="error.html";
}else{
window.location.href="index.html";
}
},
});
$.getScript()和$.getJSON()
有时候在页面初次加载的时候不需要获取全部js文件,可以动态创建
$(document.createElement("script")).attr("src","url").appendTo("head");
或
$("<script type="text/javascript" src="" />").appendTo("head");
这样不太理想,可以使用$.getScript("url.js");
$.getJSON()是用来加载JSON文件的,与$.getScript()方法相同
$.getJSON("url",function(data){
});