0

まず、このコミュニティに感謝します。私はゆっくりとこのことを理解し始めており、すべてのフィードバックに感謝しています. そうは言っても、私は別の質問をします。

状況: 私は新しいサイトを構築しようとしており、それを学習体験として使用して、いくつかの PHP を使用し、JavaScript を独学で学習しようとしています (注: 今は js に固​​執し、jquery にジャンプしないようにしたいと考えています)。 jsをうまく扱えるようになるまで）。上部に一連のサムネイルが表示されるギャラリーを作成しました。これをクリックすると、下の div にアートワーク、タイトル、説明が表示されます。

セットアップ: これらを番号 (配列など) ではなく名前で呼び出して交換できるようにしたいので、すべてのコンポーネントを含む id の div としてそれぞれを作成し、次の方法でターゲットの場所に呼び出しますスクリプト：

function changeDiv(id) {
var target = document.getElementById('generic');
var id = document.getElementById(id);
target.innerHTML = id.innerHTML; 
}

本体では次のようになります。

<img src="images/thumbs/digital-art/thumb-space-oddity.jpg" id="thumb-space-odity" onclick="callDiv('space-oddity')"/>
...
<div class="gallery-frame" id="generic"></div>

現在、これは機能しますが、すべての div を呼び出す場所が必要なので、フッターに php インクルードを追加して、最後に読み込まれるようにしましたが、必要になる可能性のあるすべての画像が含まれています。

<div style="display:none;">
<?php include("gallery.php"); ?>
</div>

...しかし、これはページが実際にページを遅くするすべてのコンテンツをロードすることを意味するため、私が理解していることから. だから私は新しい解決策が必要です。

私の課題: まず、javascript だけでこれを行う方法はありますか? もしそうなら、私は喜んでそうします！

私ができないと仮定して、私はAJAXを調べてそれがどのように機能するかを確認し始めましたが、それが名目上の意味を持ち始めている間(JavaScriptにはまだ新しいので、半分しか取得できません)、w3schools.comとstackoverflowトピックの間に私はあると思います何をする必要があるかについての一般的な考えですが、まだ機能していません。

問題: 上記の stackoverflow コメントに基づいて、自分のインスタンスでサンプル関数を再作成しようとしましたが、次のように設定しました。

<script type="text/javascript">
function createXMLHttpRequest() {
    try {
        return new XMLHttpRequest();
    }
    catch (e)
    { alert('XMLHttpRequest not working'); }
    try {
        return new ActiveXObject("Msxml2.XMLHTTP");
    }
    catch (e)
    { alert('Msxml2.XMLHTT not working'); }
    try {
        return new ActiveXObject("Microsoft.XMLHTTP");
    }
    catch (e)
    { alert('Microsoft.XMLHTTP not working'); }
    alert("XMLHttpRequest not supported");
    return null;
}
function callDiv(id) {
    var xmlHttpReq = createXMLHttpRequest();
    var url = "gallery.asp?ID=" + id;
    xmlHttpReq.open("GET", url, true);
    xmlHttpReq.send();
}
</script>

私が読んだことから、最初のセクションをそのまま残して、関数を設定し (null とプロンプトは不要なので削除します)、callDiv 関数を以前のスクリプトと同じように実行しようとしました。gallery.php ページも .asp ページとして保存しましたが、php のままにしておくべきですか?

.ashx である必要がありましたか?

そして、それが呼び出されたファイルがわからないので、元の例で使用された「?REASON」が何を意味するのかわかりません。IDを探すように言っていると思って?IDを試しました。それは間違っていますか、それとも不必要ですか？

ありがとう！

-クリス

4

2 に答える 2

0

わかりました、純粋なJSでこれをやりたいと思うのは良い（そして本当に勇敢です）。風変わりですが、正直言って楽しい言語です。目標を達成する最も簡単な方法は ajax 呼び出しを使用することですが、必須ではありません。
コードを見ると、呼び出しはおそらく問題なく機能しますが、最も重要な部分であるonreadystatechangeイベントのコールバックが省略されています。

スクリプトがサーバーにリクエストを送信すると、そのリクエストの状態がチェックされます。サーバーが送信された要求の処理を完了し、応答が完了すると、readyState は 4 になります (詳細については、こちらを参照してください)。
基本的に、これを ajax オブジェクトに追加してみてください。

function callDiv(id)
{
    var xmlHttpReq = createXMLHttpRequest();
    xmlHttpReq.onreadystatechange = function()
    {
        if (this.readyState === 4 && this.status === 200)
        {
            //this === xmlHttpReq, "this" can be tricky, it refers to the calling obj.
            console.log(this.responseText);//check your console, see what that tells you
        }
    };
    var url = "gallery.asp?ID=" + id;
    xmlHttpReq.open("GET", url, true);
    xmlHttpReq.send();
}

個人的には、あなたが JS を初めて使用するのを見て、通常の方法で画像をプリロードすることもお勧めします。

var nextImg = document.createElement('img');
nextImg.src = 'images/nextImage.jpg';
nextImg.onload = function()
{
    //targetId
    document.getElementById('wherever').appendChild(this);//this === nextImg
};

最後のシナリオでは、新しい DOM 要素 img を作成し、ソースが設定されているため、画像が読み込まれます。読み込みが完了すると、新しい画像をコンテナー要素 (ドキュメントの場合もある) に追加するイベント ハンドラーがあります。 .body 要素) を選択します。
ここでの利点は、AJAX と格闘する必要がないことです。非同期の性質は扱いにくい場合があります。小規模では、これも簡単に実装でき、デバッグも簡単です。欠点: 維持するのは悪夢であり、すべての機能がクライアント側に移行します。他にもいくつか問題がありますが、少し腹が立って疲れています。詳しくはこちらをご覧ください。必要に応じて、明日これをもう一度見てみます。

そうそう、SO BTW へようこそ。

于 2012-07-16T02:19:07.903 に答える
0

わかりました、次のコードを見てください。リクエストを 内で実行するcallDivと、結果が.foo要素内に入ります。

function callDiv(id) {
    var request;  // Store AJAX request

    // Here you verify browsers support, to create new Ajax request
    try { // Opera, Firefox and Safari support
        request = new XMLHttpRequest();
    } catch (e) { // IE support
        try {
            request = new ActiveXObject("Msxml2.XMLHTTP");
        } catch (e) {
            try{
                request = new ActiveXObject("Microsoft.XMLHTTP");
            } catch (e) {
                // Hide error, something goes wrong
            }
        }
    }

    // Show result inside .foo div
    request.onreadystatechange = function() {
        if(request.readyState == 4) { // Success
            var element = document.getElementByClass('foo');
            element.innerHTML = request.responseText;
        }
    }

    // Here you send the request
    request.open("GET", "gallery.php?id=" + id, true);
    request.send(null); 
}

<div class='foo'><!-- HERE WILL SHOW THE AJAX RESULT --></div>
于 2012-07-16T02:20:27.440 に答える