码迷,mamicode.com
首页 > Web开发 > 详细

摆脱jquery,用自己的JS库实现ajax功能

时间:2015-04-08 21:16:35      阅读:153      评论:0      收藏:0      [点我收藏+]

标签:

可以将下面的代码保存在一个文件里如:myAjax.js,以后在项目中如果觉得jquery那一套很重,就完全可以使用自己的ajax库,不用担心性能和兼容性!

/**
 * 创建ajax请求对象
 * @returns XMLHTTPREQUEST
 */
function createAjaxObj(){
    var req ;
    if(window.XMLHttpRequest){
        req=new XMLHttpRequest();
    }else{
        req=new ActiveXObject("Msxml2.XMLHTTP");
    }
    return req;
}


/**
 * 发送 ajax 请求
 * @param method  get/post
 * @param url     请求路径
 * @param params  参数列表  格式a=?&&b=?
 * @param async   true 异步 false 同步
 * @param handle200  处理成功的函数
 * @param loading    处理加载中的函数
 * @param handle404  处理找不到地址的函数
 * @param handle500  处理服务器内部出错的函数
 */
function sendAjaxReq(method,url,params,async,handle200,loading,handle404,handle500){
    var req = createAjaxObj();
    req.onreadystatechange = function(){
        if(4==req.readyState){
            if(200==req.status){
                if(handle200){
                    handle200(req.responseText);
                }
            }else if(404==req.status){
                if(handle404){
                    handle404();
                }
            }else if(500==req.status){
                if(handle500){
                    handle500();
                }
            }
        }else{
            if(loading){
                loading();
            }
        }
    };
    if("get"==method.toLowerCase()){
        req.open(method,url+(params==null?"":"?"+params),async);
        req.send(null);
    }else if("post" ==method.toLowerCase()){
        req.open(method,url,async);
        req.setRequestHeader("Content-Type","application/x-www-form-urlencoded");
        req.send(params);
    }
}



/** For Example
// 使用自己的ajax 类库发送 请求    
        sendAjaxReq("post",
            "${base}/brandAjax/checkBrandId.do",
            "brandId="+yhdBrandId,true,
            function(req){
                eval(" var data="+ req.responseText);
                if(data.message==true){
                        alert("品牌ID:"+yhdBrandId+"已存在,不可重复添加!");
                        $("#hidBrandId")[0].innerHTML=""; 
                        $("#brandName").val("");                                
                    }else{
                        submitFlag=1;
                        $("#selBrand")[0].style.display = "none";                          
                    }
            });
*/

摆脱jquery,用自己的JS库实现ajax功能

标签:

原文地址:http://www.cnblogs.com/xifenglou/p/4403516.html

(0)
(0)
   
举报
评论 一句话评论(0
登录后才能评论!
© 2014 mamicode.com 版权所有  联系我们:gaon5@hotmail.com
迷上了代码!