js ajax 组装

背景:当项目不想引入jq,但又想像jq那样便利的使用ajax。所以利用原生js 封装是个不错的选择。

/**
* @todo ajax  请求接口数据
* @parmes options 请求配置,option类型是对象
* @parmes options.url 请求链接地址
* @parmes options.type 请求格式GET、POST,默认GET
* @parmes options.data 请求数据,默认""
* @parmes options.dataType 响应数据格式,默认json
* @parmes options.contentType 数据请求格式,默认application/x-www-form-urlencoded
* @parmes options.timeout 设置超时时间,默认15s
* @parmes options.async 是否异步,true异步、false同步。默认true
* @parmes options.success 成功后回调函数
* @parmes options.error 失败后回调函数
*/
var ajax = function(options){
    options = options || {};
    options.type = (options.type || "GET").toUpperCase();
    options.dataType = options.dataType || "json";
    options.timeout = options.timeout || 15000;
    options.async = options.async || true;
    var params = options.data || "" ;

    //创建 - 第一步
    if (window.XMLHttpRequest){// code for IE7+, Firefox, Chrome, Opera, Safari
        var xhr = new XMLHttpRequest();
    }
    else{// code for IE6, IE5
        var xhr = new ActiveXObject("Microsoft.XMLHTTP");
    }

    //接收 - 第三步
    xhr.onreadystatechange = function () {
        if (xhr.readyState == 4) {
            var status = xhr.status;
            if (status >= 200 && status < 300) {
                options.success && options.success(xhr.responseText, xhr.responseXML);
            } else {
                options.error && options.error(status);
            }
        }
    }

    //连接 和 发送 - 第二步
    if (options.type == "GET") {
        xhr.open("GET", options.url, options.async);
        xhr.send(null);
    } else if (options.type == "POST") {
        xhr.open("POST", options.url, options.async);
        //设置表单提交时的内容类型
        var contentType = options.contentType ? options.contentType : "application/x-www-form-urlencoded";
        xhr.setRequestHeader("Content-Type", contentType);
        xhr.send(params);
    }

    //设置有效时间
    setTimeout(function(){
        if(xhr.readyState!=4){
            xhr.abort();
        }
    },options.timeout);
};

基本使用实例:

ajax({
    url:"http://server-name/login"
    type:'post',//HTTP请求类型
    data:{
        username:'username',
        password:'password'
    },
    dataType:'json',//服务器返回json格式数据
    timeout:10000,//超时时间设置为10秒;
    contentType:"application/json",  //设置发送时数据格式
    success:function(data){
        //服务器返回响应,根据响应结果,分析是否登录成功;
        ...
    },
    error:function(e){
        //异常处理;
        console.log(e);
    }
});

 

posted @ 2017-06-02 16:50  码墙  阅读(370)  评论(0编辑  收藏  举报