Ajax发送网络请求包装

Ajax发送网络请求封装

GET请求的封装

主要处理：
（1）创建请求对象（兼容性处理）
（2）设置请求路径和请求方法
    01 处理参数（把对象中的键值对转换为数组后连接）
    02 处理GET请求缓存（增加随机因子参数）
    03 处理中文转码问题（EncodeURI）
（3）发送请求
（4）监听请求状态（请求状态==4判断响应码）
（5）处理请求成功和失败的回调

示例代码

function get(url,obj,successCallBack,errorCallBack) {
        //01 创建请求对象
        var xmlHttp;
        if(window.XMLHttpRequest)
        {
            xmlHttp = new XMLHttpRequest();
        }else
        {
            xmlHttp = new ActiveXObject("Microsoft.XMLHTTP");
        }

        //02 设置请求路径
        //0201 处理参数(把对象中的键值对进行转换)
        var arrM = [];
        for(var key in obj)
        {
            arrM.push(key+"="+obj[key]);
        }

        //0202 处理GET请求在IE浏览器中的缓存问题
        arrM.push("tn="+ Math.random());;

        var objRes = arrM.join("&");
        url = url + "?" + encodeURI(objRes);

        //0203 设置请求方法和路径
        xmlHttp.open("get",url,true);

        //03 发送请求
        xmlHttp.send();

        //04 监听请求状态
        xmlHttp.onreadystatechange = function () {
            if(xmlHttp.readyState == 4)
            {
                //05 处理服务器返回的数据
                if(xmlHttp.status >=200 && xmlHttp.status<300 || xmlHttp.status == 304){
                    //..成功之后的处理
                    successCallBack(xmlHttp.responseText);
                }else
                {
                    //...失败之后的处理
                    errorCallBack(xmlHttp.status);
                }
            }

        }
    }

POST请求的封装

主要处理：
（1）创建请求对象（兼容性处理）
（2）设置请求路径和请求方法(post)
    01 处理参数（把对象中的键值对转换为数组后连接）
    02 处理GET请求缓存（增加随机因子参数）
（3）设置请求路径（xmlHttp.setRequestHeader("Content-type","application/x-www-form-urlencoded");）
（4）发送请求并设置参数
（5）监听请求状态（请求状态==4判断响应码）
（6）处理请求成功和失败的回调

示例代码

function post(url,obj,successCallBack,errorCallBack) {
        //01 创建请求对象
        var xmlHttp;
        if(window.XMLHttpRequest)
        {
            xmlHttp = new XMLHttpRequest();
        }else
        {
            xmlHttp = new ActiveXObject("Microsoft.XMLHTTP");
        }

        //02 设置请求路径
        //0201 处理参数(把对象中的键值对进行转换)
        var arrM = [];
        for(var key in obj)
        {
            arrM.push(key+"="+obj[key]);
        }

        //0202 处理GET请求在IE浏览器中的缓存问题
        arrM.push("tn="+ Math.random());

        var objRes = arrM.join("&");
        //url = url + "?" + encodeURI(objRes);

        //0203 设置请求方法和路径
        xmlHttp.open("post",url,true);

        //+) 设置请求头
        xmlHttp.setRequestHeader("Content-type","application/x-www-form-urlencoded");
        //03 发送请求
        xmlHttp.send(objRes);

        //04 监听请求状态
        xmlHttp.onreadystatechange = function () {
            if(xmlHttp.readyState == 4)
            {
                //05 处理服务器返回的数据
                if(xmlHttp.status >=200 && xmlHttp.status<300 || xmlHttp.status == 304){
                    //..成功之后的处理
                    successCallBack(xmlHttp.responseText);
                }else
                {
                    //...失败之后的处理
                    errorCallBack(xmlHttp.status);
                }
            }

        }
    }

兼容GET和POST请求

说明：
（1）把get请求和post请求使用一个函数来封装，通过传递参数来区分
（2）如果某些选项不传递那么则采用默认的处理方式
（3）使用option对象来管理所有的参数

function ajaxTest(option) {

        //00 设置默认的请求参数：
        option.type = option.type || "get";
        option.obj = option.obj || {};
        option.successCallBack = option.successCallBack || function () {
                console.log("成功");
            }
        option.errorCallBack = option.errorCallBack || function () {
                console.log("失败");
            }
        //01 创建请求对象
        var xmlHttp;
        if(window.XMLHttpRequest)
        {
            xmlHttp = new XMLHttpRequest();
        }else
        {
            xmlHttp = new ActiveXObject("Microsoft.XMLHTTP");
        }

        //02 设置请求路径
        //0201 处理参数(把对象中的键值对进行转换)
        var arrM = [];
        for(var key in option.obj)
        {
            arrM.push(key+"="+option.obj[key]);
        }

        //0202 处理GET请求在IE浏览器中的缓存问题
        arrM.push("tn="+ Math.random());

        var objRes = arrM.join("&");

        //0203 设置请求方法和路径
        if(option.type == "get")
        {
            option.url = option.url + "?" + encodeURI(objRes);
        }
        xmlHttp.open(option.type,option.url,true);
        if(option.type == "post")
        {
            //+) 设置请求头
            xmlHttp.setRequestHeader("Content-type","application/x-www-form-urlencoded");
            //03 发送请求
            xmlHttp.send(objRes);
        }

        xmlHttp.send();

        //04 监听请求状态
        xmlHttp.onreadystatechange = function () {
            if(xmlHttp.readyState == 4)
            {
                //05 处理服务器返回的数据
                if(xmlHttp.status >=200 && xmlHttp.status<300 || xmlHttp.status == 304){
                    //..成功之后的处理
                    option.successCallBack(xmlHttp.responseText);
                }else
                {
                    //...失败之后的处理
                    option.errorCallBack(xmlHttp.status);
                }
            }

        }
    }