Ajax的异步通信引发的一个随机性问题<2> 异步请求的问题来了

最新推荐文章于 2022-07-15 15:17:29 发布
原创 最新推荐文章于 2022-07-15 15:17:29 发布 · 1.9k 阅读 · 1 ·
CC 4.0 BY-SA版权
版权声明：本文为博主原创文章，遵循 CC 4.0 BY-SA 版权协议，转载请附上原文出处链接和本声明。
文章标签：

#ajax #class #div #jquery #javascript #function

【问题页面】

http://data.auto.sina.com.cn/shiche/8242

WEB 开发者可以很明白的看出“网友热议”部分用的是iframe嵌套的页面

问题就出在这里了，因为评论和微博是通过js取过来的，而且评论和微博的数量不能确定，所以iframe的父级页面需要高度自适应。

主页面加入了这段代码，获取高度

<script type="text/javascript">
document.domain = "sina.com.cn";
jQuery("#ifr_cmnt").load(function(){
Varifr_height= document.getElementById("ifr_cmnt").contentWindow.document.body.scrollHeight;
			document.getElementById("ifr_cmnt").height = ifr_height;
});
</script>

这段代码一般来讲本不会出错，错就错在获取微博是异步方式导致，当网络比较慢时，AJAX完成的比渲染页面线程慢，那么这个代码捕获到的高度就是不对的，可以写一个测试页面试一下

共三个页面

a.Html（主页面）

b.Html（被iframe嵌套进a.html）

Data/sleep.php(b.html 通过ajax获取此页面的内容)

内容

a.html
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<html xmlns="http://www.w3.org/1999/xhtml">
<head>
<meta http-equiv="Content-Type" content="text/html; charset=gb2312" />
<title>试车总评</title>
<script type="text/javascript" src="http://auto.sina.com.cn/683/2009/0901/jquery.js"></script>
</head>
<body>
<iframe src="b.html" width="100%" id="ifr_cmnt" name="ifr_cmnt" frameborder="0" scrolling="no"></iframe>
<script type="text/javascript">
		jQuery("#ifr_cmnt").load(function(){
			var ifr_height = document.getElementById("ifr_cmnt").contentWindow.document.body.scrollHeight;
			alert(ifr_height);
			document.getElementById("ifr_cmnt").height = ifr_height;
		});
	 </script>
</body>
</html>

b.html
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<html xmlns="http://www.w3.org/1999/xhtml">
<head>
<meta http-equiv="Content-Type" content="text/html; charset=gb2312" />
<title>试车总评</title>
<script type="text/javascript" src="http://auto.sina.com.cn/683/2009/0901/jquery.js"></script>
</head>
<body>
<div id='s1' style='height:300px;width=1000px;background-color:#000FFFF'></div>
<div id='s2'></div>
<script language='javascript'>
	$.ajax({
	type: "GET",
	url: "data/sleep.php",
	async: true,
	success: function(msg){
    alert(1); 
	$('#s2').html(msg);
   }
});
</script>
</body>
</html>

data/sleep.php
<?php
	echo '<div style="height:300px;width:1000px;background-color:#FFF000;">这只是个测试</div>';

访问本地http://localhost/study/a.html

结果页面

先弹出300(页面高度)，后弹出1AJAX回调完成标志


上面这张图片表示先完成的渲染页面

后边这张图片表示AJAX异步回调完成，可见没有达到我们想要的效果，B.HTML应该在A.HTML中显示为600PX，

如果您的页面特别大的话，效果不一样了，为了测试这种状况我们在B.HTML加入干扰代码

此时B.HTML变为

