我做了这么一个函数:
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"> </span>姓别:<span id="flow">{$userinfo['gender']}</span></div>
<div id="message" class="head">{$userinfo['msg']}</div>
<div id="button" class="head"><button>关注</button> <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 的坏习惯