クイックヒント：xmlhttprequestおよびinnerhtml

のクイックヒント

xmlhttprequestは、現代のdhtmlにとって最良のヒントの1つです。以前に遭遇したことがない場合は、ページ全体を更新せずにホストされたWebサーバーにHTTP呼び出しを発行する方法です。これは、リモートスクリプトです。もともとはMicrosoftの延長であり、Mozilla Browserシリーズと（バージョン1.2から始まる）Safariで採用されています。前述のSarissaライブラリは、さまざまなブラウザーまたはより軽いアプローチの抽象化レイヤーを提供します。Jibbering.comのこのコード（IEのJScript条件を使用してコンパイルされています）は完全に機能します。

XMLHTTPREQUESTを最大限に活用するには、多くの場合、JavaScriptアプリケーションがより複雑なロジックで取得、解析、および使用できるサーバー側で生成されたXMLを使用することがよくあります。ただし、迅速な修正のために、次のコードでHTMLスニペットをURLからロードし、ページに直接挿入します。

挿入するHTMLフラグメントのURLを使用して上記の関数を計算し、フラグメントを表示する要素のIDを使用します。 Jibbering.comコードに依存して、XMLHTTP変数を設定します。

function loadFragmentInToElement(fragment_url, element_id) {
    var element = document.getElementById(element_id);
    element.innerHTML = '<p><em>Loading ...</em></p>';
    xmlhttp.open("GET", fragment_url);
    xmlhttp.onreadystatechange = function() {
        if (xmlhttp.readyState == 4 && xmlhttp.status == 200) {
            element.innerHTML = xmlhttp.responseText;
        }
    }
    xmlhttp.send(null);
}

それは絶対に高速で謙虚ですが、XmlhttpRequest拡張機能の素晴らしいクイックデモでもあります。

XMLHTTPREQUESTおよびINNENHTML FAQ（FAQ）

innerhtmlとouterhtmlの違いは何ですか？

innerhtmlとouterhtmlはどちらもドキュメントオブジェクトモデル（DOM）の要素の属性です。それらの主な違いは、彼らが戻って修正するものです。 innerhtmlは、要素のHTMLコンテンツ（内部HTML）を取得または設定し、outerHTMLは、要素の外部ラッパーを含むHTMLコンテンツを取得または設定します。言い換えれば、innerhtmlは要素内のコンテンツを処理し、outerhtmlはタグを含む要素全体を処理します。

innerhtmlを使用しても安全ですか？

innerhtmlは、HTMLをWebページに挿入するための便利な方法ですが、不適切に使用するとセキュリティリスクを引き起こす可能性があります。ユーザーが生成したコンテンツをページに挿入してinnerHTMLを使用すると、悪意のあるスクリプトがWebページに注入されるクロスサイトスクリプト（XSS）攻撃に直面する可能性があります。これを回避するには、常にユーザー生成コンテンツをきれいにするか、TextContentやCreateLementなどのより安全な方法を使用してください。

innerhtmlを使用して複数の要素を追加する方法は？

各要素のHTML文字列を連結することにより、InnerHTMLを使用して複数の要素を追加できます。たとえば、2つの段落を追加する場合は、次のことを行うことができます。 element.innerhtml = '

最初の段落。

'' element.innerHTML = '<p>第一段。</p>' '<p>第二段。</p>'; 2番目の段落。

'; これにより、2つの段落が要素に追加されます。

innerhtmlを使用してSVG要素を挿入できますか？

はい、innerhtmlを使用してSVG要素を挿入できます。ただし、注意すべきことがいくつかあります。 SVGネームスペースは、innerhtmlを使用する場合は保存されません。これにより、一部のブラウザで問題が発生する可能性があります。問題がある場合は、代わりにcreateElementnsとappendChildメソッドの使用を検討してください。

なぜ私のinnerhtmlが機能しないのですか？

innerhtmlはいくつかの理由で機能しない場合があります。よくある理由は、変更を試みている要素がスクリプトの実行中に存在しないことです。これは、スクリプトがページの本文の前にロードされた場合に発生する可能性があります。この問題を解決するには、スクリプトをボディラベルの下部に移動するか、window.onload関数にコードをラップすることができます。

XMLドキュメントでinnerhtmlを使用できますか？

いいえ、innerhtmlはXMLドキュメントをサポートしていません。これは、HTML DOMのHTMLELEMENTインターフェイスのプロパティであり、XML DOMでは利用できません。 XMLを使用する場合は、代わりにCreateElementやAppendChildなどの方法を使用する必要があります。

ノードのすべての子要素を削除する方法は？

innerhtmlプロパティを空の文字列に設定して、ノードのすべての子要素を削除できます。例えば： element.innerHTML = ''; これにより、要素のすべての子要素が削除されます。

innerhtmlを使用してテキストノードにテキストを挿入できますか？

いいえ、innerhtmlは要素ノードでのみ使用できます。テキストをテキストノードに挿入する場合は、代わりにNodevalueまたはTextContentプロパティを使用する必要があります。

要素をinnerhtmlに置き換える方法は？

親要素のinnerhtmlプロパティを設定することにより、要素をinnerhtmlに置き換えることができます。これは、配置するものを含め、親要素のすべての子要素を置き換えます。例えば： parentelement.innerhtml = '<code>parentElement.innerHTML = '<p>新段落。</p>';新しい段落。

'; これにより、ParentElementのすべての子要素を新しい段落に置き換えます。

インターネットエクスプローラーでinnerhtmlを使用できますか？

はい、InnerHtmlは、インターネットエクスプローラーを含むすべての主要なブラウザーでサポートされています。ただし、ブラウザはinnerhtmlの特定の側面を異なる方法で処理するため、複数のブラウザーでコードをテストすることをお勧めします。

以上がクイックヒント：xmlhttprequestおよびinnerhtmlの詳細内容です。詳細については、PHP 中国語 Web サイトの他の関連記事を参照してください。