<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<html xmlns="http://www.w3.org/1999/xhtml">
<head>
<meta http-equiv="Content-Type" content="text/html; charset=gb2312" />
<title>试车总评</title>
<script type="text/javascript" src="http://auto.sina.com.cn/683/2009/0901/jquery.js"></script>
</head>
<body>
<div id='s1' style='height:300px;width=1000px;background-color:#000FFFF'></div>
<div id='s2'></div>
<script language='javascript'>
	$.ajax({
	type: "GET",
	url: "data/sleep.php",
	async: true,
	success: function(msg){
     $('#s2').html(msg);
	 alert('1');
	 //parent.document.getElementById("ifr_cmnt").height = 600;
   }
});
</script>
<div id="head">
  <div class="topNav w950">
    <h1 class="fL"> <a href="http://auto.sina.com.cn" title="新浪汽车"><img src="img/logo.png" alt="新浪汽车" /></a><a href="http://auto.sina.com.cn/review/" title="新浪汽车试车" target='_blank'><img src="img/shiche.png" alt="新浪汽车试车" /></a> </h1>

    <div class="subNav fL"> <i>></i> <span><a href="javascript:void(0)" onclick="return false;" style='cursor:default;' title="中型" target='_blank'>中型车</a></span> <i>></i> <span><a href="javascript:void(0)" style='cursor:default;' title="中华H530">中华H530</a></span> </div>
    <span class="more fR"><a href="http://auto.sina.com.cn/review/" title="更多试车">更多试车<i>>></i></a></span> </div>
  <div class="c_wrap">
    <div class="cat w950"> <span class="catBtn fL" id="catBtn">

      <div class="catB" id="catB">
        <div class="catIn"> <span>单车测试：</span>
          <ul>
			            <li><a href="http://data.auto.sina.com.cn/shiche/zp.php?carId=773">宝威JX6477D(4×2)</a></li>
			            <li><a href="http://data.auto.sina.com.cn/shiche/zp.php?carId=776">宝威JX6477D(4×4)</a></li>
			            <li><a href="http://data.auto.sina.com.cn/shiche/zp.php?carId=2560">克莱斯勒300C 2.7L豪华版</a></li>

			            <li><a href="http://data.auto.sina.com.cn/shiche/zp.php?carId=2561">克莱斯勒300C 3.5L豪华领航版</a></li>
			            <li><a href="http://data.auto.sina.com.cn/shiche/zp.php?carId=2562">克莱斯勒300C 5.7L豪华领航版</a></li>
			            <li><a href="http://data.auto.sina.com.cn/shiche/zp.php?carId=3030">克莱斯勒300C 2.7L商务版</a></li>
			            <li><a href="http://data.auto.sina.com.cn/shiche/zp.php?carId=3973">2010款凯迪拉克CTS 3.0精英运动版</a></li>
			            <li><a href="http://data.auto.sina.com.cn/shiche/zp.php?carId=5720">克莱斯勒300C 2.7L豪华领航版</a></li>
			            <li><a href="http://data.auto.sina.com.cn/shiche/zp.php?carId=3415">PAJERO帕杰罗5门旗舰天窗版</a></li>

			            <li><a href="http://data.auto.sina.com.cn/shiche/zp.php?carId=3416">PAJERO帕杰罗5门尊贵版</a></li>
			            <li><a href="http://data.auto.sina.com.cn/shiche/zp.php?carId=3417">PAJERO帕杰罗3门炫酷版</a></li>
			            <li><a href="http://data.auto.sina.com.cn/shiche/zp.php?carId=180">帕杰罗io</a></li>
			            <li><a href="http://data.auto.sina.com.cn/shiche/zp.php?carId=3414">PAJERO帕杰罗5门旗舰娱乐版</a></li>
					  </ul>
          <span>对比测试：</span>

          <ul>
                        <li><a href="http://data.auto.sina.com.cn/shiche/zp.php?carId=773">宝威JX6477D(4×2)</a></li>
			            <li><a href="http://data.auto.sina.com.cn/shiche/zp.php?carId=776">宝威JX6477D(4×4)</a></li>
			            <li><a href="http://data.auto.sina.com.cn/shiche/zp.php?carId=2560">克莱斯勒300C 2.7L豪华版</a></li>
			            <li><a href="http://data.auto.sina.com.cn/shiche/zp.php?carId=2561">克莱斯勒300C 3.5L豪华领航版</a></li>
			            <li><a href="http://data.auto.sina.com.cn/shiche/zp.php?carId=2562">克莱斯勒300C 5.7L豪华领航版</a></li>

			            <li><a href="http://data.auto.sina.com.cn/shiche/zp.php?carId=3030">克莱斯勒300C 2.7L商务版</a></li>
			            <li><a href="http://data.auto.sina.com.cn/shiche/zp.php?carId=3973">2010款凯迪拉克CTS 3.0精英运动版</a></li>
			            <li><a href="http://data.auto.sina.com.cn/shiche/zp.php?carId=5720">克莱斯勒300C 2.7L豪华领航版</a></li>
			            <li><a href="http://data.auto.sina.com.cn/shiche/zp.php?carId=3415">PAJERO帕杰罗5门旗舰天窗版</a></li>
			            <li><a href="http://data.auto.sina.com.cn/shiche/zp.php?carId=3416">PAJERO帕杰罗5门尊贵版</a></li>
			            <li><a href="http://data.auto.sina.com.cn/shiche/zp.php?carId=3417">PAJERO帕杰罗3门炫酷版</a></li>

			            <li><a href="http://data.auto.sina.com.cn/shiche/zp.php?carId=180">帕杰罗io</a></li>
			            <li><a href="http://data.auto.sina.com.cn/shiche/zp.php?carId=3414">PAJERO帕杰罗5门旗舰娱乐版</a></li>
			          </ul>
        </div>
        <a class="more" href="#">更多试车<i>>></i></a> </div>
      </span>
      <h2 class="fL">试驾：汗血宝马</h2>

      <span class="slogan fL">——新浪汽车深度评测2012款中华H530</span> <span class="share fR">分享:<a href="#" id='topShare'>新浪微博</a></span> </div>
  </div>
  	<script type="text/javascript" src="http://auto.sina.com.cn/683/2009/0901/jquery.js"></script>
	<script type="text/javascript" src="http://t.auto.sina.com.cn/api/getuserinfo.php"></script>
	<script type="text/javascript" src="http://t.auto.sina.com.cn/js/ssoconfig.js"></script>

	<script type="text/javascript" src="http://i.sso.sina.com.cn/js/ssologin.js"></script>
	<script type="text/javascript" src="js/login.js"></script>
  <script language='javascript'>
  		document.getElementById('topShare').onclick=function(){
			var openUrl='http://v.t.sina.com.cn/share/share.php?title=';
				openUrl+=encodeURIComponent('新浪试车的2011款中华H530 1.6L自动豪华型太精彩了，大家赶紧来看看!');
				openUrl+='&url='+encodeURIComponent(location.href);
				openUrl+='&source=bookmark';
				window.open(openUrl,'_blank','width=450,height=400');
		}
		var UserConfig ={
		source      : '2835469272',//appsource
		uid         :userinfo.dquid.uid,//用户uid
		screen_name : userinfo.dquid.screen_name,//昵称
		description :userinfo.dquid.description,//描述
		img         :userinfo.dquid.img,//头像
		fans        :userinfo.dquid.fans,//粉丝数量
		flowers     :userinfo.dquid.gzs,//关注数量
		blogs       :userinfo.dquid.blogs,//微博数量
		url         :'http://weibo.com/'+userinfo.dquid.uid
		};
  </script>
  <div class="i_wrap">
    <ul class="nav w950" id="nav">
      <li class="on"><a href="#" title="总评">总评</a></li>
      <li><a href="http://auto.sina.com.cn/shiche/waiguan8242/" target='_self' title="外观">外观</a></li>

      <li><a href="http://auto.sina.com.cn/shiche/neishi8242/" title="内饰" target='_self'>内饰</a></li>
      <li><a href="http://auto.sina.com.cn/shiche/kongjian8242/" title="空间" target='_self'>空间</a></li>
      <li><a href="http://auto.sina.com.cn/shiche/caokong8242/" title="操控" target='_self'>操控</a></li>
      <li><a href="http://auto.sina.com.cn/shiche/chengben8242/" title="使用成本" target='_self'>测试</a></li>
      <li><a href="http://data.auto.sina.com.cn/car/8242" title="配置" target='_blank'>配置</a></li>
    </ul>

  </div>
