简单仿jQuery Ajax

本文介绍了一个简单的AJAX实现方法,包括GET和POST请求处理、超时处理及不同数据类型的响应处理。通过示例代码展示了如何配置请求参数并处理服务器响应。

摘要生成于 C知道 ,由 DeepSeek-R1 满血版支持, 前往体验 >

var SX = {
        keyword : ["url", "type", "timeout", "asyn", "beforeSend", "cache", "complete", "contentType", "data",
            "dataType", "error", "global", "processDate", "success"],//定义用到的关键字
        _XMLHttpRequest : null,
        _errorThrown : null,
        Timeout : function (){
            SX.Timeout = setTimeout(function(){
                SX._Ajax.error(SX._XMLHttpRequest, SX._XMLHttpRequest.statusText, SX._errorThrown); //回调出错函数
                SX._XMLHttpRequest.abort(); //终止本次请求
            }, SX._Ajax.timeout);    
        },
        Ajax : function (obj){
            for(var o in obj) { //得到参数
                for(var i = 0; i < SX.keyword.length; i++) {
                    if(o == SX.keyword[i]) {
                        SX._Ajax[o] = obj[o];
                    }
                }
            }
            
            SX.XHR(); //初始化XHM对象
            
            SX._XMLHttpRequest.onreadystatechange = function (){ //设置回调函数
                if (SX._XMLHttpRequest.readyState == 4){
                    clearTimeout(SX.Timeout); //清除记时器
                    if (SX._XMLHttpRequest.status == 200){ //成功回调
                        switch(SX._Ajax.dataType) {
                            case 'text' :
                                SX._Ajax.success(SX._XMLHttpRequest.responseText, SX._XMLHttpRequest.statusText);
                            break;
                            case 'json' :
                                eval('var JSON =' + SX._XMLHttpRequest.responseText); //生成JSON对象
                                SX._Ajax.success(JSON, SX._XMLHttpRequest.statusText);
                            break;
                            case 'jsonp' :
                                SX._Ajax.success(SX._XMLHttpRequest.responseText, SX._XMLHttpRequest.statusText);
                            default :
                            break;
                        }
                    } else {
                        SX._Ajax.complete(SX._XMLHttpRequest, SX._XMLHttpRequest.statusText); //错误响应
                    }
                }
            }    
            
            if(SX._Ajax.type == 'GET') {
                SX.GetStart(); //Get开始运行
                if(SX._Ajax.timeout != 0) {
                    SX.Timeout(); //开始计算超时
                }
            } else {
                SX.PostStart(); //Post开始运行
                if(SX._Ajax.timeout != 0) {
                    SX.Timeout(); //开始计算超时
                }
            }
            
        },
        _Ajax : { //代理对象,拥有部分默认配置
            url : '',
            type : 'GET',
            timeout : 0,
            asyn : true,
            beforeSend : function (_XMLHttpRequest){ },
            cache : false,
            complete : function (_XMLHttpRequest, _textStatus){    },
            contentType : 'application/x-www-form-urlencoded',
            data : {},
            dataType : 'text',//xml,html,script,json,jsonp
            error : function (_XMLHttpRequest, _textStatus, _errorThrown){ },
            global : false,
            processDate : true,
            success : function (data, _textStatus){ }
        },
        XHR : function (){
            if(window.XMLHttpRequest) { //W3C
                SX._XMLHttpRequest = new XMLHttpRequest();
            } else if(window.ActiveXObject){ //IE
                SX._XMLHttpRequest = new ActiveXObject('Microsoft.XMLHTTP');
            }
            if(!SX._XMLHttpRequest) {
                try {
                    throw new Error('Create XMLHttpRequest Object error!');
                } catch (e) {
                    SX._errorThrown = {}; //初始化一个代理的错误对象
                    SX._errorThrown.message = e.message;
                }
            }
        },
        GetStart : function (){
            var url = SX._Ajax.url;
            url += '?';
            for(var param in SX._Ajax.data) {
                url += param + '=' + SX._Ajax.data[param] + '&';
            }
            url = url.substr(0, url.length-1); //得到拼凑好的URL串
            if(SX._Ajax.cache) { //如果不要缓存
                url += "&__SX__=" + Math.random();
            }
            SX._XMLHttpRequest.open(SX._Ajax.type, url, SX._Ajax.asyn);
            SX._XMLHttpRequest.send(null);
        },
        PostStart : function (){
            var dataParam = '';
            for(var param in SX._Ajax.data) {
                dataParam += param + '=' + SX._Ajax.data[param] + '&';
            }
            dataParam = dataParam.substr(0, dataParam.length-1); //得到拼凑好的URL串
            if(SX._Ajax.cache) { //每次进行新的请求
                dataParam += "&__SX__=" + Math.random();
            }
            SX._XMLHttpRequest.open(SX._Ajax.type, SX._Ajax.url, SX._Ajax.asyn);
            SX._XMLHttpRequest.setRequestHeader('Content-Type', SX._Ajax.contentType);
            SX._XMLHttpRequest.send(dataParam);
        }
    }

评论
添加红包

请填写红包祝福语或标题

红包个数最小为10个

红包金额最低5元

当前余额3.43前往充值 >
需支付:10.00
成就一亿技术人!
领取后你会自动成为博主和红包主的粉丝 规则
hope_wisdom
发出的红包
实付
使用余额支付
点击重新获取
扫码支付
钱包余额 0

抵扣说明:

1.余额是钱包充值的虚拟货币,按照1:1的比例进行支付金额的抵扣。
2.余额无法直接购买下载,可以购买VIP、付费专栏及课程。

余额充值