javascript - ajax数据混乱

问题描述

问 题

我做了这么一个函数：

function ajax_get(url,fx){

    xhr=new XMLHttpRequest();
    xhr.open("GET",url,true);
    xhr.send();
    xhr.onreadystatechange=function(){
        if(xhr.readyState==4){
            if(xhr.status==200){
                fx(xhr.responseText);
            }else{
                alert("网络错误");
            }
        }
    }
}

现在，我调用它两次，两次的功能分别是获取粉丝数和获取发言记录

ajax_get("user.php?action=homepage&info=getfans&id={$_GET['id']}",function(x){document.getElementById("fans").innerHTML=x;});
ajax_get("user.php?action=homepage&info=getvotes&id={$_GET['id']}", function(y){ajax_load(y);});
function ajax_load(json)
{
    document.getElementById("net_info").innerHTML="";
    obj=eval("("+json+")");
    for(row in obj){
        document.getElementById("net_info").innerHTML+=("<div class='kapian'><a>"+obj[row].title+"</a></div>");
    }
}

第一次从服务器请求到的应该是6，第二次从服务器请求到的是一个JSON，实际运行下来，两次请求都请求到了正确的数据，并且第二次请求的数据总是按照我的设想正确的显示在网页上，但是第一次请求的数据每次加载网页都不会在网页上正确显示，有时什么也没有，有时显示的确是第二次请求的数据，这是为什么？
以下是完整的HTML

{tpl:nav.html}
<link rel="stylesheet" type="text/css" href="css/user.css">
  <div id="bodys">
    <div id="headimg_area">
      <div id="head_image">
        <img src="{$userinfo['headimg']}" width="100" height="100">
      </div>
      <div id="username" class="head"><h2>{$userinfo['username']}</h2></div>
  <div id="friend" class="head">粉丝：<span id="fans">&nbsp;</span>姓别：<span id="flow">{$userinfo['gender']}</span></div>
  <div id="message" class="head">{$userinfo['msg']}</div>
  <div id="button" class="head"><button>关注</button>&nbsp;<button>私信</button></div>
</div>

<div id="more_info">
  <div id="more_info_title"><h3>更多信息</h3></div>
  <div id="left">
    <div id="speech">
      <div id="votes" class="trends"><h4>{$userinfo['call']}的投票</h4></div>
      <div id="comments" class="trends"><h4>{$userinfo['call']}的评论</h4></div>
    </div>
    <div id="net_info">正在加载……</div>
  </div>
  <div id="right">11</div>
</div>
  </div>
<script>
ajax_get("user.php?action=homepage&info=getfans&id={$_GET['id']}",function(x){document.getElementById("fans").innerHTML=x;});
ajax_get("user.php?action=homepage&info=getvotes&id={$_GET['id']}", function(y){ajax_load(y);});
function ajax_load(json)
{
    document.getElementById("net_info").innerHTML="";
    obj=eval("("+json+")");
    for(row in obj){
        document.getElementById("net_info").innerHTML+=("<div class='kapian'><a>"+obj[row].title+"</a></div>");
    }
}
</script>
{tpl:messagebox.html}

下两图是两次请求分别收到的数据：


下两图是实际运行结果：
有时无法获取粉丝数

有时粉丝数处显示的是第二次请求的JSON

解决方案

xhr 声明时加 var。

否则 xhr 成为了全局变量，第二次请求时会覆盖 xhr 变量，导致第一次 readystatechange 时访问的是第二次的 xhr

不要养成声明变量不加 var 的坏习惯

这篇关于javascript - ajax数据混乱的文章就介绍到这了，希望我们推荐的答案对大家有所帮助，也希望大家多多支持IT屋！