文档章节

ajax异步处理

sunnyGirl
 sunnyGirl
发布于 2016/11/27 16:27
字数 232
阅读 0
收藏 0

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>Ajax</title>
</head>
<script>
    window.onload=function(){
        //浏览器初试,是否可以有xmlhttprequset 
        /*var xhr=new XMLHttpRequest();
        alert(xhr);*/

//进行浏览器兼容性处理
        function createXHR(){
             if (typeof XMLHttpRequest!="undefined") {
                 return new XMLHttpRequest();
             }else if (typeof ActiveXObject!="undefined") {
                 var version=[
                           "MSXML2.XMLHttp.6.0"
                         // "MSXML2.XMLHttp.3.0"
                         // "MSXML2.XMLHttp"
                 ];
                 for (var i = 0;version.length;i++) {
                      try{
                     return new ActiveXObject(version[i])
                          }catch(e){

                      }
                 }
             }else{
                 throw new Error("浏览器不支持")
             }
        }
    //点击文档进行异步操作     
         document.addEventListener("click",function(){
           var XHR=createXHR();  //创建XHR对象

//检查浏览器的状态,进行异步处理
           XHR.onreadystatechange=function(){
    if(XHR.status==200&&XHR.readyState==4){
           alert(XHR.responseText);
    }
           }
          XHR.open("GET","test.php",true); //准备发送请求
          XHR.send(null);  //发送请求,get不需要数据提交,填写null
          /*alert(XHR.responseText)*/
     })

        //第二种方法
     /*  var btn=document.getElementById("btn")
     btn.onclick= function (){
            var xmlHttpReq=null;
            if (window.ActiveXObject) {
             xmlHttpReq=new ActiveXObject("Microsoft.XMLHttp")
            }else if (window.XMLHttpRequest) {
                xmlHttpReq=new XMLHttpRequest();
            }
            xmlHttpReq.open("GET","test.php",true);
            xmlHttpReq.onreadystatechange=RequestCallBack;
            xmlHttpReq.send(null);
            function RequestCallBack(){
                if(xmlHttpReq.readyState==4&&xmlHttpReq.status==200){
                document.getElementById("test").innerHTML=xmlHttpReq.responseText;
                }
            }
        }
    */
     

    }
</script>
<body>
     <input type="button" value="Ajax提交" id="btn">
     <div id="test"></div>
</body>
</html>

© 著作权归作者所有

共有 人打赏支持
sunnyGirl
粉丝 0
博文 9
码字总数 3863
作品 0
武汉
基于jquery的全局ajax函数处理session过期后的ajax操作

做web常常需要考虑session过期的问题,session过期就让页面跳转到登录界面去,但是存在这样一个问题,当页面过期后,用户请求后台的方式有两种:传统方式和异步请求方式,传统方式倒好解决,...

十月阳光
2014/01/19
0
0
JQuery——实现Ajax应用

实现Ajax应用 1 .load()异步请求数据,通过Ajax请求加载服务器中的数据,并把返回的数据放置到指定的元素中,调用格式为load(url,[data],[callback]) 2 参数url为加载服务器地址,可选项dat...

拉考的考拉
2017/11/23
0
0
Java中解决(extjs或jquery)session过期退出登录问题

解决两种情况下的用户访问超时: a)普通http请求的session超时; b)异步http请求的session超时,如果使用extjs后大部分的界面刷新都是异步的ajax请求。 不管是那种类型的http请求总是可以由...

Junn
2013/09/24
0
0
AJAX基础之JavaScript基础与增强(二)

一,Ajax究竟是个什么东西 用来描述一组技术,它使浏览器可以为用户提供更为自然的浏览体验。 简单一句话 不刷新页面与服务器通讯的技术 在Ajax之前,Web站点强制用户进入提交/等待/重新显示...

architect刘源源
05/08
0
0
Java——Ajax+Tomcat完成异步请求

Ajax最为网页异步交互技术相信大家并不陌生,这里我也不做过多介绍,详情点击(百度百科)。很多框架也封装了Ajax技术,使用起来更加简单,比如jQuery等等,这里为了了解原理,我们使用原生的...

邵鸿鑫
2015/10/30
0
0

没有更多内容

加载失败,请刷新页面

加载更多

使用JavaScript ES6的新特性计算Fibonacci(非波拉契数列)

程序员面试系列 Java面试系列-webapp文件夹和WebContent文件夹的区别? 程序员面试系列:Spring MVC能响应HTTP请求的原因? Java程序员面试系列-什么是Java Marker Interface(标记接口) 使...

JerryWang_SAP
26分钟前
2
0
docker安装redis、mongodb、mysql等

一、启动docker服务,设置镜像: systemctl start dockervi /etc/docker/daemon.json{ "registry-mirrors": ["https://registry.docker-cn.com"]} 二、下拉镜像: 在镜像中心h...

狼王黄师傅
50分钟前
1
0
deepin系统使用deepin-wine安装exe程序

deepin自带原生deepin-wine使用命令如下: deepin-wine QQBrowser.exedeepin-wine QQMusicSetup.exe 默认安装的快捷方式位置: /root/.wine/drive_c/'Program Files'/Tencent/QQBrowser/......

临江仙卜算子
今天
4
0
快速get到学习Linux操作系统的点

快速get到学习Linux操作系统的点 Linux是一套免费使用和自由传播的类Unix操作系统,是一个基于POSIX和UNIX的多用户、多任务、支持多线程和多CPU的操作系统。Linux能够运行主要的UNIX工具软件...

linuxCool
今天
3
0
聊聊:Linux分区的那些方案

安装linux的整体步骤其实比较简单,唯一可能值得说明的地方,大概就是linux的分区了。 下面来给大家推荐一些分区方案。 1 分两个区 实际上,很多时候我们只需要分两个区:`/`和交换分区,日常...

Linux就该这么学
今天
3
0

没有更多内容

加载失败,请刷新页面

加载更多

返回顶部
顶部