</div>
<div id="main" class="w950">
  <div class="detail">
    <div class="img fL"><a href="http://auto.sina.com.cn/shiche/waiguan8242/" target="_blank"><img src="http://www.sinaimg.cn/qc/http/data.auto.sina.com.cn/shiche/U7042P33T806D8F25012DT20111115153047.jpg" alt="2011款中华H530 1.6L自动豪华型" style='width:570px;height:380px;' /></a></div>
    <div class="review fR">
      <div class="follow"> <a href="http://weibo.com/autotest" target="_blank" class="img fL"><img src="http://tp4.sinaimg.cn/1644088831/50/1279883004"></a> <a class="f_user" href="http://weibo.com/autotest">新浪试车</a> <br>
        <span class="add" uid='1873370657'><a href="#" id='gz'>关注</a></span>

        <p class="tips fR">新浪试车在线回答微博朋友们的买车、用车、养车有关车得问题。</p>
        <div class="clear"></div>
      </div>
      <ul class="reviews">
        <li style='height:44px;'><span>点评：</span>
          <p style="height:44px;overflow: hidden;width: 300px">中华H530足以重新标定纯国产车的标准，不仅因为出色的车身造型与细致的做工，还因为底盘所具有的良好操控性…</p>
        </li>

        <li style='height:44px;'><span>优点：</span>
          <p>车身造型时尚成熟 内饰做工良好 底盘操控性好</p>
          <span>缺点：</span>
          <p>动力略显不足</p>
        </li>
        <li style='height:22px;'><span>适合人群：</span>

          <p>工薪阶层的三口之家</p>
        </li>
        <li class="param"><span>主要参数：</span> <span class="dt"><a href="http://data.auto.sina.com.cn/car/8242" target='_blank' >详细参数<i>>></i></a></span>
          <div class="clear"></div>
          <p>级别：中型 | 变速箱：5速自动变速器 | 排量：1.6L 直列4缸 </p>
        </li>

        <li class="result">
          <div class="fL"> <span>测试结果：</span>
            <div class="clear"></div>
            <p>加速（0-100公里/小时）：13.79 秒</p>
            <p>刹车（100-0公里/小时）：43.27 米</p>
            <p>实测油耗（升/100公里）：7.6升</p>

          </div>
          <div class="fR">
            <a href="http://data.auto.sina.com.cn/" target="_blank"><img src="http://www.sinaimg.cn/qc/salon/FAW_VOLKSWAGEN/FAW_VOLKSWAGEN/sub_brand/U515P33T221D573F5443DT20081127113925.jpg" alt="" style="width:100px;height:66px;" /></a>
            <p><a href="#">新宝来</a></p>
          </div>
        </li>
      </ul>
    </div>

    <div class="clear"></div>
  </div>
  <div class="grade">
    <div class="titleB">
      <h3 class="fL">新浪试车指数</h3>
      <ul class="recom fR">
        <li>6分以下：<span>不推荐</span></li>

        <li>6-7.9分：<span>合格</span></li>
        <li>8-9.2分：<span>优秀</span></li>
        <li>9.3-10分：<span>推荐</span></li>
      </ul>
    </div>
    <div class="box">

      <div class="subBox fL">
        <div class="intro"> <!--<span class="fR"><em><a href="#">中型车愉悦指数排行</a></em>:第3名</span>--><strong>愉悦指数</strong>  </div>
        <div class="graded Star1">
          <ul class="rating fL">
            <li></li>
            <li></li>
            <li></li>

            <li></li>
            <li></li>
            <li></li>
            <li></li>
            <li></li>
            <li></li>
            <li></li>
          </ul>
          <span class="fR">同级平均分7.8</span> <span class="score"><strong class="cou">7</strong>分</span>

          <div class="clear"></div>
        </div>
        <table>
          <thead>
            <tr>
              <td class="c83"></td>
              <td class="c83">得分</td>
            <!--  <td class="c83">同级排名</td>-->

              <td class="c83">同级平均分</td>
              <td class="c97">同级比较</td>
            </tr>
          </thead>
          <tbody>
            <tr>
              <th>外观</th>

              <td class="orange fw">9</td>
             <!-- <td>第1名</td>-->
              <td class="orange">9</td>
              <td>			  高于<span class="orange">
			  0%</span></td>
            </tr>

            <tr>
              <th>操控</th>
              <td class="orange fw">7</td>
             <!-- <td>第3名</td>-->
              <td class="orange">7.7</td>
              <td>			  低于
			  <span class="green">

			  -9.09%</span></td>
            </tr>
            <tr>
              <th>内饰</th>
              <td class="orange fw">8</td>
             <!-- <td>第2名</td>-->
              <td class="orange">8.3</td>

              <td>			  低于
			  <span class="green">
			  -3.61%</span></td>
            </tr>
          </tbody>
          <tfoot>
          </tfoot>
        </table>

      </div>
      <div class="subBox fL boxR">
        <div class="intro"> <!--<span class="fR"><em><a href="#"><a href="#">中型车性价比指数排行</a></a></em>:第1名</span>--> <strong>性价比指数</strong> </div>
        <div class="graded Star2">
          <ul class="rating fL">
            <li></li>
            <li></li>

            <li></li>
            <li></li>
            <li></li>
            <li></li>
            <li></li>
            <li></li>
            <li></li>
            <li></li>
          </ul>

          <span class="fR">同级平均分7</span> <span class="score"><strong class="cou">8</strong>分</span>
          <div class="clear"></div>
        </div>
        <table>
          <thead>
            <tr>
              <td class="c83"></td>

              <td class="c83">得分</td>
             <!-- <td class="c83">同级排名</td>-->
              <td class="c83">同级平均分</td>
              <td class="c97">同级比较</td>
            </tr>
          </thead>
          <tbody>

            <tr>
              <th>价格</th>
              <td class="orange fw">8</td>
             <!-- <td>第1名</td>-->
              <td class="orange">7</td>
              <td>			  高于<span class="orange">

			  14.29%</span></td>
            </tr>
            <tr>
              <th>使用成本</th>
              <td class="orange fw">9</td>
              <!--<td>第1名</td>-->
              <td class="orange">7.3</td>

              <td>			  高于<span class="orange">
			  23.29%</span></td>
            </tr>
            <tr>
              <th>空间</th>
              <td class="orange fw">7</td>

             <!-- <td>第1名</td>-->
              <td class="orange">6.7</td>
              <td>
			  			  高于<span class="orange">
			  			  4.48%
			  </span></td>
            </tr>
          </tbody>

          <tfoot>
          </tfoot>
        </table>
      </div>
    </div>
  </div>
  <div class="cmt">
    <div class="box">
      <div class="subBox boxL fL">

        <h3 class="csdp">专业车手点评<span></span></h3>
        <!--<div style=" margin-bottom: 17px; width: 540px; height: 50px; background: #ccc; border-bottom: 1px dashed #f00;"></div>-->
        <div class="follow"> <a href="http://weibo.com/1449714077" target="_blank" class="img fL"><img src="http://i1.sinaimg.cn/qc/812/shicheshou/idx/2011/1117/U1693P33T812D2F25024DT20111117154647.jpg" style='width:50px;height:50px;'></a> <a class="f_user" href="http://weibo.com/1449714077">门光远</a> <br>
          <span class="add" uid='1449714077'><a href="#">关注</a></span>
          <p class="tips fR">国内著名车手，新浪汽车专职试车手，多次参加著名的巴黎-达喀尔比赛。</p>

          <div class="clear"></div>
        </div>
        <div class="cmtB"> <span>点评：</span>
          <p>总体来讲，H530的表现令人眼前一亮，让我看到了自主品牌在多年的积累后逐渐成熟，用务实的作风走出一条属于自己的路。一个车型的成功可以造就一个品牌，希望也许就在不远的前方吧</p>
        </div>
      </div>
      <div class="subBox boxR fR">

        <h3>试车编辑</h3>
        <!--<div style=" margin-bottom: 17px; height: 50px; background: #ccc; border-bottom: 1px dashed #f00;"></div>-->
        <div class="follow"> <a href="http://weibo.com/1997895721" target="_blank" class="img fL"><img src="http://i1.sinaimg.cn/qc/812/shicheshou/idx/2011/1117/U7042P33T812D3F25024DT20111117121201.bmp"  style='width:50px;height:50px;'></a> <a class="f_user r" href="http://weibo.com/1997895721">金雷</a> <br>
          <span class="add" uid='1997895721' ><a href="#">关注</a></span>
          <p class="tips fR r">新浪汽车试车编辑 从业4年试驾车型超过200款</p>

          <div class="clear"></div>
        </div>
        <div class="cmtB"> <span>点评：</span>
          <p>H530足以重新标定国产车的标准,借助国外知名设计室打造的外形摆脱了山寨,内饰虽缺乏原创精神,但不错的用料做工都可以淡化负面情绪。</p>
        </div>
      </div>
    </div>

  </div>
  <div class="itemW">
    <ul class="item">
      <li class="wg n">
        <h5><a class="fR" href="http://auto.sina.com.cn/shiche/waiguan8242/" target="_blank" >查看详细结果<i>>></i></a><a href="http://auto.sina.com.cn/shiche/waiguan8242/"><span>外观</span></a></h5>
        <div class="item_d Star3"> <!--<span class="fR"><em><a href="#">中型车外观排行</a></em>:第1名</span>--> <span class="fL"><strong class="cou">9</strong>分</span>

          <ul class="rating fL">
            <li></li>
            <li></li>
             <li></li>
            <li></li>
            <li></li>
            <li></li>
            <li></li>
            <li></li>

            <li></li>
            <li></li>
          </ul>
          <span class="fR s">（8-9.2分:优秀）</span> </div>
        <div class="img"> <a href="http://auto.sina.com.cn/shiche/waiguan8242/" target=_blank><img src="http://www.sinaimg.cn/qc/http/data.auto.sina.com.cn/shiche/U7042P33T806D8F25014DT20111115153047.jpg" alt="" style="width:570px;height:380px;" /></a> </div>
        <p>H530的外形仍然来自意大利宾尼法利纳，在双方合作了多年之后，宾尼法利纳已经为中华找到了一组新的家族基因，而前脸上最出彩的无疑是神似宝马的前大灯。事实上，即使在白天我也喜欢打开示宽灯，白色的示宽灯颇有点“日间行车灯”意思，让人误以为你开的是一辆更高档次的车。</p>

        <div class="item_b"> <!--<span class="fL pic"><a href="#">外观图片</a></span> <span class="fL vd"><a href="#">外观视频</a></span>--> <a  href="http://auto.sina.com.cn/shiche/waiguan8242/" target="_blank"  class="fR res">查看详细结果</a> </div>
      </li>
      <li class="ns n">
        <h5><a class="fR" href="http://auto.sina.com.cn/shiche/neishi8242/" target="_blank">查看详细结果<i>>></i></a><a href="http://auto.sina.com.cn/shiche/neishi8242/"><span>内饰</span></a></h5>
        <div class="item_d Star4"> <!--<span class="fR"><em><a href="#">中型车内饰排行</a></em>:第2名</span>--> <span class="fL"><strong class="cou">8</strong>分</span>

          <ul class="rating fL">
            <li></li>
            <li></li>
             <li></li>
            <li></li>
            <li></li>
            <li></li>
            <li></li>
            <li></li>

            <li></li>
            <li></li>
          </ul>
          <span class="fR s">（8-9.2分:优秀）</span> </div>
        <div class="img"> <a href="http://auto.sina.com.cn/shiche/neishi8242/" target=_blank><img src="http://www.sinaimg.cn/qc/http/data.auto.sina.com.cn/shiche/U7042P33T806D8F25015DT20111115134644.jpg" alt="" style="width:570px;height:380px;"  /></a> </div>
        <p>中华H530的内饰设计可谓褒贬不一，我则更喜欢用“博取百家之长”来形容它，的确是这样，你可以在这里看到宝马样式的仪表盘、奥迪味道的中控台、和君威一样颜色的背光灯、方向盘，还有到处大众痕迹的控制键。局部的模仿构不成整体的山寨，将这些部件组合到了一起效果还不错。</p>

        <div class="item_b"> <!--<span class="fL pic"><a href="#">内饰图片</a></span> <span class="fL vd"><a href="#">内饰视频</a></span>--> <a href="http://auto.sina.com.cn/shiche/neishi8242/" target="_blank"  class="fR res">查看详细结果</a> </div>
      </li>
      <li class="kj n">
        <h5><a class="fR" href="http://auto.sina.com.cn/shiche/kongjian8242/" target="_blank">查看详细结果<i>>></i></a><a href="http://auto.sina.com.cn/shiche/kongjian8242/"><span>空间</span></a></h5>
        <div class="item_d Star5"> <!--<span class="fR"><em><a href="#">中型车空间排行</a></em>:第1名</span>--> <span class="fL"><strong class="cou">7</strong>分</span>

          <ul class="rating fL">
            <li></li>
            <li></li>
             <li></li>
            <li></li>
            <li></li>
            <li></li>
            <li></li>
            <li></li>

            <li></li>
            <li></li>
          </ul>
          <span class="fR s">（6-7.9分:合格）</span> </div>
        <div class="img"> <a href="http://auto.sina.com.cn/shiche/kongjian8242/" target=_blank><img src="http://www.sinaimg.cn/qc/http/data.auto.sina.com.cn/shiche/U7042P33T806D8F25016DT20111115134644.jpg" alt="" style="width:570px;height:380px;"  /></a> </div>
        <p>2700mm的轴距营造了H530不错的车内空间，无论是前排还是后排腿部空间都足以让人找到舒适的坐姿，尤其是值得一提的是比起老中华车上那有些过低的方向盘位置而言，H530在人机工程方面有了长足的进步。而美中不足的就是这套白色真皮包裹的座椅还是有些偏硬，另外包裹性也有些不足。</p>

        <div class="item_b"> <!--<span class="fL pic"><a href="#">空间图片</a></span> <span class="fL vd"><a href="#">空间视频</a></span>--> <a href="http://auto.sina.com.cn/shiche/kongjian8242/" target="_blank"  class="fR res">查看详细结果</a> </div>
      </li>
      <li class="cz n">
        <h5><a class="fR" href="http://auto.sina.com.cn/shiche/caokong8242/" target="_blank">查看详细结果<i>>></i></a><a href="http://auto.sina.com.cn/shiche/caokong8242/"><span>操控</span></a></h5>
        <div class="item_d Star6"> <!--<span class="fR"><em><a href="#">中型车操作排行</a></em>:第3名</span>--> <span class="fL"><strong class="cou">7</strong>分</span>

          <ul class="rating fL">
            <li></li>
            <li></li>
             <li></li>
            <li></li>
            <li></li>
            <li></li>
            <li></li>
            <li></li>

            <li></li>
            <li></li>
          </ul>
          <span class="fR s">（6-7.9分:合格）</span> </div>
        <div class="img"> <a href="http://auto.sina.com.cn/shiche/caokong8242/" target=_blank><img src="http://www.sinaimg.cn/qc/http/data.auto.sina.com.cn/shiche/U7042P33T806D8F25017DT20111115194917.jpg" alt="" style="width:570px;height:380px;"  /></a> </div>
        <p>变速器的挡把形状模仿了大众车系，呈现T字型的挡把用起来格外顺手，只不过这个外形与手感都非常酷似“大众”的变速杆却有着完全不同的性格，它允许你在不踩刹车的情况下直接推入“D”挡，也允许你在“N”挡的情况下点火着车，所以要分辨它和原版其实是一件很容易的事...</p>

        <div class="item_b"> <!--<span class="fL pic"><a href="#">操作图片</a></span> <span class="fL vd"><a href="#">操作视频</a></span>--> <a  href="http://auto.sina.com.cn/shiche/caokong8242/" target="_blank"  class="fR res">查看详细结果</a> </div>
      </li>
      <li class="cb n">
        <h5><a class="fR" href="http://auto.sina.com.cn/shiche/chengben8242/" target="_blank">查看详细结果<i>>></i></a><a href="http://auto.sina.com.cn/ceshi/8242/"><span>测试</span></a></h5>
        <div class="item_d Star7"> <!--<span class="fR"><em><a href="#">中型车成本排行</a></em>:第1名</span>--> <span class="fL"><strong class="cou">9</strong>分</span>

          <ul class="rating fL">
            <li></li>
            <li></li>
             <li></li>
            <li></li>
            <li></li>
            <li></li>
            <li></li>
            <li></li>

            <li></li>
            <li></li>
          </ul>
          <span class="fR s">（8-9.2分:优秀）</span> </div>
        <div class="img"> <a href="http://auto.sina.com.cn/shiche/chengben8242/" target=_blank><img src="http://www.sinaimg.cn/qc/http/data.auto.sina.com.cn/shiche/U7042P33T806D8F25018DT20111115194917.jpg" alt="" style="width:570px;height:380px;"  /></a> </div>
        <p>车身的整体强度很高，悬挂调教很成熟稳定，在绕桩的科目中表现出很强的能力，相比先下反而是的发动机的动力不足拖了后腿。</p>

        <div class="item_b"> <!--<span class="fL pic"><a href="#">成本图片</a></span> <span class="fL vd"><a href="#">成本视频</a></span>--> <a href="http://auto.sina.com.cn/shiche/chengben8242/" target="_blank" class="fR res">查看详细结果</a> </div>
      </li>
    </ul> <div class="clear"></div>
  </div>
   <div style="margin-top:10px"></div>
	<iframe src='./content.php?carId=8242&newId=806-8'  width="100%" id="ifr_cmnt" name="ifr_cmnt" frameborder="0" scrolling="no"></iframe>

	<script type="text/javascript">
		document.domain = "sina.com.cn";
		jQuery("#ifr_cmnt").load(function(){
			var ifr_height = document.getElementById("ifr_cmnt").contentWindow.document.body.scrollHeight;
			//alert(ifr_height);
			document.getElementById("ifr_cmnt").height = ifr_height;
		});
	 </script>
  </div>
    </div>
  </div>
