网站地图    收藏   

主页 > 前端 > javascript >

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

来源:自学PHP网    时间:2014-09-19 14:47 作者: 阅读:

[导读] 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("请求失败!");  
  }  
 }  


jquery+ajax/" target="_blank">jquery ajax

使用load方式来进行异步请

 代码如下 复制代码

$(".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方式来进行异步请求


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 事件

局部事件就是在每次的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事件.
// ...
});

自学PHP网专注网站建设学习,PHP程序学习,平面设计学习,以及操作系统学习

京ICP备14009008号-1@版权所有www.zixuephp.com

网站声明:本站所有视频,教程都由网友上传,站长收集和分享给大家学习使用,如由牵扯版权问题请联系站长邮箱904561283@qq.com

添加评论