自己实现ajax封装示例分享


Posted in Javascript onApril 01, 2014
 //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();
    };
}
Javascript 相关文章推荐
csdn 批量接受好友邀请
Feb 19 Javascript
web网页按比例显示图片实现原理及js代码
Aug 09 Javascript
通过onmouseover选项卡实现img图片的变化
Feb 12 Javascript
js通过八个点 拖动改变div大小的实现方法
Mar 05 Javascript
JS简单获取及显示当前时间的方法
Aug 03 Javascript
javascript 定时器工作原理分析
Dec 03 Javascript
jQuery实现鼠标经过显示动画边框特效
Mar 24 jQuery
浅谈Angular路由复用策略
Oct 04 Javascript
element el-input directive数字进行控制
Oct 11 Javascript
微信二次分享报错invalid signature问题及解决方法
Apr 01 Javascript
JavaScript数组排序小程序实现解析
Jan 13 Javascript
浅谈VUE中演示v-for为什么要加key
Jan 16 Javascript
jquery分页对象使用示例
Apr 01 #Javascript
JavaScript对象的property属性详解
Apr 01 #Javascript
easyui datagrid 键盘上下控制选中行示例
Mar 31 #Javascript
jQuery 取值、赋值的基本方法整理
Mar 31 #Javascript
js改变鼠标的形状和样式的方法
Mar 31 #Javascript
JS 获取浏览器和屏幕宽高等信息代码
Mar 31 #Javascript
js简单的表格添加行和删除行操作示例
Mar 31 #Javascript
You might like
php获得用户ip地址的比较不错的方法
2014/02/08 PHP
PHP数字前补0的自带函数sprintf 和number_format的用法(详解)
2017/02/06 PHP
PHP的mysqli_sqlstate()函数讲解
2019/01/23 PHP
laravel框架中路由设置,路由参数和路由命名实例分析
2019/11/23 PHP
js给页面加style无效果的解决方法
2014/01/20 Javascript
JavaScript通过元素的ID和name设置样式
2014/07/08 Javascript
JavaScript实现数据类型的相互转换
2016/03/06 Javascript
jQuery实现放大镜效果实例代码
2016/03/17 Javascript
javascript实现图片左右滚动效果【可自动滚动,有左右按钮】
2016/09/19 Javascript
JS实现基于拖拽改变物体大小的方法
2018/01/23 Javascript
vue中的provide/inject的学习使用
2018/05/09 Javascript
JS中验证整数和小数的正则表达式
2018/10/08 Javascript
js判断一个对象是数组(函数)的方法实例
2019/12/19 Javascript
Vue中axios拦截器如何单独配置token
2019/12/27 Javascript
vscode 调试 node.js的方法步骤
2020/09/15 Javascript
视觉直观感受若干常用排序算法
2017/04/13 Python
python实现上传下载文件功能
2020/11/19 Python
python利用有道翻译实现"语言翻译器"的功能实例
2017/11/14 Python
Python标准模块--ContextManager上下文管理器的具体用法
2017/11/27 Python
Python subprocess模块常见用法分析
2018/06/12 Python
Django压缩静态文件的实现方法详析
2018/08/26 Python
如何使用pyinstaller打包32位的exe程序
2019/05/26 Python
Selenium 滚动页面至元素可见的方法
2020/03/18 Python
浅谈keras中的keras.utils.to_categorical用法
2020/07/02 Python
美国二手奢侈品寄售网站:TheRealReal
2016/10/29 全球购物
美国时尚大码女装购物网站:Avenue
2019/05/24 全球购物
乌克兰在线药房:Аптека24
2019/10/30 全球购物
一份软件工程师的面试试题
2016/02/01 面试题
《蓝色的树叶》教学反思
2014/02/24 职场文书
安全生产演讲稿
2014/05/09 职场文书
机关干部三严三实心得体会
2014/10/13 职场文书
淮阳太昊陵导游词
2015/02/10 职场文书
降价通知函
2015/04/23 职场文书
活着观后感
2015/06/03 职场文书
党校团干班培训心得体会
2016/01/06 职场文书
2019最新企业员工考勤管理制度(通用版)!
2019/07/02 职场文书