</div>

<div class="foot_up">
  <h2><a title="" target="_blank" href="#"><img src="http://i2.sinaimg.cn/qc/2011img/sina_auto.png" alt="" /></a></h2>
  <dl>
    <dd>

      <form name="simple1" id="simple1" method="GET" action="http://so.auto.sina.com.cn/search.php" target="_blank">
        <input type="text" value="关键词" class="intext" name="skey" onclick="if(this.value=='关键词') this.value='';" style="width:140px">
        <select onchange="this.form.action = 'http://so.auto.sina.com.cn/' + this.value" id="service" name="service">
          <option value="search.php">综合</option>
          <option value="car.php">车型</option>
          <option value="news.php">新闻</option>
          <option value="price.php">报价</option>

          <option value="topic.php">专题</option>
          <option value="photo.php">图片</option>
          <option value="video.php">视频</option>
        </select>
        <input name="" type="submit" value="搜索" style="padding:1px 5px" id="bottom-searchBtn">
      </form>
    </dd>

    <dt><a title="返回顶部" href="#TOP">返回顶部</a></dt>
  </dl>
</div>
<div class="foot_bottom">
  <p><a href="http://corp.sina.com.cn/chn/">新浪简介</a> | <a href="http://corp.sina.com.cn/eng/">About Sina</a> | <a href="http://emarketing.sina.com.cn/">广告服务</a> | <a href="http://www.sina.com.cn/contactus.html">联系我们</a> | <a href="http://corp.sina.com.cn/chn/sina_job.html">招聘信息</a> | <a href="http://www.sina.com.cn/intro/lawfirm.shtml">网站律师</a> | <a href="http://english.sina.com">SINA English</a> | <a href="http://members.sina.com.cn/apply/">会员注册</a> | <a href="http://tech.sina.com.cn/focus/sinahelp.shtml">产品答疑</a></p>

  <p>Copyright © 1996-2011 SINA Corporation, All Rights Reserved</p>
  <p>新浪公司 <a href="http://www.sina.com.cn/intro/copyright.shtml">版权所有</a></p>
