ajax无刷新加载页面程序代码

前端之家收集整理的这篇文章主要介绍了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事件. // ... });

猜你在找的Ajax相关文章