Question

我正在调用2个JS函数（Ajax），每个函数都从服务器返回数据。但是第二个函数获取第一个函数的responsetext。

我观察到的一件事是，如果我在使用它之前在函数中使用1个或更多警报（知道数据是什么）（打印图像并显示锚点），它可以正常工作 - 给定一点延迟（我猜）它的工作正常，没有它失败。

我发现这很奇怪，一旦我做了一些搜索，发现这篇文章（http://forums.devnetwork.net/viewtopic.php?f=13&t=117523）中有一个解决方法 - 给出1或0.5秒的超时时间，事情是正确的。

虽然解决方法似乎完成了工作，但我很想知道为什么响应文本从前一个Ajax获取值。

我知道代码不是必需的。但是，以防万一 - 下面给出了

GIST：

1.包含警报 - 代码正常

2.当警报被删除时，锚点显示但是图像不是图像是一个碎片图像（撕碎的纸张类型的图像）检查图像信息我是否发现数据形成前一个功能 - 因此不是显示。

<style type="text/css">
.image{
position: relative;
left: 20%;
}
</style>

<script type="text/javascript" >
function create(){
alert("createUid"); // 1st alert with which the code works
xmlhttp=new XMLHttpRequest();
xmlhttp.onreadystatechange=function(){
    if (xmlhttp.readyState==4 && xmlhttp.status==200){
    var json = eval(xmlhttp.responseText);
    for(i=0;i<json.length;i++){     
        var a = document.createElement("a"); //creates a List of anchors
        a.id="a"+json[i].uid;
        a.style.display="block";
        a.setAttribute("href","#");
        a.setAttribute("onclick","alert("+json[i].uid+")"); 
        a.appendChild(document.createTextNode(json[i].uid));
        document.getElementById("tag").appendChild(a);
        }
    }
}
xmlhttp.open("GET","users.php?send=vivek",true);
xmlhttp.send("NULL");

}
function display(){
alert("pict");
xmlhttp=new XMLHttpRequest();
xmlhttp.onreadystatechange=function(){
    if (xmlhttp.readyState==4 && xmlhttp.status==200){
        var img = document.createElement("img"); 
        img.id="dispPict";
        img.class="image";
        img.setAttribute("alt","ViperRules!!");             
        img.setAttribute("src","data:image/jpg;base64,"+xmlhttp.responseText); // response text is a binary of an image stored in the DB.
        img.style.display="block";
        document.body.appendChild(img);
        //document.getElementById("Tag").appendChild(img);
        }
    }   
xmlhttp.open("GET","users.php?pict=vivek",true);
xmlhttp.send("NULL");
}
 </script>

<body onload=" display(), create();">
<div id="tag" class="image"> </div>
</body>

Answer 1

您在每个函数中使用全局变量xmlhttp - 意味着每个函数使用相同的xmlhttp。第二个函数调用替换了第一个函数的xmlhttp onreadystatechange，所以当第一个调用返回时，它会执行第二个函数onreadystatechange。

要解决此问题，您需要不使用全局变量。这可以通过在变量定义时在变量前面添加var来完成。

示例：

<script type="text/javascript" >
function create(){
    alert("createUid"); // 1st alert with which the code works
    var xmlhttp=new XMLHttpRequest();
    ...
}

function display(){
    alert("pict");
    var xmlhttp=new XMLHttpRequest();
    ...
}
</script>

Answer 2

正在使用全局属性 - xmlhttp。因此，回调中的xmlhttp 不绑定在一个闭包中，而是全局属性被覆盖第二次create()是调用。（超时/延迟允许第一个XHR请求首先完成。）

最简单的“修复”是改变：

xmlhttp=new XMLHttpRequest();

为：

var xmlhttp=new XMLHttpRequest();

这会将xmlhttp声明为函数局部变量，因此它将在回调中关闭。但是，我建议使用一个框架 - jQuery很受欢迎 - 使整个过程变得更简单。

快乐的编码。

Javascript：ResponseText值混淆了吗？

2 个答案: