javascript - ネストされた JavaScript によりコメントシステムが遅くなる

Question

ユーザーが写真を閲覧してコメントできるシステムを作成しました。ユーザーがアルバムをクリックすると、最初の写真 (コメントとコメントへの返信付き) がページの中央に表示されるページに移動します。右側には、現在のアルバムの他のすべての写真が一覧表示されます。

この部分は単純な PHP コードで行われ、新しいページが読み込まれるたびに表示されます。

ユーザーが写真の 1 つ (右側にリストされている) をクリックすると、ページ全体ではなく、対応する要素 (写真、コメント、コメントへの返信) のみが Ajax 経由で読み込まれます。

これはこれまでのところうまくいきます。理解を深めるために対応するコードを次に示します。

PHP:

// Get data from the database to display the current photo and its comments on the page
// Some Code

// Here is the included file to get the HTML for the comments --> Problem number 2

// List all the photos of the current album at the right side
$album_id = preg_replace('#[^0-9]#', '', $_GET['id']);

$sql = "SELECT * FROM albums WHERE id='$album_id' LIMIT 1";
$user_query = mysqli_query($db_conx, $sql);

while ($row = mysqli_fetch_array($user_query, MYSQLI_ASSOC)) {
    $u = $row['user'];
}

$sql = "SELECT DISTINCT * FROM photos WHERE album_id='$album_id'"; 
$query = mysqli_query($db_conx, $sql);

while ($row = mysqli_fetch_array($query, MYSQLI_ASSOC)) {

    $id = $row['id'];
    $filename = $row['filename'];

    $style_list_right .= '<div id="right_'.$id.'" onclick="getPhotos(\''.$album_id.'\',\''.$id.'\',\''.$u.'\')">';
    $style_list_right .=     '<img src="'.USERFILES . $u.'/'.$filename.'" />';
    $style_list_right .= '</div>';
}

ユーザーが写真をクリックすると、関数 getPhotos() が呼び出されます

function getPhotos(album,photo,user){
    var ajax = ajaxObj("POST", "path/some_php_file.php");
    ajax.onreadystatechange = function() {
        if(ajaxReturn(ajax) == true) {
            // Get a string from PHP delimited by |
            var photo = ajax.responseText.split("|");

            // Change the HTML to display the photos

            // Call the Function to get the comments
            getComments(photo);
        }
    }
    ajax.send("show=photos&photo="+photo);
}

