JavaScript是一種腳本語言，用來編寫交互式網頁。它可以與后端的服務器進行通信，并利用存儲過程來處理復雜的業務邏輯。本文將介紹如何使用JavaScript調用存儲過程。

首先，我們需要在后端編寫一個存儲過程。以MySQL為例，存儲過程如下：

DELIMITER $$
CREATE PROCEDURE <code>get_users_by_age</code> (IN age INT, OUT result TEXT)
BEGIN
SELECT name FROM users WHERE age = age INTO result;
END $$
DELIMITER ;

上述存儲過程將根據年齡查詢用戶，并將結果保存在result變量中。現在我們需要在JavaScript中調用此存儲過程。我們可以使用AJAX來發送HTTP請求，并將存儲過程的參數作為URL的查詢字符串。代碼如下：

function getUsersByAge(age) {
var url = '/get_users_by_age?age=' + age;
var xhr = new XMLHttpRequest();
xhr.onreadystatechange = function() {
if (xhr.readyState === XMLHttpRequest.DONE && xhr.status === 200) {
var result = xhr.responseText;
console.log(result);
}
};
xhr.open('GET', url, true);
xhr.send();
}

上述代碼中，我們使用XMLHttpRequest對象來發送HTTP GET請求，并在回調函數中處理返回結果。在回調函數中，我們將響應文本保存在result變量中，并在控制臺中打印。如果存儲過程返回的是JSON格式數據，我們可以使用JSON.parse函數來將響應文本解析成JavaScript對象。

另外，如果存儲過程需要傳入多個參數，我們可以將參數拼接到URL中。如果參數包含特殊字符，我們需要使用encodeURIComponent函數將其編碼。例如：

function getUsersByAgeAndGender(age, gender) {
var url = '/get_users_by_age_and_gender?age=' + encodeURIComponent(age) + '&gender=' + encodeURIComponent(gender);
var xhr = new XMLHttpRequest();
xhr.onreadystatechange = function() {
if (xhr.readyState === XMLHttpRequest.DONE && xhr.status === 200) {
var result = xhr.responseText;
console.log(result);
}
};
xhr.open('GET', url, true);
xhr.send();
}

上述代碼中，我們將年齡和性別作為兩個參數傳入存儲過程，并將它們拼接到URL中。我們還使用encodeURIComponent函數來編碼參數，以防止特殊字符對URL的解析造成影響。

總之，JavaScript可以非常方便地調用存儲過程。我們只需要使用XMLHttpRequest對象來發送HTTP請求，并將存儲過程的參數作為URL的查詢字符串。這種方法可以幫助我們處理復雜的業務邏輯，并提高應用程序的性能和可維護性。