</div>
<ul class="fixedNav">
	<li><dl><dt><i></i><a href="http://data.auto.sina.com.cn/shiche/8242" title="总评">总评</a></dt></dl></li>
	<li><dl><dt><i></i><a href="http://auto.sina.com.cn/shiche/waiguan8242/" title="外观">外观</a></dt></dl></li>

	<li><dl><dt><i></i><a href="http://auto.sina.com.cn/shiche/neishi8242/" title="内饰">内饰</a></dt></dl></li>
	<li><dl><dt><i></i><a href="http://auto.sina.com.cn/shiche/kongjian8242/" title="空间">空间</a></dt></dl></li> 
	<li><dl><dt><i></i><a href="http://auto.sina.com.cn/shiche/caokong8242/" title="操控">操控</a></dt></dl></li>
	<li><dl><dt><i></i><a href="http://auto.sina.com.cn/shiche/chengben8242/" title="测试">测试</a></dt></dl></li>
</ul>
<script language='javascript'>
var cswb ="";
jQuery(function(){
	jQuery(".add").each(function(i){cswb += jQuery(this).attr("uid")+","})
	jQuery.getJSON("http://t.auto.sina.com.cn/interface/auto_t_friendships_show.php?callback=?",{ "source_id":userinfo.dquid.uid ,"target_ids":cswb},function(data){
			var num = data.length;
			for(var i=0;i<num;i++){
				if(data[i].followed == true){
				   jQuery(".add").eq(i).addClass("ygz").html("以关注");
				}
			}
	});
		
	jQuery(".add").click(function(){
			var uid = jQuery(this).attr("uid");
			if(userinfo.dquid.uid){//判断是否登录
			   jQuery("input[name=fuid]").val(jQuery(this).attr("uid")+",");
			   jQuery("#gzsubmit").submit();//提交关注
			   jQuery(this).addClass("ygz").html("以关注")
			  return false;
		 }else{
			  alert("请先登陆您的微博账号！");
			  openLogin();
			  return false; 
		 }
	});
});	
</script>
<form name="gz"  id="gzsubmit"action="http://t.auto.sina.com.cn/test/upload_js2.php" method="post" target="ifrWindow">
    <input type="hidden" name="opt" value="gz">

    <input type="hidden" name="fuid" value="">
