前端之家收集整理的这篇文章主要介绍了
ajax无刷新加载页面程序代码,
前端之家小编觉得挺不错的,现在分享给大家,也给大家做个参考。
js ajax加载页面最基本的方法就是使用最原始的XMLHttpRequest方法来加载,还有一种办法就是使用iframe,现在流行了jquery ajax来局局无刷新加载页面,如jquery.load(),post,get都可实例。
js原生态写法
代码如下 |
复制代码 |
var mm; var nn; function makeRequest(url,obj,b) { mm=obj; nn=b; http_request= false; if (window.XMLHttpRequest) { http_request = new XMLHttpRequest(); if (http_request.overrideMimeType){ http_request.overrideMimeType('text/xml'); } } else if (window.ActiveXObject) { try{ http_request = new ActiveXObject("Msxml2.XMLHTTP"); }catch(e) { try { http_request = new ActiveXObject("Microsoft.XMLHTTP"); } catch (e) { } } } if (!http_request) { alert("您的浏览器不支持当前操作,请使用 IE 5.0 以上版本!"); return false; } //定义页面调用的方法init,不是init();没有(); http_request.onreadystatechange = init; http_request.open('GET',url,true); //禁止IE缓存 http_request.setRequestHeader("If-Modified-Since","0"); //发送数据 http_request.send(null); //每60秒刷新一次页面 //setTimeout("makeRequest('"+url+"')",1000); } function init() { if (http_request.readyState == 4) { if (http_request.status == 0 || http_request.status == 200) { var result = http_request.responseText; if(result==""){ result = "获取失败"; } var z=result.split("#"); if(z[0]=="bnm") { alert(z[1]); window.location.reload(); } else if(z[0]=="nm") { } else { document.getElementById ("pinpai"+mm).value=z[0]; //document.getElementById ("pp"+mm).value=z[1]; document.getElementById ("lsj"+mm).value=z[2]; document.getElementById ("lxk"+mm).value=z[3]; document.getElementById ("lb"+mm).innerHTML=z[4]; } } else {//http_request.status != 200 alert("请求失败!"); } } } |
<a href="http://www.111cn.net/tags.PHP/%3Ca%20href=" list-139="" "="" target="_blank" style="font-size: 12px; color: rgb(51,51); text-decoration: none;">jquery+ajax/" target="_blank">jquery ajax
使用load方式来进行异步请@H_403_105@求
复制代码
$(".ajax.load").load("/xxx.PHP", function (responseText,textStatus,XMLHttpRequest){ this;//在这里this指向的是当前的DOM对象,即 $(".ajax.load")[0] //alert(responseText);//请求返回的内容 //alert(textStatus);//请求状态:success,error //alert(XMLHttpRequest);//XMLHttpRequest对象 }); |
使用POST方式来进行异步请求@H_403_105@
Ajax.aspx:
复制代码
Response.ContentType = "application/json"; Response.Write("{result: '" + Request["Name"] + ",你好!(这消息来自服务器)'}");jQuery 代码: $.post("Ajax.aspx",{Action: "post",Name: "lulu" }, function (data,textStatus){ // data 可以是 xmlDoc,jsonObj,html,text,等等. //this; // 这个Ajax请求的选项配置信息,请参考jQuery.get()说到的this alert(data.result); },"json"); |
jQuery Ajax 事件@H_403_105@
局部事件就是在每次的Ajax请求时在方法内定义的,例如:
复制代码
$.ajax({ beforeSend: function(){ // Handle the beforeSend event }, complete: function(){ // Handle the complete event } // ... }); |
全局事件是每次的Ajax请求都会触发的,它会向DOM中的所有元素广播,在上面 getScript() 示例中加载的脚本就是全局Ajax事件。全局事件可以如下定义:
复制代码
$("#loading").bind("ajaxSend",function(){ $(this).show(); }).bind("ajaxComplete",function(){ $(this).hide(); }); |
或者:
复制代码
$("#loading").ajaxStart(function(){ $(this).show(); }); 我们可以在特定的请求将全局事件禁用,只要设置下 global 选项就可以了: $.ajax({ url: "test.html",global: false,// 禁用全局Ajax事件. // ... }); |