回调函数的使用

Posted 2020-12-04 alsf

对javascript不太清楚，这次知道了回调函数的使用，记录一下。

简单来说，就是把回调方法作为一个参数，传递给另一个方法，然后在那个方法里面执行完一定操作，调用那个方法。这样就实现了回调。

例如：

需要被回调的方法：

function callback(a)
{
    console.log(‘回调函数结果：‘+a);

}

把该回调方法传入另一个方法，在该方法里面调用该回调方法。

function  invokeMethod(params,callback)
{
    console.log(‘接下来就要执行回调方法了‘);
    callback(params);
}

最后：执行invokeMethod的时候，传入回调方法和相应参数，就能实现效果。

invokeMethod(‘测试回调方法‘,callback)

效果：

 

起始上一节里面的Ajax封装就是如此，把回调方法作为参数传入Ajax调用方法，Ajax在获取完数据后，在Ajax方法里面间接调用了回调方法。

Ajax执行方法：

function createXMLRequst(){
    try{
        return new XMLHttpRequest();
    }catch(e)
    {
        try{
            return new ActiveXObject("Msxml2.XMLHTTP");
        }catch(e){
            try{
                return new ActiveXObject("Microsoft.XMLHTTP");
            }catch(e){
                alert("不支持浏览器版本");
                throw e;
            }
        }
    }
}
function ajax(option)
{
    var xmlHttp=createXMLRequst();
    //打开链接
    if(!option.method)//默认get
    {
        option.method="GET";
    }
    if(option.asyn==null)//默认为异步处理
    {
        option.asyn=true;
    }
    
    xmlHttp.open(option.method,option.url,option.asyn);
    
    //POST需要设置请求头
    if(option.method=="POST")
    {
        xmlHttp.setRequestHeader("Content-Type","application/x-www-form-urlencoded");
    }
    //发送请求，加上请求参数
    xmlHttp.send(option.params);
    //给异步对象的onreadystatechange事件注册监听器
    xmlHttp.onreadystatechange=function()
    {
        //双重判断，判断是否为4的状态，并且响应状态码为：200
        if(xmlHttp.readyState==4 && xmlHttp.status==200)
        {
            var data;
            if(!option.type){
                data=xmlHttp.responseText;
            }else if(option.type=="xml"){
                data=xmlHttp.responseXML;
            }else if(option.type=="text"){
                data=xmlHttp.responseText;
            }else if(option.type=="json"){
                var text=xmlHttp.responseText;
                data=eval("("+text+")");
            }
            //调用回调函数
         option.callback(data);
        }
    }
}

执行Ajax方法时候，把回调方法做参数传入：

    btn.onclick=function(){
        ajax(
            {
                url:"/AjaxDemo/JsonAjax",
                type:"json",
                callback:function(data){
                    document.getElementById("h3").innerhtml=data.name+"，"+data.age+","+data.sex;
                }
            }
        );
    }

 

如此就实现了回调。