用 JavaScript 從 URL 獲取 HTML

1. 使用 XMLHttpRequest() 獲取帶有 URL 的 HTML 程式碼
2. 使用 jQuery 獲取帶有 URL 的 HTML 程式碼

使用瀏覽器開發工具可以輕鬆檢視網頁的原始碼。

但是 JavaScript 為我們提供的有趣功能是，我們可以在我們的頁面上獲取不同網頁的原始碼，而無需訪問該頁面。這篇文章展示了實現這一目標的各種方法。

使用 XMLHttpRequest() 獲取帶有 URL 的 HTML 程式碼

XML HTTP Request (XHR) 主要用於在不重新整理頁面的情況下從 URL 中檢索資料。因此它們可用於從不同的頁面獲取 HTML 程式碼。

function makeHttpObject() {
  if ('XMLHttpRequest' in window)
    return new XMLHttpRequest();
  else if ('ActiveXObject' in window)
    return new ActiveXObject('Msxml2.XMLHTTP');
}

var request = makeHttpObject();
request.open('GET', '/', true);
request.send(null);
request.onreadystatechange = function() {
  if (request.readyState == 4) console.log(request.responseText);
};

在上面的例子中，我們首先讓 HTTP 物件成為一個 HTTP 請求。

然後我們使用 open() 和 send() 方法初始化併傳送 get 請求。當響應可用時，我們列印 HTML 程式碼。

使用 jQuery 獲取帶有 URL 的 HTML 程式碼

jQuery.ajax() 用於執行非同步 HTTP 請求。它將傳送請求的 URL 和設定（一組鍵值對）作為引數。

$.ajax({
  url: '/',
  success: function(data) {
    console.log(data);
  }
});

在上面的示例中，我們為 HTTP 請求傳遞了 URL，如果請求成功，我們列印返回的資料（即網頁的 HTML 程式碼）。