`
roky
  • 浏览: 3979 次
  • 性别: Icon_minigender_1
  • 来自: 深圳
社区版块
存档分类
最新评论

ajax异步处理多个请求是出现的问题

阅读更多

ajax异步处理多个请求是出现的问题,例如连续的两个输入框,两个都要通过计算获取相应的值,当离开第一个输入框的时候,执行第二个输入框的时候出现了问题,都到了并不是需要的值,只是暂时解决这种问题,把异步换成了同步。然后找了些资料,然来是XMLHttpRequest 设置了全局变量,多次请求的时候每个请求都要用到这个对象,ajax又是异步的,无法事先确定哪个先后。

原来:
function getXMLHttpRequest(){ 
var xmlHttpRequest = null;
 if (window.XMLHttpRequest) {  
   xmlHttpRequest = new XMLHttpRequest(); 
} else if (window.ActiveXObject) {   
  http_request = new ActiveXObject("Microsoft.XMLHTTP"); 

return xmlHttpRequest;
}
functiong getXXX(){
xmlHttpRequest = getXMLHttpRequest();   
xmlHttpRequest.onstatechange = handleResponse; 
xmlHttpRequest.open("GET", "url", null); 
xmlHttpRequest.send();
}
function handleResponse(){ 
if(xmlHttpRequest.readyState != 4) return;
 if(xmlHttpRequest.status == 200){  
 var xml = xmlHttpRequest.responseXML;   
  }
}

修改后,把XMLHttpRequest 设置了局部变量

function getXMLHttpRequest(){ 
var xmlHttpRequest = null;
 if (window.XMLHttpRequest) {  
   xmlHttpRequest = new XMLHttpRequest(); 
} else if (window.ActiveXObject) {   
  http_request = new ActiveXObject("Microsoft.XMLHTTP"); 

return xmlHttpRequest;
}
functiong getXXX(){
xmlHttpRequest = getXMLHttpRequest();   
xmlHttpRequest.onstatechange = handleResponse.setThis(xmlHttpRequest);  
xmlHttpRequest.open("GET", "url", null); 
xmlHttpRequest.send();
}

Function.prototype.setThis(){ 
var curr_function = this; 
var to_this_object = arguments[0]; 
return function(){  
 curr_function.apply(to_this_object, []);
 };
}

function handleResponse(){ 
if(xmlHttpRequest.readyState != 4) return;
 if(xmlHttpRequest.status == 200){  
 var xml = xmlHttpRequest.responseXML;   
  }
}

ps:这是刚用ajax出现的问题,现在ajax框架有很多了,用起来也比较方便,不用这么繁琐

分享到:
评论

相关推荐

    Ajax异步请求的验证

    Ajax异步请求的验证涉及多个方面,包括请求状态的检查、数据解析、错误处理以及跨域策略。熟练掌握这些知识点,能帮助开发者更好地构建高效、响应式的Web应用。在实践中,可以参考提供的`ajax-demo`代码,通过实际...

    Ajax异步请求简单示例

    总的来说,Ajax异步请求能够实现不刷新整个页面的情况下与服务器通信,提高用户体验。通过JavaScript和Java的配合,我们可以构建动态、高效的Web应用。这个示例提供了一个基础的Ajax请求流程,实际应用中,可能需要...

    解决Ajax 发送多个请求引发的并发问题

    3. 数据竞争:如果多个请求修改同一份数据,未正确处理的情况下可能会导致数据不一致。 二、解决并发问题的方法 1. 同步请求:将Ajax请求设置为同步(async: false),这样可以确保请求按照发出的顺序执行。但这种...

    Ajax异步调用框架

    这个Ajax异步调用框架适用于简单的数据获取和页面局部更新,但现代Web开发中,更常见的是使用jQuery、axios、fetch等库来简化Ajax操作,它们提供了更友好的API和更好的兼容性。例如,jQuery的`$.ajax()`方法或者...

    AjAX异步页面处理技术

    当用户触发一个需要异步处理的事件(如点击按钮),JavaScript会通过XMLHttpRequest发送一个HTTP请求到服务器。与此同时,用户可以继续在页面上进行其他操作,不会被当前请求阻塞。服务器接收到请求后处理数据,并将...

    ajax 异步 拼接表

    本文将通过一个具体的案例——“ajax异步拼接表”,来详细介绍如何使用AJAX进行异步传参获取JSON,并循环拼接表头和数据进行展示。 #### 二、案例背景及需求分析 假设我们有一个包含服务记录的数据库表,每次点击...

    Ajax异步处理封装

    本文将深入讲解Ajax异步处理封装的相关知识。 一、Ajax原理 1. 创建XMLHttpRequest对象:在所有支持Ajax的浏览器中,首先我们需要创建一个XMLHttpRequest对象,它是Ajax的核心,负责与服务器进行通信。 2. 发起...

    利用Ajax+Jquery实现异步进度条效果

    总结来说,"利用Ajax+Jquery实现异步进度条效果"是一个综合性的技术实践,涵盖了C#、.NET框架、Ajax和Jquery等多个技术领域,旨在通过实时反馈提高用户交互体验。理解并掌握这些技术,对于开发高效、用户友好的Web...

    AJAX异步调用代码

    综上所述,这段AJAX异步调用代码示例不仅展示了前后台数据同步的基本流程,还涉及了DOM操作、错误处理等多个重要知识点,对于理解和应用AJAX技术具有较高的参考价值。在日常开发中,灵活运用这些知识,可以有效提升...

    ajax异步获取数据

    `Ajax2`可能是一个包含更复杂Ajax交互的示例,比如使用了多个请求或者处理更复杂的服务器响应。这可能涉及到分页、数据过滤、错误处理优化等高级用法。 - **分页**:如果数据量大,可以使用Ajax来分页加载,每次只...

    ajax异步上传文件实现

    在实际项目中,你可能还需要考虑错误处理、文件大小限制、多文件上传、以及安全性等问题。 至于提供的压缩包文件“package.xml”和“xhprof-0.9.2”,它们似乎与Ajax异步文件上传的主题不直接相关。“package.xml”...

    Ajax异步(请求)提交类 支持跨域

    - **异步处理**:支持多个异步请求的并发处理,提高了效率。 #### 结论 本例中的异步请求类通过引入代理服务器的方式解决了Ajax的跨域问题,为Web开发者提供了一种实用的解决方案。开发者可以根据实际需求调整和...

    Ajax异步无刷新登录实例

    综上所述,这个Ajax异步无刷新登录实例展示了如何使用C#和ASP.NET构建一个交互式的、无需页面刷新的登录系统。开发者通过学习这个实例,可以了解到如何使用Ajax技术和C#后台代码协同工作,以提升用户体验并优化Web...

    ajax实现异步刷新

    本教程将通过一个具体的例子来讲解如何在ASP.NET环境中实现Ajax异步刷新。 首先,`Default2.aspx`和`Default.aspx`是ASP.NET中的两个网页文件,它们通常包含HTML、CSS和JavaScript代码,用于构建用户界面。`Default...

    ajax.net异步调用

    - **WebServices**:创建独立的 ASMX 文件,提供 AJAX 友好的服务接口,可以在多个页面中复用。 ### 五、总结 Ajax.NET 异步调用是 .NET 开发人员提高用户体验的重要工具。通过 UpdatePanel、ScriptManager 和其他...

    异步 提交表单请求

    随着Fetch API和Promise的出现,以及Vue、React等现代前端框架对异步处理的优化,异步提交表单请求变得更加高效和易于管理。同时,WebSockets等双向通信技术进一步实现了实时数据交换,让异步请求的应用场景更加...

    ajax异步 网页无刷新

    在Ajax应用中,HTML页面通常包含一个或多个用户交互元素,如按钮、链接或表单,这些元素会触发Ajax请求。 2. **JavaScript**:JavaScript是实现Ajax功能的关键,它负责监听用户的交互事件,如点击按钮。当事件发生...

    Ajax 异步传输应用

    **Ajax(Asynchronous JavaScript and XML)异步传输技术是Web开发中的一个重要概念,它使得网页可以在不刷新整个页面的情况下与服务器进行数据交换,提升了用户体验。本文将深入探讨Ajax的工作原理、应用场景以及...

    SpringMVC+Ajax异步文件上传

    2. **Ajax异步文件上传** - **FormData对象**:在前端,我们需要使用`FormData`对象来封装待上传的文件,然后通过`XMLHttpRequest`或`fetch` API来发送异步请求。 - **事件监听**:`Ajax`可以监听文件上传的进度,...

    H5移动端上滑加载,带ajax异步请求后台数据,拿来即用

    以上就是关于H5移动端上滑加载结合Ajax异步请求后台数据的详细解释,这个功能不仅提高了用户体验,也为开发者提供了高效的数据加载解决方案。通过合理的优化和实施,可以在不牺牲性能的前提下,带给用户流畅、连续的...

Global site tag (gtag.js) - Google Analytics