function getComments(photo) {
    var ajax = ajaxObj("POST", "path/some_php_file.php");
    ajax.onreadystatechange = function() {
        if(ajaxReturn(ajax) == true) {
            // Get a string from PHP delimited by |
            var comments = ajax.responseText.split("|||");
            for (var i = 0; i < comments.length; i++){ 
                var comment = comments[i].split("|");
                if(comment[1] == "<?php echo $log_username; ?>") {      // If the user is the author of the comment
                    // Change the HTML of the comments
                    _('comment_'+photo).innerHTML += '<?php echo $comments_html; ?>';    // This is for problem number 2

                    // Call the Function to get the replies of the comment
                    getReplies(comment[0]);    // Send the ID of the comment
                }
            }
        }
    ajax.send("show=comments&photo="+photo);
}

function getReplies(commentID) {
    var ajax = ajaxObj("POST", "path/some_php_file.php");
    ajax.onreadystatechange = function() {
        if(ajaxReturn(ajax) == true) {
            // Get a string from PHP delimited by |
            var replies = ajax.responseText.split("|||");
            for (var i = 0; i < replies.length; i++){ 
                var reply = replies[i].split("|");
                if(reply[1] == "<?php echo $log_username; ?>") {        // If the user is the author of the reply
                    // Change the HTML of the replies
                    _('reply_'+ commentID).innerHTML += '<?php echo $replies_html; ?>';    // This is for problem number 2
                }
            }
        }
        ajax.send("show=replies&commentID="+commentID);
    }
}

some_php_file.php:

// Ajax calls this to load the clicked Photo --> getPhotos()
if (isset($_POST["show"]) && $_POST["show"] == "photos"){
    $picstring = "";
    $photo_id = preg_replace('#[^0-9]#', '', $_POST["photo"]);
    $sql = "...";
    $query = mysqli_query($db_conx, $sql);
    while ($row = mysqli_fetch_array($query, MYSQLI_ASSOC)) {
        $filename_1 = $row["..."];
        $filename_2 = $row["..."];
        $photoname = $row["..."];
        $picstring .= "$filename_1|$filename_2|$photoname|||";
    }
    mysqli_close($db_conx);
    $picstring = trim($picstring, "|||");
    echo $picstring;
    exit();
}

// Ajax calls this to load the comments of the clicked photo --> getComments()
if (isset($_POST["show"]) && $_POST["show"] == "comments") {
    $commentstring = "";
    $photo_id = preg_replace('#[^0-9]#', '', $_POST["photo"]);
    $sql = "...";
    $query = mysqli_query($db_conx, $sql);
    while ($row = mysqli_fetch_array($query, MYSQLI_ASSOC)) {
        $commentid = $row["..."];
        $author = $row["..."];
        $postdate = $row["..."];
        $avatar = $row["..."];
        $user_image = '<img src="'.USERFILES.$author.'/'.$avatar.'" />';
        $data = $row["..."];
        $data = nl2br($data);
        $data = str_replace("&amp;","&",$data);
        $data = stripslashes($data);
        $statusDeleteButton = '';
        if($author == $log_username) {      //  || $account_name == $log_username
            $statusDeleteButton = '...';
        }
        $commentstring .= "$commentid |$author|$data|$postdate|$user_image|$statusDeleteButton|||";
    }
    mysqli_close($db_conx);
    $commentstring = trim($commentstring, "|||");
    echo $commentstring;
    exit();
}

// Ajax calls this to load the replies of the comments --> getReplies()
if (isset($_POST["show"]) && $_POST["show"] == "replies") {
    $commentstring = "";
    $comment_id = preg_replace('#[^0-9]#', '', $_POST["comment"]);
    // GATHER UP ANY STATUS REPLIES
    $status_replies = "";
    $sql = "...";
    $query_replies = mysqli_query($db_conx, "...");
    $query_replies = mysqli_query($db_conx, $sql);
    $replynumrows = mysqli_num_rows($query_replies);
    if($replynumrows > 0) {
        while ($row = mysqli_fetch_array($query_replies, MYSQLI_ASSOC)) {
            $replyid = $row["…"];
            $replyauthor = $row["..."];
            $replydata = $row["..."];
            $avatar = $row["…"];
            $user_image = '<img src="'.USERFILES.$replyauthor.'/'.$avatar.'"/>';
            $replydata = nl2br($replydata);
            $replypostdate = $row["..."];
            $replydata = str_replace("&amp;","&",$replydata);
            $replydata = stripslashes($replydata);
            $replyDeleteButton = '';
            if($replyauthor == $log_username) { 
                $replyDeleteButton = '…';
            }
            $commentstring .= "$replyid|$replyauthor|$replydata|$replypostdate|$user_image|$replyDeleteButton|||";
        }
    }
    mysqli_close($db_conx);
    $commentstring = trim($commentstring, "|||");
    echo $commentstring;
    exit();
}

問題 1:

私の意見では、このバリアントはあまり高速ではありません。特に、ネストされた Javascript と一定のデータベースクエリは非常に扱いにくく、タイムリーではありません。

したがって、問題は、コードの構造またはコード自体を最適化するための提案があるかどうかです。たぶん、それを行うためのよりモジュール的な方法もあります。

問題 2:

次の問題は、コメントの HTML 構造が Javascript と PHP でほぼ同じであることです (変数を除く)。したがって、コメントの HTML を保持するファイルを作成することは、私にとって論理的でした。これで、PHP と Javascript は同じファイルを使用してコメントとその応答を作成できるようになりました。

include.php:

$variable = "";

if (IS_AJAX) {
    $user = \'+variable[0]+\';
    $content = \'+variable[1]+\';
}

$variable .= '<div>';
$variable .=     '<a href="'.$user.'">'.$user.'</a>';
$variable .=        '<div><p>'.$content.'</p></div>';
$variable .= '</div>';

問題は、このファイルが ajax 関数で使用される場合、Javascript 用に PHP 変数を変更する必要があることです。そのため、次のことを試しました。

some_php_file.php:

$ajax = 0;
if (isset($_SERVER['HTTP_X_REQUESTED_WITH']) && strtolower($_SERVER['HTTP_X_REQUESTED_WITH']) == 'xmlhttprequest')
{
    $ajax = 1;
}
define('IS_AJAX',$ajax);

しかし、これは機能しません。これは、サーバーまたは私が MAMP で作業している情報が原因である可能性があることを読んだためです。私のための解決策はありますか？

score 0 · Accepted Answer

サーバーからデータを取得するときはjson構造を使用する必要があると思います（http://php.net/manual/en/function.json-encode.php）。これにより、jsで行う必要がある「分割」を回避できます。後で、他の追加の利点があります。http://api.jquery.com/jQuery.getJSON/も調べてください。また、ページ内のすべての画像をロードする場合:

   $style_list_right .= '<div id="right_'.$id.'"    onclick="getPhotos(\''.$album_id.'\',\''.$id.'\',\''.$u.'\')">';
    $style_list_right .=     '<img src="'.USERFILES . $u.'/'.$filename.'" />';
    $style_list_right .= '</div>';

あなたはおそらく行うことができます：

    $style_list_right .=     '<img src="'.USERFILES . $u.'/'.$filename.'" filename=$filename photoname="$photoname" albimid="$album_id" onclick="getPhotos(this)"/>';

したがって、最初のフェッチですべての情報が得られるので、それをクリックすると、イメージ属性からそれらの詳細を取得できます (ajax 呼び出しはまったく行われません)。したがって、コメントを取得するには、1 つの ajax 呼び出しだけが必要です。また、サーバーから取得するデータの量が少なくなり、ajax 応答が高速になるため、ajax 応答がデータのみ (html マークアップなし) を返すのに適しています。クライアントで js を使用して、それらのマークアップをデータははるかに高速です。これが少し役立ったことを願っています。

javascript - ネストされた JavaScript によりコメント システムが遅くなる

1 に答える 1

Related

Reference

javascript - ネストされた JavaScript によりコメントシステムが遅くなる