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

猜你喜欢

转载自blog.csdn.net/colin_yjz/article/details/50311073