美文网首页
一个最基本Ajax实例

一个最基本Ajax实例

作者: 阿r阿r | 来源:发表于2018-03-27 23:25 被阅读0次

    写了一个最基本的Ajax实例

    // ajax方法
    var param = {
        url:'',
        type: 'get',
        data: {},
        success: function() {},
        error: function() {},
    }
    var ajax = function(param,callback) {
        // 创建ajax
        var xhr = XMLHttpRequest ? new XMLHttpRequest() : new ActiveXObject('Microsoft.XMLHTTP');
    
        //对传入的值进行前期主力,包括type/url/data
        var type = (param.type || 'get').toUpperCase();
        var url = param.url;
        if(!url){
            return;
        }
        var data = param.data,
            dataArr = [];
        for(var k in data) {
            dataArr.push(k + '=' + data[k]);
        }
    
        //为了避免取得的是缓存数据,为其添加一个唯一的id
        dataArr.push('=' + Math.random());
        
        //get还是post。url处理,open()。send()
        if(type === "GET"){
            if(callback){
                url = callback(url,data);
            }else{
                url = url + "?" + dataArr.join("&");
            }
            console.log(url);
            xhr.open(type,url.replace(/\?$/g,''),true);
            xhr.send();
        }else if(type === "POST"){
            xhr.open(type,url,true);
            //像表单一样post数据,使用setRequestHeader来添加头部
            xmlhttp.setRequestHeader("Content-type","application/x-www-form-urlencoded");
            xhr.send(dataArr.join("&"));
        }
        
        //接收请求
        xhr.onreadystatechange = function(){  
            //成功
            console.log(xhr.responseText);
            if(xhr.status === 200 || xhr.status === 304 ){
                var res;
                if(param.success && param.success instanceof Function){
                    // 获取字符串形式的响应数据
                    res = xhr.responseText;
                    if(!isJSON(res)){
                        // 把JSON转换成数组
                        // res = JSON.parse(res);
                        param.success.call(xhr,res);
                    }else{
                        res = JSON.parse(res);
                        param.success.call(xhr,res);
                    }
                }
            }else{
                // 失败
                if(param.error && (param.error instanceof Function)){
                    param.error.call(xhr,res);
                }
            }
        }
    }
    

    相关文章

      网友评论

          本文标题:一个最基本Ajax实例

          本文链接:https://www.haomeiwen.com/subject/heuecftx.html