如何在不使用全局变量的情况下在javascript中存储和访问ajax数据？

我可能在这里遗漏了一些明显的东西，但是我如何重写这段代码，使它不需要theVariable作为全局变量呢

<script language="javascript">  
theVariable = "";  
function setValue()  /* called on page load */ 
{    
   /* make ajax call to the server here */
   theVariable = "a string of json data waiting to be eval()'d"; 
}  
function getValue()  
{  
    alert(theVariable);  
}  
</script>     


<input type="button" onClick="javascript:getValue()" value="Get the value">

变量=”；
在页面加载时调用函数setValue（）/*/
{    
/*在此处对服务器进行ajax调用*/
variable=“等待eval（）的json数据字符串”；
}  
函数getValue（）
{  
警报（变量）；
}  

在我的实际情况中，setValue函数对服务器进行ajax调用，接收一个json字符串，当您将鼠标移到页面的各个部分时，从中访问数据。最后，我使用了几个全局变量，这些变量工作得很好，但很混乱，我想知道是否有更好、更优雅的方法来实现这一点？

如果使用jQuery（可以用于ajax部分），则可以使用.data（）方法，该方法允许您按键/值将任意数据分配给文档元素

由于javascript是动态类型化的，您还可以通过名称/id获取元素，然后向该元素添加属性，例如

document.myData = 'xyz';

---

最后，您可以使用一种称为a的方法来限制变量的范围。

您可以这样做一个闭包：

<script type="text/javascript">
function setValue() /* called on page load */
{
    /* make ajax call to the server here */
    var theVariable = "a string of json data waiting to be eval()'d"; /* declared with var to make it a private */
    getValue = function() /* declared without var to make it a public function */
    {
        alert(theVariable);
    }
}
</script>

在页面加载时调用函数setValue（）*/
{
/*在此处对服务器进行ajax调用*/
var theVariable=“等待eval（）d的json数据字符串”/*用var声明，使其成为私有数据*/
getValue=function（）/*声明时未使用var，以使其成为公共函数*/
{
警报（变量）；
}
}

我会做如下事情：

<script language="javascript">
var myApp = function () {

    /* theVariable is only available within myApp, not globally 
     * (unless you expose it) 
     */
    var theVariable = "";  

    /* called on page load */
    var setValue = function setValue(){

       /* make ajax call to the server here */
       theVariable = "a string of json data waiting to be eval()'d"; 

    };

    var getValue = function getValue() {

        alert(theVariable);

        // call useless private function
        pFunc();

    };

    var pFunc = function pFunc(){
        // this is a hypothetical private function
        // it's only here to show you how to do it
        // in case you need it

    };

    // now expose anything you need to be globally available
    // basically anything that will be called outside of myApp

    return { setValue: setValue, getValue: getValue}; 
}(); 
</script>     


<input type="button" onClick="myApp.getValue()" value="Get the value">

或者完全忽略了return语句（这意味着returnthis）

---

然后，所有内容都可以作为myApp.whatever或myApp[whatever]全局可用。

如果您不介意使用一个全局对象，您可以创建一个javascript对象并存储javascript对象本地的任意数量的数据

下面是一个例子：

var myData={

变量1:“”

变量2:“”

变量：“”

})

如下所示设置数据：

<script type="text/javascript">
function setValue() /* called on page load */
{
    /* make ajax call to the server here */
    var theVariable = "a string of json data waiting to be eval()'d"; /* declared with var to make it a private */
    getValue = function() /* declared without var to make it a public function */
    {
        alert(theVariable);
    }
}
</script>

myData.variable1='hello，world'

在onclick中，可以调用myData.variable1来检索数据