`
javaboychina
  • 浏览: 62090 次
  • 性别: Icon_minigender_1
  • 来自: 北京
社区版块
存档分类
最新评论

AJAX onreadystatechange问题

    博客分类:
  • Ajax
 
阅读更多

var xmlHttp;
function savetodata(){
createXMLHttpRequest();
var rndcode = new Date().getTime();
var Url ="a.asp?cache="+rndcode
xmlHttp.onreadystatechange = function(){
.....

}
xmlHttp.open ("GET",Url,true);
xmlHttp.send(null);
}

上面的这段代码, xmlHttp.onreadystatechange = function(){.....};可以在FF下执行,但是如果改成

xmlHttp.open ("GET",Url,false);时就不行了,今天被这个问题整的晕头转向。

原因分析:

其一:这时不能用xmlHttp.send(),需要内容,如果没有内容,要用NULL

其二:经测试后发现,onreadystatechange在IE下都很正常,但在FF3下,只能运行readyState=0时的代码。不能运行readyState=4的代码,在网络上找了一个原因:
在ajax的XMLHttpRequest.onreadystatechange方法的差异:在FF中当状态为1(即XMLHttpRequest已经调用open但还没有调用send时),FF则会继续执行onreadystatechange后面的代码,到执行完后面的代码后,在执行onreadystatechange在状态2,3,4的代码,而IE会等待状态2的到了,执行完onreadystatechange中状态2,3,4的代码后,继续执行后面的代码,这样问题就出现了,经常我们在onreadystatechange的代码要处理从服务器上获得的数据(这个数据只有onreadystatechange的状态为4时,才可以得到),所以这在IE中不存在问题,因为它会等待onreadystatechange状态4到来以后,在执行onreadystatechange后面的数据,但是由于FF不会等到onreadystatechange状态4到来后在执行onreadystatechange后面的代码,所以后面的代码就不能处理从服务器上获得的数据,那该怎么办呢?

解决方法:使用javascript的闭包(这个解决方法是从GMAP中获得灵感的)。我们传递一个函数给
onreadystatechange,在这个函数中处理从服务器上返回的数据,但是onreadystatechange是一个无参函数,那该怎么办呢?方法在我前面的
Javascript attachEvent传递参数的办法已经介绍 了,这里再稍微介绍一下,就是传递一个参数给onreadystatechange,但是在onreadystatechange中使用return一个无参函数,在这个无参函数中可以使用这个传入的参数。这个方法在IE和FF中都可以正常运行,所以这不失是一个好方法。

这里提到采用闭包,挺复杂,另外网上有采用了在FF下用onload,也是不管用。经过对错误排除,上面摘要提到的原因,才是根本的,也就是说,在FF下,第一次执行完onreadystatechange后,继续执行到send,但后面就不会再回头执行onreadystatechange,一直傻傻的走下去。

我直接改成:

xmlHttp.onreadystatechange = xmlHandle;
xmlHttp.open ("GET",Url,false);
xmlHttp.send(null);
xmlHttp.onreadystatechange = xmlHandle; //这里加一行挡住FF,让它再搞一次。


function xmlHandle(){
if (xmlHttp.readyState < 4){
......
}else if (xmlHttp.readyState == 4 && xmlHttp.status == 200){
var cartResult = Number(xmlHttp.responseText);
if (cartResult == 1){
window.location.href='b.asp';
}else if (cartResult == 2){
......;
}else{
window.location.href='/';
}
}
}

但是这样也不行,原来ff 3改成:xmlHttp.onreadystatechange = xmlHandle();然而加了括号,IE又不行,唉,原来就觉得FF是鸡皮,现在感觉FF纯属一个打着“支持标准”的称号,却是干着浪费程序员时间的垃圾。但手上这个程序又实在重要,没办法,只有再调试看看有没有更简单的办法,如下:

xmlHttp.open ("GET",Url,false);
xmlHttp.send(null);
if(xmlHttp.status==200)
xmlHandle();

这段代码在IE和FF下可以通用。但由于是同步调用,需要在readyState<4时未取得结果前出现提示,这对于网速慢的客户很友好。然而要在本机获得这种等待反应时的情况,由于本机反应快,会造成看不到给客户提示,因此暂时先不用这个代码

只有加入浏览器类型分析。

function getOs()
{
var OsObject = "";
if(navigator.userAgent.indexOf("MSIE")>0) {
return "MSIE"; //IE浏览器
}
if(isFirefox=navigator.userAgent.indexOf("Firefox")>0){
return "Firefox"; //Firefox浏览器
}
if(isSafari=navigator.userAgent.indexOf("Safari")>0) {
return "Safari"; //Safan浏览器
}
if(isCamino=navigator.userAgent.indexOf("Camino")>0){
return "Camino"; //Camino浏览器
}
if(isMozilla=navigator.userAgent.indexOf("Gecko/")>0){
return "Gecko"; //Gecko浏览器
}
}

然后把AJAX代码改为:

var rndcode = new Date().getTime();
var CartUrl ="a.asp?cache="+rndcode
var btype=getOs();
xmlHttp.onreadystatechange = (btype!="Firefox")?(xmlHandle):(xmlHandle());
xmlHttp.open ("GET",CartUrl,false);
xmlHttp.send(null);
xmlHttp.onreadystatechange = (btype!="Firefox")?(xmlHandle):(xmlHandle());

总算OVER了,IE6、IE 7、FF通用

分享到:
评论

相关推荐

    AJAX – onreadystatechange 事件

    在 AJAX 中,`onreadystatechange` 事件扮演了关键角色,它使得开发者能够根据请求的状态来执行相应的处理。 `onreadystatechange` 事件是一个事件处理器,每当 `XMLHttpRequest` 对象的 `readyState` 属性发生变化...

    Ajax 给 XMLHttpReq.onreadystatechange传递参数

    在标题和描述中提到的问题是如何向`onreadystatechange`事件处理函数传递额外的参数。在JavaScript中,有两种常见的方法来实现这一目标: 1. **匿名函数包裹**: 你可以将需要调用的函数(例如`proce`)包裹在一个...

    WEB开发 之 AJAX - onreadystatechange 事件.docx

    `onreadystatechange`事件是AJAX中的关键部分,它使得开发者能够在XMLHttpRequest对象的状态发生变化时执行相应的处理程序。 XMLHttpRequest对象是AJAX的核心,它提供了与服务器进行通信的能力。`...

    ajax ajax原理 ajax代码 ajax编程 ajax学习

    **Ajax(Asynchronous JavaScript and XML)技术是一种在无需重新加载整个网页的情况下,能够更新部分网页的技术。它通过在后台与服务器进行少量数据交换,使网页实现异步更新,提升了用户体验。Ajax的核心是...

    firefox3中onreadystatechange事件不会触发

    而`onreadystatechange`事件是JavaScript中用于监听XMLHttpRequest对象状态变化的事件,它在AJAX(异步JavaScript和XML)请求中起着关键作用。然而,在Firefox 3中,这个事件的触发情况似乎有些特殊,这正是我们要...

    Ajax Ajax本质 Ajax本质源码

    在实际开发中,我们不仅需要理解Ajax的基本概念,还要掌握如何在不同框架(如jQuery、AngularJS、Vue.js等)中使用Ajax,以及如何处理跨域请求、错误处理、性能优化等问题。对于初学者,通过阅读和分析给出的源码,...

    AjaxRequest(Ajax使用包)

    **AjaxRequest(Ajax使用包)** Ajax,全称Asynchronous JavaScript and XML(异步JavaScript和XML),是一种在无需重新加载整个网页的情况下,能够更新部分网页的技术。AjaxRequest是实现Ajax功能的一个工具包,它...

    基于ajax相册系统

    4. **监听状态变化**:通过onreadystatechange事件,当请求状态改变时触发回调函数。状态4表示请求已完成,此时可以获取服务器返回的数据。 5. **处理响应**:使用responseText或responseXML属性获取服务器返回的...

    ajax demo ajax实例

    7. **跨域问题**:默认情况下,Ajax请求受到同源策略限制。如果需要跨域,需要服务器端支持CORS(跨源资源共享)。 8. **jQuery的$.ajax()**:jQuery库提供了方便的`$.ajax()`方法,简化了Ajax操作,例如: ```...

    ajax教程

    尽管现代浏览器对Ajax支持良好,但老版本的IE浏览器(尤其是IE6)存在一些兼容性问题。可以通过使用jQuery、Prototype等JavaScript库,或者使用Fetch API来解决这些问题。 **6. 注意事项** - 鉴于同源策略限制,...

    各种版本ajax使用方法及相关问题

    本资料包详细介绍了四种不同版本的Ajax使用方法,以及解决相关问题的经验分享。 1. **jQuery的Ajax使用** jQuery是JavaScript的一个库,它极大地简化了JavaScript的使用,包括Ajax操作。使用`$.ajax()`函数是...

    ajax使用简单demo

    - **跨域问题**:出于安全考虑,浏览器限制了Ajax的跨域请求,除非服务器允许跨域(CORS策略)。 - **浏览器兼容性**:不同浏览器对XMLHttpRequest的支持程度不同,需要使用polyfill(如jQuery的$.ajax)来确保兼容...

    Ajax简介Ajax.API

    * onreadystatechange:存储函数(或函数名),每当 readyState 属性改变时,就会调用该函数 * readyState:存有 XMLHttpRequest 的状态,从 0 到 4 发生变化 * status:存有服务器的状态码 * statusText:存有...

    AJAX_技术总结_设计模式

    jQuery 提供了更简洁的 AJAX API,如 `$.ajax()`, `$.get()`, `$.post()` 等,简化了跨浏览器兼容性问题。 ### 6. Promise 和 AJAX 现代浏览器支持的 `fetch` API 使用 Promise 实现,提供了更优雅的异步处理方式...

    14ajax课程_AJAX基础_

    在使用AJAX时,必须考虑到可能出现的错误,例如网络问题或服务器错误。可以通过检查`status`属性来判断,如404表示未找到资源,500表示服务器内部错误。 ### 8. 跨域请求 由于同源策略的限制,AJAX请求通常只能...

    AJAX 参考手册 ajax 教程

    - **浏览器兼容性**:不同浏览器对 AJAX 支持程度不一,需考虑兼容性问题,尤其是老版本的 IE。 - **安全问题**:AJAX 请求受限于同源策略,无法跨域访问数据。可以通过 CORS(跨源资源共享)解决。 - **用户体验**...

    AJAX安装程序 AJAX安装控件 附详细安装步骤

    七、AJAX跨域问题 由于同源策略限制,AJAX请求通常只能访问同源URL。为了解决跨域问题,可以采用JSONP、CORS或使用服务器端代理。 总结,AJAX技术通过异步数据交换提高了网页交互性,而AJAX安装程序和控件则提供了...

    ajax和js的web开发

    6. **监听状态变化**:使用onreadystatechange事件监听请求状态,当状态变为4(表示请求完成)且状态码为200(表示成功)时,说明请求成功。 7. **处理响应**:获取并解析服务器返回的数据,可以通过responseText或...

    Ajax学习资料 Ajax

    2. **SEO问题**:搜索引擎爬虫可能无法抓取通过Ajax加载的内容。 3. **前进/后退按钮**:如果处理不当,用户可能无法正确使用浏览器的历史记录功能。 在实际应用中,为了简化Ajax的开发,我们可以使用jQuery、axios...

Global site tag (gtag.js) - Google Analytics