`
jia5286112
  • 浏览: 11502 次
  • 性别: Icon_minigender_1
  • 来自: 西安
社区版块
存档分类
最新评论

Ajax同一页面同时执行多个XMLHTTP (1)

    博客分类:
  • AJAX
阅读更多
1.第二个请求延时几秒执行,可避免第一个请求还没执行完就被覆盖
<html>
<head>
<meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
<title>AJAX同一页面加载多个测试</title>
<script language="JavaScript">
var xmlHttp;
function createXMLHttpRequest() {
     if (window.XMLHttpRequest){               //FireFox
            xmlHttp = new XMLHttpRequest();
          }
     else if(window.ActiveXObject){
           try {
           xmlHttp = new ActiveXObject("Microsoft.XMLHTTP");   //IE6
          }catch(e){
           try {
           xmlHttp = new ActiveXObject("Msxml2.XMLHTTP");      //IE7
          }catch (e){
           alert('对不起,本页面只支持IE6,IE7,FireFox');
          }
      }
   }
}
function startRequest(tn,what) {
    createXMLHttpRequest();
    if(what=='msg1'){
        alert('第一次开始了');
    }else{
        alert('第二次开始了');
    }
    xmlHttp.onreadystatechange = function(){handleStateChange(what);};
    xmlHttp.open("GET", "test2.jsp?tn="+tn, true);
    xmlHttp.send(null);
}
function handleStateChange(what) {
    if(xmlHttp.readyState == 4) {
        if(xmlHttp.status == 200) {
             if(what=='msg1'){
                    alert('第一次回调');
                }else{
                    alert('第二次回调');
                }
            var result = xmlHttp.responseText;
            document.getElementById(what).innerHTML = result;
        }
    }
    else {
         document.getElementById(what).innerHTML = "正在载入...";
    }
}
function myload(){
  startRequest('sort_jiaoyi','msg1');
  setTimeout("startRequest('sort_fangwu','msg2')",2000);  //延时2秒后执行,在IE7下竟然不需要延时处理...
}
</script>
</head>
<body onLoad="myload();">
<table>
<tr><td>
<div id="msg1" style="width:300px; background:#0099FF"></div>
</td></tr>
<tr><td>
<div id="msg2" style="width:300px; background:#66FF33"></div>
</td></tr>
</table>
</body>
</html>
分享到:
评论

相关推荐

    防止一个用户登录多次的方法

    在JavaScript中,创建一个XMLHTTP实例,当用户关闭页面时发送注销请求,然后关闭当前窗口。这种方法减少了对浏览器特定行为的依赖,通常能提供更一致的结果。 这两种方法的主要目标都是在用户未通过正常注销流程...

    JavaScript 之Ajax详解

    Ajax技术的核心在于它提供了一种无需刷新整个页面就能获取并处理服务器数据的方式,从而提升了用户体验。通过XMLHttpRequest对象,开发者可以构建出更加动态和交互性强的Web应用。在实际应用中,还应考虑错误处理、...

    新手练习 Ajax请求封装进JavaScript类

    然而,如果你希望支持并发请求,可以创建多个`AjaxRequest`实例,每个实例对应一个独立的请求。例如: ```javascript const request1 = new AjaxRequest('url1'); const request2 = new AjaxRequest('url2'); ...

    AJAX示例

    1. **跨域问题**:在开发过程中需要注意跨域问题,确保请求的目标URL与当前网页位于同一域内,或者服务器端配置了正确的CORS(Cross-Origin Resource Sharing)策略。 2. **错误处理**:在示例中,只简单地处理了...

    ajax 基础教程

    总结来说,AJAX通过XMLHttpRequest对象实现了网页的异步更新,提高了用户体验,而无需刷新整个页面。通过理解这些基础知识,你可以开始构建自己的AJAX应用程序。不过,实际开发中还需要考虑更多的细节,比如错误处理...

    浅谈JS原生Ajax,GET和POST

    GET请求常用于获取服务器上的资源,它是无状态且幂等的,意味着多次执行同一请求将产生相同的结果。在示例代码中,`getLabelsGet`函数演示了如何创建GET请求: 1. **创建XMLHttpRequest对象**:这是所有AJAX操作的...

    原生 JS Ajax,GET和POST 请求实例代码

    原生JavaScript中的Ajax技术是实现页面无刷新通信的关键,它允许网页在后台与服务器进行数据交换,无需重新加载整个页面。Ajax(Asynchronous JavaScript and XML)虽然名字中有XML,但现代实践中更多的是使用JSON...

    原生JS简单实现ajax的方法示例

    3. 异步处理:由于AJAX是异步的,因此可能需要处理多个并发请求,确保它们按预期顺序执行。 4. 缓存控制:有时可能需要禁用或启用缓存,可以通过设置HTTP头来实现。 总的来说,原生JavaScript实现AJAX涉及的主要...

    XMLHttpRequest中文参考手册(13)

    如果在多次尝试中获取同一头部信息,可能需要在每次`send`调用后重新调用`getResponseHeader`。此外,由于涉及到跨域安全问题,某些头部信息可能无法通过`getResponseHeader`获取,这取决于服务器的CORS(Cross-...

    《程序天下:JavaScript实例自学手册》光盘源码

    第1章 页面特效 1.1 HTML页面反向显示 1.2 页面自动最大化 1.3 页面自动刷新 1.4 页面的后退、刷新、前进 1.5保护网页源代码 1.6 保护自己的网页不被放入框架 1.7 保护自己的网页不被放入框架 1.8 打印页面的出错...

    程序天下:JavaScript实例自学手册

    第1章 页面特效 1.1 HTML页面反向显示 1.2 页面自动最大化 1.3 页面自动刷新 1.4 页面的后退、刷新、前进 1.5保护网页源代码 1.6 保护自己的网页不被放入框架 1.7 保护自己的网页不被放入框架 1.8 打印页面的出错...

    Js+Ajax,Get和Post在使用上的区别小结

    - GET请求可被浏览器缓存,且可安全地重复执行,因为其是幂等的,多次请求同一个URL应该得到相同的结果。 - POST请求通常不会被浏览器缓存,也不应被重复提交,因为它可能导致副作用,比如多次购买同一件商品。 4...

    java 面试题搜集

    1. **JavaScript的XMLHttpRequest**:XMLHttpRequest是JavaScript中用于异步向服务器发送请求的关键对象,通常用于AJAX(Asynchronous JavaScript and XML)操作。创建一个新的XMLHttpRequest对象,如`new ...

    js同源策略详解

    它最早出自Netscape Navigator2.0,其目的是防止某个文档或脚本从多个不同源装载。 这里的同源指的是:同协议,同域名和同端口。 精髓: 它的精髓很简单:它认为自任何站点装载的信赖内容是不安全的。当被浏览器...

    IE、FF、Chrome浏览器中的JS差异介绍

    这导致在编写兼容多浏览器的Ajax请求代码时,必须进行判断和适配: ```javascript var xhr; if (window.ActiveXObject) { xhr = new ActiveXObject("Microsoft.XMLHTTP"); } else { xhr = new XMLHttpRequest(); ...

Global site tag (gtag.js) - Google Analytics