</form>
<iframe id='ifrWindow' name="ifrWindow" style='display:none;'></iframe>
<script src="http://auto.sina.com.cn/js/jq142.js"></script>
<script type="text/javascript" src="http://data.auto.sina.com.cn/shiche/js/script.js"></script>
<!-- SUDA_CODE_START --> <script type="text/javascript" src="http://www.sinaimg.cn/unipro/pub/suda_s_v851c.js"></script> <script type="text/javascript" > _S_pSt(_S_PID_); </script> <noScript> <div style='position:absolute;top:0;left:0;width:0;height:0;visibility:hidden'><img width=0 height=0 src='http://beacon.sina.com.cn/a.gif?noScript' border='0' alt='' /></div> </noScript> <!-- SUDA_CODE_END --> <!-- START WRating v1.0 --> <script type="text/javascript" src="http://sina.wrating.com/a1.js"></script> <script type="text/javascript"> try{ var vjAcc="860010-0316010000"; var wrUrl="http://sina.wrating.com/"; vjTrack(""); }catch(e){}; </script> <noscript><img src="http://sina.wrating.com/a.gif?a=&c=860010-0316010000" width="1" height="1" style="display: none;"/></noscript> <!-- END WRating v1.0 --> <!-- START Nielsen//NetRatings SiteCensus V5.3 --> <!-- COPYRIGHT 2006 Nielsen//NetRatings --> <script type="text/javascript"> var _rsCI="cn-sina2006"; var _rsCG="0"; var _rsDN="//secure-cn.imrworldwide.com/"; var _rsCC=0; var _rsSE=1; var _rsSM=0.01; var _rsSS=1500; </script> <script type="text/javascript" src="//secure-cn.imrworldwide.com/v53.js"></script> <noscript> <img src="//secure-cn.imrworldwide.com/cgi-bin/m?ci=cn-sina2006&cg=0" alt=""/> </noscript> <!-- END Nielsen//NetRatings SiteCensus V5.3 --> 


