前几天用到了Ajax,突然感觉有点生疏了,于是上网查询资料把这一块知识补全。
ajax 即“Asynchronous JavaScript and XML”(异步 JavaScript 和 XML),Ajax可以实现页面的无刷新。
Ajax操作一般可以分为五步:
1——创建Ajax对象
由于浏览器对XMLHttpRequest对象的支持不足,只能被IE5.0及以后的版本支持,所以创建对象的时候需要对浏览器进行区别,具体代码如下:
try{ //先尝试使用标准的方式创建(Firfox,Ie8,Chrome) xhr=new XMLHttpRequest(); }catch (e){ //出现异常说明是IE7 以前额版本,则使用ActiveXObject创建 xhr=new ActiveXObject("Microsoft.XMLHTTP"); }
2——设置状态变化回调函数
//设置状态变化回调函数 xhr=new onreadystatechange=resCallback;//本次的回调函数是resCallback;
function resCallback(){
//判断请求是否成功完成并且成功返回
if(xhr.readyState==4&& xhr.status==200){
var resDiv=document.getElementById("result");
var old=resDiv.innerHTML;
resDiv.innerHTML=old+xhr.responseText+"<br/>";
}
}
//设置请求方式和URL xhr.open("GET","showTime.jsp");
3——发送请求
//发送请求
xhr.send(null);
4——接收返回值
这一步是在回调函数里面执行
5——根据返回值操作页面节点对象
--__以下是本次案例的全部代码:
<body> <input type="button" value="获取时间" onclick="getTime()"/> <div id="result">这里将显示时间,但是不会刷新全部页面</div> </body>
<script> var xhr; function getTime(){
try{ //先尝试使用标准的方式创建(Firfox,Ie8,Chrome) xhr=new XMLHttpRequest(); }catch (e){ //出现异常说明是IE7 以前额版本,则使用ActiveXObject创建 xhr=new ActiveXObject("Microsoft.XMLHTTP")//设置状态变化回调函数
xhr=new onreadystatechange=resCallback;//本次的回调函数是resCallback;
function resCallback(){
//判断请求是否成功完成并且成功返回
if(xhr.readyState==4&& xhr.status==200){
var resDiv=document.getElementById("result");
var old=resDiv.innerHTML;
resDiv.innerHTML=old+xhr.responseText+"<br/>";
}
}
//设置请求方式和URL xhr.open("GET","showTime.jsp");
</script>
$.ajax({ type: "POST", url: "some.php", data: "name=John&location=Boston", success: function(msg){ alert( "Data Saved: " + msg ); } }); //这段代码是在JQueryAPI上Copy的,$.ajax中请求参数和$.post/$.get的参数不一样,$.ajax的参数数据要求是Key和Value型的而post和get只需参数的name和参数值
dataType—服务器返回的数据类型 :。如果不指定,jQuery 将自动根据 HTTP 包 MIME 信息来智能判断。
随后服务器端返回的数据会根据这个值解析后,传递给回调函数。可用值:
"xml": 返回 XML 文档,可用 jQuery 处理。
"html": 返回纯文本 HTML 信息;包含的script标签会在插入dom时执行。
"script": 返回纯文本 JavaScript 代码。不会自动缓存结果。除非设置了"cache"参数。'''注意:'''在远程请求时(不在同一个域下),所有POST请求都将转为GET请求。(因为将使用DOM的script标签来加载)
"json": 返回 JSON 数据 。
"jsonp": JSONP 格式。使用 JSONP 形式调用函数时,如 "myurl?callback=?" jQuery 将自动替换 ? 为正确的函数名,以执行回调函数。
async: 俗称Ajax的开关,当这个属性值是true的时候,这次请求就是一个异步请求,当属性值是false的时候该请求就是同步请求,需要注意的是:同步请求会锁住浏览器直到这 个请求完成后用户才能在页面做其他的操作。
context object
这个对象用于设置Ajax相关回调函数的上下文。也就是说,让回调函数内this指向这个对象(如果不设定这个参数,那么this就指向调用本次AJAX请求时传递的options参数)。比如指定一个DOM元素作为context参数,这样就设置了success回调函数的上下文为这个DOM元素。就像这样:
$.ajax({
url: "test.html",
context: document.body,//让回调函数内this指向这个对象这里是body对象
success: function(){ $(this).addClass("done"); }});
Jquery中的Ajax有很多属性,这里只是基础,以下几种下次再说。