JS之——回调函数的简单应用（插曲）

转载请注明出处:http://blog.csdn.net/l1028386804/article/details/46274893

JS无疑是前端页面与服务端交互数据的强大语言，那么如何利用JS的回调函数来封装JS的网络请求呢，本文就来简单说明这一问题

一、创建一个index.html文件

页面内容随便定义,重点是要引入如下自定义的两个js文件，一个是constants.js一个是validate.js

二、创建constants.js文件

/**
 * Created by liuyazhuang on 2015/5/29.
 * 此文件封装了一些访问网络请求的url,
 * 封装了一些回调函数的用法和一些常量
 */
//lyz的服务器
var base_url_lyz_server = "http://192.168.254.109:10002/tea";
//lyz图片
var base_url_lyz_img_server = "http://192.168.254.109:10002";

//post
var REQUEST_TYPE_POST = "POST";
//GET
var REQUEST_TYPE_GET = "GET";

//拼接字符串
//uri除了基本路径以外的具体接口路径
//isValidate标志是否需要登录,true需要登录,false不需要登录
function getUrl(uri, isValidate){
    var url = base_url_lyz_server+ uri;
    if(isValidate){
        var token = getValueFromLocalStorage("token");
        var username = getValueFromLocalStorage("phone");
        url = url+"?access_token="+token+"&mobile_user_name="+username;
    }
    return url;
}

//图片的路径
function getImgUrl(uri){
    return base_url_native_img_server + uri;
}

//获取localStorage中的某个值
function getValueFromLocalStorage(key){
    return localStorage.getItem(key) ? localStorage.getItem(key) : "";
}

//移出指定的key
function removeValuesFromLocalStorage(keys){
    for(var i = 0; i < keys.length; i++){
        localStorage.removeItem(keys[i]);
    }
}

/**
 * 封装的ajax请求数据
 * url:请求的路径
 * params:参数
 * isValidate:是否需求登录验证
 * type:访问类型:"POST","GET",
 * method:回调的方法名称
 */
function requestDataByAjax(url, isValidate, params, type, method){
    $.ajax({
        type: type,
        url: getUrl(url, isValidate),
        cache: false,
        async: false,
        data:{
            "parameter":params
        },
        success: function (result) {
           //回调函数解析数据
            method(result);
        },
        error: function (XMLHttpRequest, textStatus, errorThrown) {
            alert("错误：" + textStatus);
        }
    });
}

在这个js文件中

划线部分是网络请求返回成功数据后要调用的回调函数名称，所有与网络请求相关的业务都可以调用这个方法，服务端返回的数据解析只需交给相应的回调函数即可，这既体现了代码的封装性，又大大提高了代码的维护性。

三、创建validate.js

//请求地址
requestDataByAjax("/website/address/default_address",true, JSON.stringify({"mobile_id": userId}), REQUEST_TYPE_POST, validate_parseAddressResult);

//回调方法解析地址数据
function validate_parseAddressResult(result){
    //数据返回正常
    console.log(result);
    if(result.code == 1001){
        var message = result.message;
        $("#appointment_name").text(message.name);
        $("#appointment_phone").text(message.phone);
        $("#appointment_address").text(message.address);
        localStorage.setItem("sendName",message.name);
        localStorage.setItem("sendPhone",message.phone);
        localStorage.setItem("sendAddress",message.address);
    }
}

这个js文件中

划线部分的名称是一样的,调用constants.js的requestDataByAjax方法将方法function validate_parseAddressResult(result)的名称名称作为参数，当网路请求成功返回数据后，就会自动调用function validate_parseAddressResult(result)这个方法来解析数据了

四、测试