自己实现ajax封装示例分享

 更新时间:2014年04月01日 14:33:45   作者:  
这篇文章主要介绍了自己实现ajax封装示例,需要的朋友可以参考下

复制代码 代码如下:

 //javascript Object: ajax Object
//Created By RexLee
function Ajax(url,data){
    this.url=url;
    this.data=data;
    this.browser=(function(){  
        if(navigator.userAgent.indexOf("MSIE")>0) {  
            return "MSIE";//IE浏览器
        }else{
            return "other";//其他
    }})();
};
Ajax.prototype={
    get:function(){
        var result;
        var xmlhttp;
        if(this.browser=='MSIE'){
            try{
                xmlhttp=new ActiveXObject('microsoft.xmlhttp');
                }catch(e){
                    xmlhttp=new ActiveXObject('msxml2.xmlhttp');
                    }
            }else{
                xmlhttp=new XMLHttpRequest();
            };
        xmlhttp.onreadystatechange=function(){
            result = xmlhttp.responseText;//闭包,不能采用this.属性
        };
        xmlhttp.open('GET',this.url+'?'+this.data,false);//true无法抓取数据,why?
        xmlhttp.send(null);
        return result;
    },
    post:function(){
        var result;
        var xmlhttp;
        if(this.browser=='MSIE'){
            xmlhttp=new ActiveXObject('microsoft.xmlhttp');
            }else{
                xmlhttp=new XMLHttpRequest();
            };
        xmlhttp.onreadystatechange=function(){
            result = xmlhttp.responseText;//闭包,不能采用this.属性
        };
        xmlhttp.open('POST',this.url,false);//需设为false,否则无法抓取responseText
        xmlhttp.setRequestHeader("Content-Type","application/x-www-form-urlencoded");//POST中,这句必须
        xmlhttp.send(this.data);
        return result;
    }
};

//var a=new ajax('opp2.js','');
//alert('by GET\\n'+a.get())
//alert('by POST\\n'+a.post());
///////////////////////////////

 

window.onload=function(){
document.getElementById("btn").onclick=function(){
    var p=document.getElementById("t").value;
    var a=new Ajax("phpOOP/getPage.php","page="+p);
    document.getElementById("box").innerHTML=a.get();
    };
}

相关文章

  • 原生JS实现微信通讯录

    原生JS实现微信通讯录

    这篇文章主要为大家详细介绍了原生JS实现微信通讯录,文中示例代码介绍的非常详细,具有一定的参考价值,感兴趣的小伙伴们可以参考一下
    2020-06-06
  • Javascript中Eval函数的使用

    Javascript中Eval函数的使用

    eval()函数,这个函数可以把一个字符串当作一个JavaScript表达式一样去执行它。
    2010-03-03
  • 原生JS实现动态加载js文件并在加载成功后执行回调函数的方法

    原生JS实现动态加载js文件并在加载成功后执行回调函数的方法

    这篇文章主要介绍了原生JS实现动态加载js文件并在加载成功后执行回调函数的方法,涉及javascript动态创建页面元素、事件监听、回调函数使用等相关操作技巧,需要的朋友可以参考下
    2018-09-09
  • js原生map实现的方法总结

    js原生map实现的方法总结

    在本篇文章里小编给大家整理了关于js原生map实现的方法以及实例分析内容,需要的朋友们可以参考下。
    2020-01-01
  • JS基于VUE组件实现城市列表效果

    JS基于VUE组件实现城市列表效果

    这篇文章主要为大家详细介绍了JS基于VUE组件实现城市列表效果,文中示例代码介绍的非常详细,具有一定的参考价值,感兴趣的小伙伴们可以参考一下
    2021-08-08
  • uniapp中刷新本页面的三种方法

    uniapp中刷新本页面的三种方法

    这篇文章主要给大家介绍了关于uniapp中刷新本页面的三种方法,刷新页面的具体逻辑可以根据实际需求进行编写,文中通过代码介绍的非常详细,需要的朋友可以参考下
    2023-10-10
  • HTML5之WebSocket入门3 -通信模型socket.io

    HTML5之WebSocket入门3 -通信模型socket.io

    socket.io能为程序员提供客户端和服务端一致的编程体验,socket.io支持任何的浏览器,任何的Mobile设备。下面通过本篇文章给大家讲解HTML5之WebSocket入门3 -通信模型socket.io,需要的朋友可以参考下
    2015-08-08
  • 一文详解TypeScript中的内置数据类型

    一文详解TypeScript中的内置数据类型

    作为一门类型安全的编程语言,TypeScript 提供了多种内置数据类型,帮助我们更好地定义和操作数据,下面小编就来和大家详细聊聊这些数据类型的相关知识吧
    2023-06-06
  • Javascript中for循环语句的几种写法总结对比

    Javascript中for循环语句的几种写法总结对比

    如果您希望一遍又一遍地运行相同的代码,并且每次的值都不同,那么使用循环是很方便的,javascript中for循环也是非常常用的,下面这篇文章主要介绍了Javascript中for循环的几种写法,需要的朋友可以参考借鉴,一起来看看吧。
    2017-01-01
  • 一个html5播放视频的video控件只支持android的默认格式mp4和3gp

    一个html5播放视频的video控件只支持android的默认格式mp4和3gp

    写了个html5播放视频的video控件,只支持mp4和3gp(android和ios默认支持的格式就写了这个) ,需要的朋友可以参考下
    2014-05-05

最新评论