JS之——回呼函數的簡單應用（插曲），js回呼函數

JS之——回呼函數的簡單應用（插曲），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";//postvar REQUEST_TYPE_POST = "POST";//GETvar 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) : "";}//移出指定的keyfunction 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)這個方法來解析資料了

四、測試