</body>
</html>

此时红色的代码都是延长页面渲染的线程的执行时间的，再次打开http://localhost/study/a.html

结果先弹出AJAX异步回调结果标志


后弹出a页面获取的高度值此时您会发现这个值是正确的，点击确定后会显示除ajax回调产生的黄色区域。可见这个AJAX的执行与渲染面的线程是分开的，如果不注意这个细节就会造成主页面设置高度似乎‘不能自适应’的问题，当然AJAX执行时间很长的话，就又是另一种结果，可能您的这个大的页面渲染结束了还没有回调完成呢，比如在data/sleep.php加入sleep(10);

此时的sleep.php的页面代码

<?php
	sleep(10);
	echo '<div style="height:300px;width:1000px;background-color:#FFF000;">这只是个测试</div>';

结果先弹出不正确的页面高度，在弹出回调完成标志


如此这个问题就变得复杂了，要受到静态页面大小，网络延时，后端接口执行时间的影响，具有概率性和随机性，所以如果有依赖与ajax的操作要注意检测( ⊙ o ⊙ )！，不要武断的认为是JS代码不兼容，比如没有经验的我们尽然折腾了几天，各种百度和谷歌查找兼容性的问题。直到最后在AJAX回调中加入了设置父页面iframe高度的代码才解决问题，当然如果不怕体验不太好的哈也可关掉异步请求，就是将 async: false, 设置为false，将会避免此类问题。如果原生AJAX，则是在open(method,url,async)方法中，采用同步访问方法。

可以结合上一篇文章http://blog.youkuaiyun.com/lvsmaster/article/details/6589558 一起理解这个浏览器的各个线程的关系

