Load.txt
----------
20191117
https://api.jquery.com/load/
.load( url [, data ] [, complete ] )
.load( sUrl [, PlainObject or string ] [, function( sResponse, sStatus, xhr ) ] )
例如: xhr.status = 404, xhr.statusText = "Error"
url
Type: String
A string containing the URL to which the request is sent.
若參數 URL 沒有添加 selector 元素, 則會先傳給 .html() 執行 JavaScript 區塊.
data
Type: PlainObject or String
A plain object or string that is sent to the server with the request.
以物件或字串送給伺服器的資料. 若為物件, 則以POST方式傳送, 否則字串以GET方式傳送.
complete
Type: Function( String responseText, String textStatus, jqXHR jqXHR )
A callback function that is executed when the request completes.
例如: jqXHR.status = 404, jqXHR.statusText = "Error"
This method is the simplest way to fetch data from the server. It is roughly equivalent to $.get(url, data, success) except that it is a method rather than global function and it has an implicit callback function. When a successful response is detected (i.e. when textStatus is "success" or "notmodified"), .load() sets the HTML contents of the matched elements to the returned data.
可讀取伺服器資料. 跟 $.get(url, data, success) 類似, 但並非 global function 且內含 回呼函數. 當偵測到成功回應時(即參數 textStatus 為 "success" 或 "notmodified"), 就會將符合的元素設定為回傳的資料.
This means that most uses of the method can be quite simple:
例如以下寫法:
$( "#result" ).load( "ajax/test.html" );
If no element is matched by the selector — in this case, if the document does not contain an element with id="result" — the Ajax request will not be sent.
若找不到對應的元素, 則不會發出請求訊息.
Callback Function
回呼函數
If a "complete" callback is provided, it is executed after post-processing and HTML insertion has been performed. The callback is fired once for each element in the jQuery collection, and this is set to each DOM element in turn.
若有提供 "complete" 回呼函數, 則會在 load 執行成功後呼叫
$( "#result" ).load( "ajax/test.html", function() {
alert( "Load was performed." );
});
In the two examples above, if the current document does not contain an element with an ID of "result," the .load() method is not executed.
例如以上2個範例, 若找不到ID="result"的元素, 則.load()就不會執行.
Request Method
請求伺服器方法
The POST method is used if data is provided as an object; otherwise, GET is assumed.
參數data 若為物件, 則以POST方式傳送, 否則字串以GET方式傳送.
Loading Page Fragments
The .load() method, unlike $.get(), allows us to specify a portion of the remote document to be inserted. This is achieved with a special syntax for the url parameter. If one or more space characters are included in the string, the portion of the string following the first space is assumed to be a jQuery selector that determines the content to be loaded.
.load() 不像 $.get(), 可傳送部分資料. 可經由特別的語法放在參數 url 中達成. 若 url 中以空白分隔, 則讀取資料結果會 放到空白下一個選擇元素.
We could modify the example above to use only part of the document that is fetched:
$( "#result" ).load( "ajax/test.html #container" );
When this method executes, it retrieves the content of ajax/test.html, but then jQuery parses the returned document to find the element with an ID of container. This element, along with its contents, is inserted into the element with an ID of result, and the rest of the retrieved document is discarded.
如上例, "ajax/test.html"的讀取結果, 會存放到 "#container" 元素.
jQuery uses the browser's .innerHTML property to parse the retrieved document and insert it into the current document. During this process, browsers often filter elements from the document such as , , or <head> elements. As a result, the elements retrieved by .load() may not be exactly the same as if the document were retrieved directly by the browser.
jQuery, 會以 .innerHTML屬性分析取得的資料, 並新增到目前文件中. 由於瀏覽器會過濾掉一些元素, 因此存錄目前文件的內容可能跟讀取的結果不同.
Script Execution
執行 JavaScript
When calling .load() using a URL without a suffixed selector expression, the content is passed to .html() prior to scripts being removed. This executes the script blocks before they are discarded. If .load() is called with a selector expression appended to the URL, however, the scripts are stripped out prior to the DOM being updated, and thus are not executed.
若參數 URL 沒有添加 selector 元素, 則會先傳給 .html() 執行 JavaScript 區塊.
否則不會不會執行讀取到的JavaScript.
如下2例:
An example of both cases can be seen below:
Here, any JavaScript loaded into #a as a part of the document will successfully execute.
$( "#a" ).load( "article.html" );
如上例, 讀取到的JavaScript 會插入 #a 元素並執行.
However, in the following case, script blocks in the document being loaded into #b are stripped out and not executed:
$( "#b" ).load( "article.html #target" );
如上例, 讀取到的JavaScript 會插入 #b 元素, 但不執行.
Additional Notes:
Due to browser security restrictions, most "Ajax" requests are subject to the same origin policy; the request can not successfully retrieve data from a different domain, subdomain, port, or protocol.
提醒
由於瀏覽器的限制, 大多數的 "Ajax" 請求只能在(相同 origin policy)網頁相同權限中有效, 不能跨(domain, subdomain, port, 或 protocal)
Examples:
Load another page's list items into an ordered list.
如下例, 載入其他網頁的項目清單.
<!doctype html>
<html lang="en">
<head>
<meta charset="utf-8">
<title>load demo
Projects: