How to speed up ajax request?

L

lemonlimelike2017-10-01 15:47:57

JavaScript

lemonlimelike, 2017-10-01 15:47:57

Hello. I have an ajax request on my site, how can I speed it up?
Well, or easier, how can I generally speed up the download of everything?

<!DOCTYPE HTML>
<html lang="ru">
<head>
  <title><?php echo $config["title"]?></title>
  <meta name="viewport" content="width=device-width,initial-scale=1">

  <meta name='wmail-verification' content='2ff8fc3bb3d5112ef51c54d2a2331141' />
  <meta name="google-site-verification" content="EoMoXgxQ910tnIb-hUpAwPy_MRi7PC2R1I332o-GtwE" />
  <meta name="yandex-verification" content="8748706e6bb4624d" />
  <meta charset="utf-8">

  <script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.2.1/jquery.min.js"></script>
    <script src="https://ajax.googleapis.com/ajax/libs/jquery/1.7.1/jquery.min.js" type="text/javascript"></script>
    <script src="https://code.jquery.com/jquery-3.2.1.min.js" type="text/javascript"></script>

  <link rel="stylesheet" href="uikit/uikit.min.css" />
    <script src="uikit/uikit.min.js"></script>
    <script src="uikit/uikit-icons.min.js"></script>
</head>
<body>
<div class="scrollup" style="display: none;">
    <div uk-sticky="offset: 600">
        <a href="" uk-totop alt="Наверх" title="Наверх"></a>
    </div>
    <div class="uk-sticky-placeholder"></div>
</div>
    <?php require"inc/head.php"; ?>    
<!-- Пишем сайдбар и главный кнтейнер с содержимым -->
<div class="uk-offcanvas-content">
    <div class="uk-section uk-section-muted uk-section-small">
        <div class="uk-container">
            <div uk-grid>
                <div class="uk-width-1-4 [email protected]">
                    <div class="uk-tile uk-tile-default uk-box-shadow-small">
                        <?php require_once "inc/cat.php"; ?>
                    </div>
                        <div class="uk-wudth-1-4">
                            <div class="uk-tile uk-tile-default uk-box-shadow-medium uk-flex uk-margin-medium-top">
                                <li class="uk-nav-header">Ссылки на ресурсы</li>
                                    <li>
                                        <?php 
                                            include_once($_SERVER['DOCUMENT_ROOT'].'/link/mainlink.php');  
                                            $o['USERNAME'] = 'EE15B8570ABB30CA961A1314C96EC73B'; 
                                            $client_lnk = new MLClient($o); 
                                            echo $client_lnk->build_links();  
                                        ?>
                                    </li>
                            </div>
                        </div>
                </div>
                <div class="uk-width-3-4 uk-width-expand">
                    <div class="uk-tile uk-tile-default uk-box-shadow-small">
                        <h1 class="uk-text-capitalize uk-text-muted" style="font-size: 18px;">ВСЕ ВИДЕО</h1>
                        <?php require_once "inc/mov.php"; ?>
                    </div>
                </div>
            </div>
        </div>
    </div>
</div>
  <?php require"inc/footer.php";?>
<script src="../js/ajax-zapros.js" type="text/javascript"> </script>
<script>
$(document).on('click', '#ajax-book', function(){

  var self = this;

     $.ajax({
        url: '../inc/ajax-book.php',
        method: 'GET',
        dataType : "json",
        data: {
            video_id:$(self).data("id")
        },
        success: function(data) {
            console.log(data);
            data: {video_id:$(self).data('id')}
        }
        });
    });
</script>

</body>

</html>

What can you tell by looking at this code?

UPDATE: I forgot to provide the ajax code itself, sorry...

$(document).ready(function (){
      var num = 4;
      var inProcess = false;
      $(window).scroll(function(){
        if ($(window).scrollTop() + $(window).height() >= $(document).height() - 200 && !inProcess ){
        	console.log("1");
        $.ajax({
        url: '../inc/load.php',
        method: 'GET',
        dataType:'json',
        data: "num="+num,
        beforeSend: function(){
          inProcess = true;
        },
          success: function(data){
            $.each(data, function(index, data){
            $(".video").append('<div class="uk-card"><div class="uk-card-default"><a href="video.php?id=' + data.id +'"><div class="uk-card-media-top uk-inline uk-inline-clip uk-transition-toggle"><img class="uk-transition-scale-up uk-transition-opaque" src="../media/images/' + data.img +'.jpg'+ '" alt="' + data.title + '"><div class="uk-position-medium uk-position-cover uk-overlay uk-flex uk-flex-center uk-flex-middle uk-light"><span uk-icon="icon: play-circle; ratio: 3.5"></span></div><div class="uk-light uk-position-bottom-left"><span class="uk-icon uk-icon-image uk-light" style="background-image: url(../media/views.png)"></span><span class="uk-text-large">' + data.view + '</span></div></div></a></div><div class="uk-card-body"><p>' + data.title + '</p></div><div id="ajax-book" data-id="' + data.id + '" uk-toggle="target: #ajax" class="uk-position-top-right"><span uk-icon="icon: bookmark; ratio: 2"  title="Добавить в залкадки"></span></div></div>');
            });
            inProcess = false;
            num += 2; //значения с load.php должны быть одинаковы
          }
        });
        }
      });
    });

And its handler (if needed)

$num = intval($_GET['num']);
    $lim = 2; // кол-во выводящихся после ajax
    $sql_1 = "SELECT * FROM `video` ORDER BY `id` DESC LIMIT {$num}, $lim";
    $std = $pdo->query($sql_1);
    $result = $std->fetchAll();
    echo json_encode($result);

Reply

Answer the question

In order to leave comments, you need to log in

2 answer(s)

I

Ilya Serov, 2017-10-01
@lemonlimelike

I will say that you are a pervert, why include 3 versions of the JQuery library?

I

Ihor Bratukh, 2018-10-22
@BRAGA96

Ajax request cannot be accelerated. You can just make a request before the browser parses dom, js, read about link preload html. In the same way, you can speed up the loading of js, css files. Drop all scripts to</body>