用过ajax的人都知道，在ajax的options中有个回调函数，通过这个回调函数我们可以得到并操作请求返回的数据。
最近一直在做js方面的事情，在工作过程中我也需要回调函数，不过是自己写的：
define(['zepto'],function($){
function uploadPicFmSubmit(formId,requestURL,fn){
var formdata = false;
if (window.FormData) {
formdata = new FormData();
}
var subFm = $('#'+formId)[0];
var len = subFm.length;
var reader;
for ( var i=0; i < len; i++ ) {
var ele = subFm[i];
var ele_name = ele.name;
if (ele.type=='file') {
var files = ele.files;
for(var j=0;j<files.length;j++) {
var file = files[j];
//if (!!file.type.match(/image.*/)){
if (window.FileReader) {
reader = new FileReader();
reader.readAsDataURL(file);
}
if (formdata) {
formdata.append(ele_name, file);
}
//}
}
}else{
if (formdata) {
formdata.append(ele_name, ele.value);
}
}
}
if (formdata) {
$.ajax({
url: requestURL,
type: "POST",
data: formdata,
processData: false,
contentType: false,
success: function (res) {
var msg = eval（res);
fn(msg);
},
error:function(e){
fn(e);
}
});
}
}
return{
uploadPicFmSubmit:uploadPicFmSubmit
}
});
以上代码是针对zeptojs未提供类似ajax form提交而编写的，遇到同样问题的同学可以拿去用。
uploadPicFmSubmit方法中的最后一个参数fn即就是我们自定义的回调函数，我们看到回调函数最后是被用在接收ajax请求结果的地方。
下来是外部调用的代码：
bindForBtn=function(){
$('#addBtn').bind('click',function(){
var requestURL = requestBaseUrl+'/taskhelper/workreport/save?webapp=1&token='+token;
var formId = 'workreprot_fm';
_fh.uploadPicFmSubmit(formId,requestURL,function(data){
if(data.msg=='success'){
alert('保存成功！');
}
});
});
};
我们看到传递进去的带参数的function对象被调用后就会到外部调用的地方。
其实就是带有function对象参数的方法的使用。
--------------------------------------------------------------------------------------------------------------
为了写组件，有时候需要避免一些对其他第三方类库的依赖。所以我在写某个组件的时候不得不以最原始的方法去异步请求数据。这个时候又遇到了回调函数。
var xmlhttp;
function VcallBack(){
if(Vtree_validateState(xmlhttp)){
var res = xmlhttp.responseText;
func(res);
}
}
//js异步请求
var func;
function Vtree_Quest(url,fn){
func = fn;
if (window.XMLHttpRequest) {
//针对FireFox，Mozillar，Opera，Safari，IE7，IE8
xmlhttp = new XMLHttpRequest();
//针对某些特定版本的mozillar浏览器的BUG进行修正
if (xmlhttp.overrideMimeType) {
xmlhttp.overrideMimeType("text/xml");
}
} else if (window.ActiveXObject) {
//针对IE6，IE5.5，IE5
//两个可以用于创建XMLHTTPRequest对象的控件名称，保存在一个js的数组中
//排在前面的版本较新
var activexName = ["MSXML2.XMLHTTP","Microsoft.XMLHTTP"];
for (var i = 0; i < activexName.length; i++) {
try{
//取出一个控件名进行创建，如果创建成功就终止循环
//如果创建失败，回抛出异常，然后可以继续循环，继续尝试创建
xmlhttp = new ActiveXObject(activexName[i]);
break;
} catch(e){
}
}
}
//确认XMLHTtpRequest对象创建成功
if (!xmlhttp) {
alert("fail to create XMLHttpRequest!!");
return;
}
xmlhttp.onreadystatechange = VcallBack;
xmlhttp.open("POST",url,true);
xmlhttp.setRequestHeader('Content-Type', 'application/x-www-form-urlencoded');
xmlhttp.send(null);
}
function Vtree_validateState(xmlhttp){
if(xmlhttp.readyState == 4 && xmlhttp.status == 200){
return true;
}else{
return false;
}
}
其实上面代码就是原始的异步请求代码，需要的同学也可以拿去用。这里外部调用入口方法是
Vtree_Quest(url,fn)
fn即就是回调函数，其实 xmlhttp.onreadystatechange = VcallBack这句绑定回调函数的代码完全可以把function对象VcallBack换成传入的fn，但是由于VcallBack这个函数中含有本地变量xmlhttp的一些判断，我们就需要再向外部与VcallBack中间夹上一层。
在本地 初始一个对象 func
在外部调用Vtree_Quest传入fn时将func赋值为fn
在VcallBack方法的xmlhttp.responseText处直接调用func对象并将结果值传入，这样我们就能在外部接收到最终的结果值。
