如何提高ajax的加载速度

时间:2014-08-06 08:27:48

标签: jquery ajax

我有ajax的任务,即jquery ajax。我有2页main.php和ajx_receipt_sub_detail.php。我在加载ajax页面时有延迟。任何人都建议加快ajax加载的速度。

main.php

<script src="scripts/jquery-1.11.0.min.js"></script>
 <script>
function sub_detail(id)
{
   setTimeout(function() {
  $.ajax({
    type: "POST",
    url: 'ajx_receipt_sub_detail.php',
    data:'id='+id + '&exchange_rate=' + exchange_rate,
    success: function(msg)
     { 
      $("#sub_detail").html(msg);
      $(function() {
        $( "#slip_date2" ).datepicker({dateFormat:'yy-mm-dd'});
          });
     }
     }); 
   }, 10);  
  }
  </script>
  <select name="deposited_type" id="deposited_type" onchange="sub_detail(this.value)">
                                <option     value="">Select</option>
                <option value="Direct Bank Deposit">Direct Bank Deposit</option>
                <option  value="CDM">CDM</option>
                <option  value="Cash Handover">Cash Handover</option>

                 <option value="Western Union">Western Union</option>
                  <option value="Express Money Transfer">
        Express Money Transfer</option>
                 <option  value="Others">Others</option>  
              </select>

ajx_receipt_sub_detail.php

   <?php
  $id=$_POST['id'];
  $exchange_rate=$_POST['exchange_rate'];?>

  <?php
  if($id=='CDM')
  {
  ?>

   <table  width="800" align="center" bordercolor="#CCCCCC" >
            <tr class="evenRow" >
             <td align="right" valign="top" class="txt" style="margin-left:30px;" >
     <strong>Bank : </strong></td>
              <td align="left" valign="top" >
        <div id="bank_list">
       <select onchange="bank_ac_no2(this.value)"
        name="bank" id="bank"        class="txtfld"   style="width:130px;"  >
        <option value="">Select</option>
       </select></div></td>
         <td align="right" valign="top" class="txt"><strong>Bank AC No : </strong></td>
        <td align="left" valign="top" class="txt"><div id="bank_ac_no">
        <input name="bank_ac_no" type="text" class="txtfld"
        id="bank_ac_no" value=""  disabled="disabled" /></div></td>
        </tr>
        </table>
         <?php
   }
  elseif($id=='Cash Handover')
  {
  ?>    
    <table width="800" align="center"  bordercolor="#CCCCCC">
   <tr class="oddRow">
    <td align="right" valign="top" class="txt"><strong>Description : </strong></td>
              <td align="left" valign="top" class="txt">
              <textarea name="description" cols="20" id="description" rows="2">   
           </textarea>
              </td>

              <td align="right" valign="top" class="txt"></td>
              <td align="left" valign="top"></td>   
                              </tr>
                    </table>

  <?php
    }
  elseif($id=='Direct Bank Deposit')
   {

   ?>
  <table  width="800" align="center" bordercolor="#CCCCCC">


                                 <tr class="evenRow">

   <td align="right" valign="top" class="txt">  <strong>Description : </strong></td>
  <td align="left" valign="top" class="txt">
   <textarea name="description" cols="20" id="description" rows="2"></textarea>
              </td>
    <td align="right" valign="top" class="txt"><strong>
    </strong></td>
              <td align="left" valign="top" class="txt">
              </td>                  
                          </tr>
                    </table >


   <?php
  }
  else
   {
  ?>
   <table width="800" align="center"  bordercolor="#CCCCCC">

    <tr class="evenRow">

    <td align="right" valign="top" class="txt"><strong>Sender Name : </strong></td>
    <td align="left" valign="top" class="txt">
    <input name="sender_name" type="text" class="txtfld" id="sender_name" value=""  />
      </td>
     <td align="right" valign="top" class="txt"><strong>Receiver Name</strong></td>
     <td align="left" valign="top">
       <input name="receiver_name" type="text"
      class="txtfld" id="receiver_name" value="" /></td>    
        </tr>   

                    </table >
    <?php
    }
    ?>

2 个答案:

答案 0 :(得分:1)

根据我的理解,您希望快速响应ajax。 可能有许多因素会影响请求的加载/处理时间。这取决于服务器的功能,脚本代码等。

您可以参考此处以减少ajax通话的处理时间:http://www.peachpit.com/articles/article.aspx?p=1851233

答案 1 :(得分:0)

您可以使用jquery setTimeout()

setTimeout(function() { /* Your Code */ }, 4000);

(这将在执行ajax请求之前等待四秒钟。)

如果您想了解有关setTimeout()的详情,请参阅此处

https://developer.mozilla.org/en/docs/Web/API/window.setTimeout

试试这个: -

<script>
function sub_detail(id)
{
$.ajax({
type: "POST",
url: 'ajx_receipt_sub_detail.php',
data:'id='+id + '&exchange_rate=' + exchange_rate,
success: function(msg)
{ 
  $("#sub_detail").html(msg);
  $(function() {
  $( "#slip_date2" ).datepicker({dateFormat:'yy-mm-dd'});
  });

   //TO SET THE TIMEOUT FOR DATA TO LOAD

  setTimeout(function(){
          sub_detail();
       }, 10000);
}
});  
}
</script>