Geekly Articles each Day

AJAXを使用したPHPスクリプトの段階的な操作の実装

スクリプトの段階的な操作を整理するための多かれ少なかれシンプルで普遍的なツールを探していましたが、何も見つかりませんでした。 QAの質問でさえ、どこでも一般的なフレーズのみを尋ねました 。 したがって、私は自分でそのような楽器を作ることにしました。

これは何のためですか？


インポートなどのために、非常に大きなファイルでスクリプトを処理する必要がある場合があります。 当然、スクリプトの実行時間は、ファイルのサイズまたはファイル内の行数に比例して増加します。

ファイル処理をいくつかの部分に分割し、スクリプトを既に部分で動作するようにしたいと思います。
画像
実装の原則は古くから知られています-サーバーとクライアント間のデータ交換：
クライアントはスクリプトを実行し、いくつかの反復を実行して、停止した行番号をクライアントに返します。 その後、クライアントは新しいリクエストを作成します。このリクエストでは、この番号をスクリプトに渡し、スクリプトはさらに機能し続けます。

実際にはコード自体



仕事には、次のものが必要です。

index.html
<html> <head> <title>ScriptOffset -      </title> <script type="text/javascript" src="http://yandex.st/jquery/1.7.1/jquery.min.js"></script> <script type="text/javascript" src="scriptoffset.js"></script> <link rel="stylesheet" type="text/css" href="scriptoffset.css"> </head> <body> <div class="form"> <input id="url" name="url"> <input id="offset" name="offset" type="hidden"> <div class="progress" style="display: none;"> <div class="bar" style="width: 0%;"></div> </div> <a href="#" id="runScript" class="btn" data-action="run"></a> <a href="#" id="refreshScript" class="btn" style="display: none;"></a> </div> </body> </html>

scriptoffset.php
 <?php //    Ajax if ($_SERVER['HTTP_X_REQUESTED_WITH'] != 'XMLHttpRequest') {return;} //      action        . $action = $_POST['action']; if (empty($action)) {return;} $count = 50; $step = 1; //      $url = $_POST['url']; if (empty($url)) return; $offset = $_POST['offset']; // ,     $offset = $offset + $step; if ($offset >= $count) { $sucsess = 1; } else { $sucsess = round($offset / $count, 2); } //     (       ) $output = Array('offset' => $offset, 'sucsess' => $sucsess); echo json_encode($output);

scriptoffset.js
 function setCookie (url, offset){ var ws=new Date(); if (!offset && !url) { ws.setMinutes(10-ws.getMinutes()); } else { ws.setMinutes(10+ws.getMinutes()); } document.cookie="scriptOffsetUrl="+url+";expires="+ws.toGMTString(); document.cookie="scriptOffsetOffset="+offset+";expires="+ws.toGMTString(); } function getCookie(name) { var cookie = " " + document.cookie; var search = " " + name + "="; var setStr = null; var offset = 0; var end = 0; if (cookie.length > 0) { offset = cookie.indexOf(search); if (offset != -1) { offset += search.length; end = cookie.indexOf(";", offset) if (end == -1) { end = cookie.length; } setStr = unescape(cookie.substring(offset, end)); } } return(setStr); } function showProcess (url, sucsess, offset, action) { $('#url, #refreshScript').hide(); $('.progress').show(); $('#runScript').text('!'); $('.bar').text(url); $('.bar').css('width', sucsess * 100 + '%'); setCookie(url, offset); $('#runScript').click(function(){ document.location.href=document.location.href }); scriptOffset(url, offset, action); } function scriptOffset (url, offset, action) { $.ajax({ url: "http://bfmn.ru/scriptoffset/scriptoffset.php", type: "POST", data: { "action":action , "url":url , "offset":offset }, success: function(data){ data = $.parseJSON(data); if(data.sucsess < 1) { showProcess(url, data.sucsess, data.offset, action); } else { setCookie(); $('.bar').css('width','100%'); $('.bar').text('OK'); $('#runScript').text(''); } } }); } $(document).ready(function() { var url = getCookie("scriptOffsetUrl"); var offset = getCookie("scriptOffsetOffset"); if (url && url != 'undefined') { $('#refreshScript').show(); $('#runScript').text(''); $('#url').val(url); $('#offset').val(offset); } $('#runScript').click(function() { var action = $('#runScript').data('action'); var offset = $('#offset').val(); var url = $('#url').val(); if ($('#url').val() != getCookie("scriptOffsetUrl")) { setCookie(); scriptOffset(url, 0, action); } else { scriptOffset(url, offset, action); } return false; }); $('#refreshScript').click(function() { var action = $('#runScript').data('action'); var url = $('#url').val(); setCookie(); scriptOffset(url, 0, action); return false; }); });

scriptoffset.css
 input { font-size: 13px; margin: 0; padding: 0 3px; vertical-align: middle; border: 1px solid #CCCCCC; border-radius: 3px 3px 3px 3px; color: #808080; display: inline-block; font-size: 13px; height: 26px; line-height: 18px; width: 243px; -moz-transition: border 0.2s linear 0s, box-shadow 0.2s linear 0s; box-shadow: 0 1px 3px rgba(0, 0, 0, 0.1) inset; } .btn { font-size: 13px; padding: 5px 8px; background-color: #0064CD; background-image: -moz-linear-gradient(center top , #049CDB, #0064CD); background-repeat: repeat-x; border-color: rgba(0, 0, 0, 0.1) rgba(0, 0, 0, 0.1) rgba(0, 0, 0, 0.25); color: #FFFFFF; display: inline-block; vertical-align: middle; border-radius: 3px 3px 3px 3px; text-shadow: 0 -1px 0 rgba(0, 0, 0, 0.25); text-decoration: none; } .btn:hover { background-position: 0 -15px; } .btn:active { box-shadow: 0 2px 4px rgba(0, 0, 0, 0.25) inset, 0 1px 2px rgba(0, 0, 0, 0.05); } .progress { font-size: 13px; margin: 0; vertical-align: middle; background-color: #F7F7F7; background-image: -moz-linear-gradient(center top , #F5F5F5, #F9F9F9); background-repeat: repeat-x; border-radius: 4px 4px 4px 4px; box-shadow: 0 1px 2px rgba(0, 0, 0, 0.1) inset; height: 28px; width: 250px; overflow: hidden; display: inline-block; } .progress .bar { background-color: #0E90D2; background-image: -moz-linear-gradient(center top , #149BDF, #0480BE); background-size: 40px 40px; -moz-box-sizing: border-box; -moz-transition: width 0.6s ease 0s; background-repeat: repeat-x; box-shadow: 0 -1px 0 rgba(0, 0, 0, 0.15) inset; color: #FFFFFF; float: left; font-size: 12px; height: 100%; text-align: left; padding: 5px 8px; font-size: 13px; text-shadow: 1px 1px #333; white-space: nowrap; } div.form { margin: 150px auto 0; width: 500px; }


登録のために、cssはBootstrapからいくつかのルールを取りました。

結果は何ですか

urlフィールドでは、たとえば、処理するファイルへのリンクを示し、スクリプトを実行します。 進行状況バーが表示されます。作業の結果を確認するために、進行状況バーが100％になるまで待機します。

このソリューションを使用する場合：


コミュニティにこのような機能の実装例や、スクリプトを使用した段階的な作業のための既製のソリューションが実装されている場合は、コメント内のリンクに感謝します。

UPD。 MODXに適合したソリューションはこちらです。

Source: https://habr.com/ru/post/J153731/

More articles:


All Articles