Ajax笔记03初步封装

一，封装过程：
1，初步封装整体流程：
（1提取url地址,2提取请求方式type(get或者post),3true异步不用提取一般用的比较少,
4不同的业务逻辑在回调函数离处理,出入匿名函数callback参数,在回调函数尾部进行调用.）

function ajax(url,type,callback){
    var xhr = null;
    if(window.XMLHttpRequest){
        xhr = new XMLHttpRequest();
    }else{
        xhr = new ActiveXObject('Microsoft.XMLHTTP');
    }
     xhr.open(type,url,true);
    xhr.send(null);
    xhr.onreadystatechange = function(){
        if(xhr.readyState == 4){
            if(xhr.status == 200){
                var data = xhr.responseText;
                 callback(data);
            }
        }
    }
}

回调函数内封装，可以在html页面进行函数调用，得到数据渲染html页面。
对应的html页面：

2，兼容性封装处理：
（5传入param参数，拼接到type类型中。6，dataType数据类型，并判断
）

function ajax(url,type,param,dataType,callback){
    var xhr = null;
    if(window.XMLHttpRequest){
        xhr = new XMLHttpRequest();
    }else{
        xhr = new ActiveXObject('Microsoft.XMLHTTP');
    }
    if(type == 'get'){//get请求
        url += "?" + param;
    }
    xhr.open(type,url,true);

    var data = null;
    if(type == 'post'){//post请求
        data = param;
        xhr.setRequestHeader("Content-Type","application/x-www-form-urlencoded");
    }
    xhr.send(data);
    xhr.onreadystatechange = function(){
        if(xhr.readyState == 4){
            if(xhr.status == 200){
                var data = xhr.responseText;
                if(dataType == 'json'){
                    data = JSON.parse(data);
                }
                callback(data);
            }
        }
    }
}

html页面：

对应php页面