XMLHttpRequest 和 innerHTML 的快速技巧

XMLHttpRequest 是現(xiàn)代 DHTML 最佳秘訣之一。如果您以前從未遇到過它，它是一種在不刷新整個頁面的情況下向託管 Web 服務(wù)器發(fā)出 HTTP 調(diào)用的方法——一種增強型的遠(yuǎn)程腳本。它最初是 Microsoft 的擴展，已被 Mozilla 瀏覽器系列和（從 1.2 版開始）Safari 採用。前面討論過的 Sarissa 庫為不同的瀏覽器提供了抽象層，或者對於更輕量級的方法，來自 jibbering.com 的此代碼（它使用 IE 的 JScript 條件編譯）可以完美運行。

充分利用 XMLHttpRequest 通常涉及使用服務(wù)器端生成的 XML，您的 JavaScript 應(yīng)用程序可以檢索、解析和用於更複雜的邏輯中。但是，對於快速修復(fù)，以下代碼將從 URL 加載 HTML 片段並將其直接插入頁面：

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);
}

使用要插入的 HTML 片段的 URL 和應(yīng)顯示該片段的元素的 ID 調(diào)用上述函數(shù)。它依賴於 jibbering.com 代碼來設(shè)置 xmlhttp 變量。

它絕對快速且簡陋，但它也是 XMLHttpRequest 擴展功能的絕佳快速演示。

XMLHttpRequest 和 innerHTML 常見問題解答 (FAQ)

innerHTML 和 outerHTML 有什麼區(qū)別？

innerHTML 和 outerHTML 都是文檔對像模型 (DOM) 中元素的屬性。它們之間的主要區(qū)別在於它們返回和修改的內(nèi)容。 innerHTML 獲取或設(shè)置元素的 HTML 內(nèi)容（內(nèi)部 HTML），而 outerHTML 獲取或設(shè)置 HTML 內(nèi)容，包括元素的外部包裝器。換句話說，innerHTML 處理元素內(nèi)部的內(nèi)容，而 outerHTML 處理整個元素，包括標(biāo)籤。

使用 innerHTML 安全嗎？

雖然 innerHTML 是一種將 HTML 注入網(wǎng)頁的便捷方法，但如果使用不當(dāng)，可能會帶來安全風(fēng)險。如果您將用戶生成的內(nèi)容插入頁面並使用 innerHTML，則可能會面臨跨站點腳本 (XSS) 攻擊，其中惡意腳本被注入您的網(wǎng)頁。為避免這種情況，請始終清理用戶生成的內(nèi)容或使用更安全的方法，例如 textContent 或 createElement。

如何使用 innerHTML 添加多個元素？

您可以通過連接每個元素的 HTML 字符串來使用 innerHTML 添加多個元素。例如，如果您想添加兩個段落，您可以執(zhí)行以下操作： element.innerHTML = '<code>element.innerHTML = '<p>第一段。</p>' '<p>第二段。</p>';第一段。

' '

第二段。

'; 這會將兩個段落添加到元素中。

我可以使用 innerHTML 插入 SVG 元素嗎？ 是的，您可以使用 innerHTML 插入 SVG 元素。但是，有一些注意事項。使用 innerHTML 時不會保留 SVG 命名空間，這可能會導(dǎo)致某些瀏覽器出現(xiàn)問題。如果您遇到問題，請考慮改用 createElementNS 和 appendChild 方法。

為什麼我的 innerHTML 不起作用？

您的 innerHTML 不起作用可能有幾個原因。一個常見的原因是您嘗試修改的元素在腳本運行時不存在。如果您的腳本在頁面主體之前加載，則可能會發(fā)生這種情況。要解決此問題，您可以將腳本移動到主體標(biāo)籤的底部，或者將代碼包裝在 window.onload 函數(shù)中。

我可以在 XML 文檔中使用 innerHTML 嗎？

不可以，innerHTML 不支持 XML 文檔。它是 HTML DOM 中 HTMLElement 接口的屬性，在 XML DOM 中不可用。如果您使用 XML，則需要改用 createElement 和 appendChild 等方法。

如何刪除節(jié)點的所有子元素？

您可以通過將 innerHTML 屬性設(shè)置為空字符串來刪除節(jié)點的所有子元素。例如： element.innerHTML = ''; 這將刪除元素的所有子元素。

我可以使用 innerHTML 將文本插入文本節(jié)點嗎？

不可以，innerHTML 只能與元素節(jié)點一起使用。如果您想將文本插入文本節(jié)點，則應(yīng)改用 nodeValue 或 textContent 屬性。

如何使用 innerHTML 替換元素？

您可以通過設(shè)置父元素的 innerHTML 屬性來使用 innerHTML 替換元素。這將替換父元素的所有子元素，包括您要定位的元素。例如： parentElement.innerHTML = '<code>parentElement.innerHTML = '<p>新段落。</p>';新段落。

'; 這將用新段落替換 parentElement 的所有子元素。

我可以在 Internet Explorer 中使用 innerHTML 嗎？

是的，innerHTML 在所有主要瀏覽器（包括 Internet Explorer）中都受支持。但是，瀏覽器處理 innerHTML 的某些方面的處理方式有所不同，因此最好在多個瀏覽器中測試您的代碼。

以上是快速提示：xmlhttprequest和innerhtml的詳細(xì)內(nèi)容。更多資訊請關(guān)注PHP中文網(wǎng)其他相關(guān)文章！