jQuery中Ajax应用

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

$.ajax()常规参数

参数名称	类型	说明
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){
});