Python爬虫实战：研究ajax异步渲染加密
ylfhpy的博客
05-12 1222
在数字化时代，数据采集成为推动行业发展的重要工具，而AJAX异步渲染技术的广泛应用给传统爬虫带来了挑战。本文探讨了如何利用Python的爬虫技术应对AJAX异步渲染问题，并通过一个电商网站的实际案例进行了详细分析。文章首先介绍了Python爬虫的基础库（如Requests、BeautifulSoup、Scrapy）以及处理AJAX异步渲染的关键技术（如Selenium、WebDriver、逆向工程）。随后，深入解析了AJAX异步渲染的工作原理及其对爬虫的影响，包括数据动态加载、请求参数复杂化以及反爬机制的增
相关业务问题+系统问题+设计问题整理统计
热门推荐
曾经“等你生日那天”都遥远得像未来，如今却可欢愉的挥手说“下个十年见”
04-07 172万+
业务系统及其他相关面试问题整理：线上相关问题排查+高并发系统的限流+高并发秒杀系统设计+负载均衡+一个网站有 20 亿 url 存在一个黑名单中，这个黑名单要怎么存？若此时随便输入一个 url，你如何快速判断该 url 是否在这个黑名单中？并且需在给定内存空间（比如：500M）内快速判断出？
防止ajax请求参数被修改,spingboot、vue防止多次请求、参数篡改、数据完整
weixin_36210904的博客
08-06 942
1、vue请求传值为：时间戳(timeStamp)、随机数(nonce)、sign(url+params参数排序并进行加密)2、后台获取请求内容，a、先验证访问时间戳是否超出请求范围b、验证随机数(nonce)是否已经使用过c、后台对获取的参数进行排序并加密，验证获取的标签是否与sign是否同一值注：传参模式vue传参模式为params@PostMapping("/add")public Ajax...
Ajax的异步通信引发的一个随机性问题<1>
lvsmaster的专栏
12-06 800
【ajax的简介】 ​​AJAX（异步JavaScript和XML的缩写）[1]是一组相互关联的用于创建异步的客户端Web应用程序的方法。有了Ajax，Web应用程序可以发送数据，并检索数据，服务器异步（在后台），而不会干扰现有的网页的显示和行为。通常使用XMLHttpRequest对象检索数据。尽管名字中含有xml，并不一定必须使用XML（JSON是经常被用来代替），请求的方式不一定必须为异步
Ajax 异步通信详解
jclee95的个人博客
07-15 854
Ajax异步通信基础。
2个ajax嵌套会卡主,ajax嵌套ajax 可能出现问题 的解决办法
weixin_36274103的博客
08-05 706
ajax由于他的异步特性 在第一次请求中的循环中嵌套第二个ajax会数据会读不出来第一种描述：如果条件许可,把两次请求都放在服务端处理掉一起发回来,这些就在客户端只有一次ajax了优点：代码放在服务端,安全性比较,且服务端处理速度较快缺点：可能请求的数据格式是json,这样在服务端处理JSON数据还需要对JSON进行反序列化,这样就比较麻烦第二种描述：是我第一次解决这个问题的时候用的比较蠢的办法,...
使用AJAX技术发送异步请求--flask小例子（转载）
giggle544的专栏
08-10 646
使用AJAX技术发送异步请求 什么是AJAX AJAX指一步Javascript和XML（Asynchronous JavaScript And XML），它是一些列技术的组合，简单来说AJAX基于XMLHttpRequest让我们在不重载页面的情况下和服务器进行数据交换。 加上JavaScript和DOM（Document Object Model,文档对象模型），我们就可以在接收到响应数...
ajax请求封装,封装的ajax请求
weixin_33676046的博客
08-06 1707
在做登录注册这类提交表单数据时，我们经常需要局部刷新网页来验证用户输入的信息，这就需要用到ajax请求，我们通常需要获取表单中的数据，发起ajax请求,通过服务程序，与数据库的数据进行比对，判断信息的正确与否。这儿也将ajax请求进行了封装，当我们在项目中需要多次ajax请求时，就可以用封装的函数了，不用每次都写ajax请求，提高了代码的利用率和工作效率。当然封装得不一定很完美，网上也有很多优秀的...
vue路由跳转及其ajax请求,Vue Router路由守卫妙用：异步获取数据成功后再进行路由跳转并传递数据，失败则不进行跳转...
weixin_31762925的博客
08-05 1916
问题引入试想这样一个业务场景：在用户输入数据，点击提交按钮后，这时发起了ajax请求，如果请求成功，则跳转到详情页面并展示详情数据，失败则不跳转到详情页面，只是在当前页面给出错误消息。难点所在需要注意的是，这里并没有单独的接口用于判断用户是否通过校验，而是若用户通过校验，接口就直接返回了用户需要的详情信息，未通过校验则不会返回详情信息并报错。常见方案问题分析(一)用户点击按钮后直接跳转到详情页面，...
WordPress中利用AJAX异步获取评论用户头像的方法
11-29
在WordPress中，利用AJAX异步获取评论用户头像是一个有趣且能提升网站互动体验的技术。这个功能允许在用户输入邮箱后，不刷新页面的情况下，动态加载对应的Gravatar头像，给用户带来一种即时反馈的感觉。尽管这并不...
Ajax异步无刷新验证码
01-29
2. **Ajax请求**：当用户点击刷新按钮时，JavaScript通过XMLHttpRequest对象向服务器发送一个异步请求，请求新验证码的信息。这个请求通常是POST类型，可能需要携带一些安全相关的参数，如用户的session ID。 3. **...
基于PHP的帝国CMS隐藏播放地址，完美Ajax异步获取播放地址方法源码.zip
10-10
总结起来，这个压缩包提供的源码涉及到的关键技术有PHP的服务器端编程、帝国CMS的内容管理系统应用、以及Ajax异步通信在前端的实现。这些技术结合在一起，实现了在保证安全性的同时，提供流畅的用户体验，避免了直接...
Jquery Ajax学习实例3 向WebService发出请求，调用方法返回数据
10-29
本节将详细介绍如何使用JQuery Ajax向一个WebService发送请求并处理返回的数据。 ##### 1. WebService端实现 在这个例子中，我们使用了一个简单的.NET WebService（`WebService.asmx`），其中定义了一个名为`...
一段登录新浪微博的IE6的javascript脚本总是被浏览器aborted的解决办法
lvsmaster的专栏
07-07 2961
var is_login; function showLogin(){ var html = ''; if(userinfo.dquid.uid){ is_login=1; html += ''+userinfo.dquid.screen_name+'粉丝人
getBoxObjectFor火狐专用的获取dom 的位置和大小
lvsmaster的专栏
12-13 1684
<br /> if (document.getBoxObjectFor) { //火狐专有的判断方式 j = document.getBoxObjectFor(e); var k = (e.style.borderLeftWidth) ? parseInt(e.style.borderLeftWidth) : 0;//边框 var h = (e.style.borderTopWidth) ? parseInt(e.style.bo
object.getBoundingClientRect()获取对象的位置
lvsmaster的专栏
12-13 1013
<br />Retrieves an object that specifies the bounds of a collection of TextRectangle objects. <br />SyntaxoRect = object.getBoundingClientRect()<br />Return Value<br />Returns a TextRectangle object. Each rectangle has four integer properties (top, left, r
实现Ajax技术的异步无刷新验证码系统
- 后端服务器需要处理验证请求并返回验证结果，通常是通过一个RESTful API端点来实现。 - 后端还需要负责生成验证码图像并存储验证码值，以便在验证请求到来时进行匹配。 6. **用户体验优化** - 使用Ajax异步无...
评论
成就一亿技术人!
拼手气红包6.0元
还能输入1000个字符
 
红包 添加红包
表情包 插入表情
表情包 代码片
 条评论被折叠 查看
添加红包

请填写红包祝福语或标题

个

红包个数最小为10个

元

红包金额最低5元

当前余额3.43元 前往充值 >
需支付：10.00元
成就一亿技术人!
领取后你会自动成为博主和红包主的粉丝 规则
hope_wisdom
发出的红包
实付元
使用余额支付
点击重新获取
扫码支付
钱包余额 0

抵扣说明：

1.余额是钱包充值的虚拟货币，按照1:1的比例进行支付金额的抵扣。
2.余额无法直接购买下载，可以购买VIP、付费专栏及课程。

余额充值