关闭

如何自己封装一个Ajax类

标签: ajaxjavascript
174人阅读 评论(0) 收藏 举报
分类:

其实也算不上封装吧,晚上无聊的时候拿起之前的JavaScript高级程序设计出来看,正好看到了Ajax这一章,就想自己写一个Ajax类玩玩。也没有经过测试,因为时间太晚了,就先发出来吧,如果有小伙伴看见哪里有问题的话,欢迎指正一下。等我过段时间看完了这一章再去把它丰满一下。。。

/**
 * Created by k on 16/8/28.
 */
/**
 * 创建的一个Ajax类,包装了createXHR,handleStateChange,addUrlParam,send方法
 * @param method Ajax类请求的方式
 * @param async 是否异步,true 表示异步,false表示同步;
 * @param postData 当使用post时需要请求的数据
 * @constructor 
 */
var Ajax=function (method,url,async,postData) {
    this._method=method;
    this._url=url;
    this._async=async;
    this._postData=postData;
    //创建一个xhr对象;
    this._xhr=this.createXHR();
    if(this._xhr==null)
    {
        return;
    };
    var obj=this
    this._xhr.onreadystatechange=function (obj) {
        Ajax.handleStateChange(obj);
    };


}
Ajax.prototype.createXHR=function () {
    if(typeof XMLHttpRequest !="undefined")
    {
        return new XMLHttpRequest();
    }
    else if(typeof ActiveXObject !="undefined")
    {
        var versions=["MSXML2.XMLHttp.6,0","MSXML2.XMLHttp.3.0","MSXML2.XMLHttp"];
        var i;
        var len;
        if(typeof arguments.callee.activeXString !="string")
        {
            try{
                for(var i=0;i<versions.length;i++)
                {
                    return new ActiveXObject();
                    arguments.callee.activeXString=versions[i];
                    break;
                }
            }
            catch (e)
            {
                console.log(e);
            }
        }
        return new ActiveXObject(versions[i]);
    }
    else
    {
        throw new Error("there is no xhr object");
    }
}
Ajax.handleStateChange=function (obj) {
    if(obj._xhr.readyState==400)
    {
        if(obj._xhr.status>=200&&obj._xhr.status<300||obj._xhr.status==304)
        {
            console.log(obj._xhr.responseText);
        }
        else
        {
            console.log("Resquest wa not successful:"+obj._xhr.status);
        }
    }
};
Ajax.prototype.addUrlParam=function (url,name,value) {
    //检查URL是否包含"?",如果没有就加一个,如果有就加一个"&";
    url+=url.indexOf("?")=="-1" ? "?":"&";
    //将name和value分别进行编码,然后添加到url末尾:
    url+=decodeURIComponent(name)+"="+decodeURIComponent(value);
    return url;
};
Ajax.prototype.send=function () {
    if(this._xhr!=null)
    {
        this._xhr.open(this._method,this._url,this._async);
        if(this._method.toLocaleUpperCase()=="GET")
        {
            this._xhr.send(null);
        }
        else if(this._method.toLocaleString()=="POST")
        {
            this._xhr.send(this._postData);
        }
        else {
            return;
        }
    }
};



0
0

查看评论
* 以上用户言论只代表其个人观点,不代表CSDN网站的观点或立场
    个人资料
    • 访问:20216次
    • 积分:539
    • 等级:
    • 排名:千里之外
    • 原创:27篇
    • 转载:1篇
    • 译文:0篇
    • 评论:1条
    文章分类
    最新评论