區域性方法$(“html”).load()和全域性方法$.get()、$.post()

 

一、.load()

.load()方法可以引數三個引數：url(必須，請求 html 檔案的 url 地址，引數型別為 String)、
data(可選，傳送的 key/value 資料，引數型別為 Object)、callback(可選，成功或失敗的回撥
函式，引數型別為函式 Function)。
如果想讓 Ajax 非同步載入一段 HTML 內容，我們只需要一個 HTML 請求的 url 即可。
//HTML
<input type=”button” value=”非同步獲取資料” />
<div id=”box”></div>
//jQuery
$(`input`).click(function () {
$(`#box`).load(`test.html`);
});
如果想對載入的 HTML 進行篩選，那麼只要在 url 引數後面跟著一個選擇器即可。
//帶選擇器的 url
$(`input`).click(function () {
$(`#box`).load(`test.html .my`);
});
如果是伺服器檔案，比如.php。一般不僅需要載入資料，還需要向伺服器提交資料，那
麼我們就可以使用第二個可選引數 data。向伺服器提交資料有兩種方式：get 和 post。
//不傳遞 data，則預設 get 方式
$(`input`).click(function () {
$(`#box`).load(`test.php?url=ycku`);
});
//get 方式接受的 PHP
<?php
if ($_GET[`url`] == `ycku`) {
echo `瓢城 Web 俱樂部官網`;
} else {
echo `其他網站`;
}
?>
//傳遞 data，則為 post 方式
$(`input`).click(function () {
$(`#box`).load(`test.php`, {
url : `ycku`
});
});
//post 方式接受的 PHP
<?php
if ($_POST[`url`] == `ycku`) {
echo `瓢城 Web 俱樂部官網`;
} else {
echo `其他網站`;
}
?>
在 Ajax 資料載入完畢之後，就能執行回撥函式 callback，也就是第三個引數。回撥函式
也可以傳遞三個可選引數：responseText （請求返回）、textStatus （請求狀態)、XMLHttpRequest
（XMLHttpRequest 物件）。
$(`input`).click(function () {
$(`#box`).load(`test.php`, {
url : `ycku`
}, function (response, status, xhr) {
alert(`返回的值為：` + response + `，狀態為：` + status + `，
狀態是：` + xhr.statusText);
});
});
注意：status 得到的值，如果成功返回資料則為：success，否則為：error。XMLHttpRequest
物件屬於 JavaScript 範疇，可以呼叫一些屬性如下：
屬性名 說明
responseText 作為響應主體被返回的文字
responseXML
如果響應主體內容型別是”text/xml”或”application/xml”，
則返回包含響應資料的 XML DOM 文件
status 響應的 HTTP 狀態
statusText HTTP 狀態的說明
如果成功返回資料，那麼 xhr 物件的 statusText 屬性則返回`OK`字串。除了`OK`的狀態
字串，statusText 屬性還提供了一系列其他的值，如下：
HTTP 狀態碼 狀態字串 說明
200 OK 伺服器成功返回了頁面
400 Bad Request 語法錯誤導致伺服器不識別
401 Unauthorized 請求需要使用者認證
404 Not found 指定的 URL 在伺服器上找不到
500 Internal Server Error 伺服器遇到意外錯誤，無法完成請求
503 ServiceUnavailable 由於伺服器過載或維護導致無法完成請求
三．$.get() 和$.post()
.load()方法是區域性方法，因為他需要一個包含元素的 jQuery 物件作為字首。而$.get()和
$.post()是全域性方法，無須指定某個元素。對於用途而言，.load()適合做靜態檔案的非同步獲取，
而對於需要傳遞引數到伺服器頁面的，$.get()和$.post()更加合適。
$.get()方法有四個引數，前面三個引數和.load()一樣，多了一個第四引數 type，即服務
器返回的內容格式：包括 xml、html、script、json、jsonp 和 text。第一個引數為必選引數，
後面三個為可選引數。
//使用$.get()非同步返回 html 型別
$(`input`).click(function () {
$.get(`test.php`, {
url : `ycku`
}, function (response, status, xhr) {
if (status == `success`) {
$(`#box`).html(response);
}
}) //type 自動轉為 html
});
注意：第四引數 type 是指定非同步返回的型別。一般情況下 type 引數是智慧判斷，並不
需要我們主動設定，如果主動設定，則會強行按照指定型別格式返回。
//使用$.get()非同步返回 xml
$(`input`).click(function () {
$.get(`test.xml`, function (response, status, xhr) {
$(`#box`).html($(response).find(`root`).find(`url`).text());
}); //type 自動轉為 xml
});
注意：如果載入的是 xml 檔案，type 會智慧判斷。如果強行設定 html 型別返回，則會
把 xml 檔案當成普通資料全部返回，而不會按照 xml 格式解析資料。
//使用$.get()非同步返回 json
$.get(`test.json`, function (response, status, xhr) {
alert(response[0].url);
});
$.post()方法的使用和$.get()基本上一致，他們之間的區別也比較隱晦，基本都是背後的
不同，在使用者使用上體現不出。具體區別如下：
1.GET 請求是通過 URL 提交的，而 POST 請求則是 HTTP 訊息實體提交的；
2.GET 提交有大小限制（2KB），而 POST 方式不受限制；
3.GET 方式會被快取下來，可能有安全性問題，而 POST 沒有這個問題；
4.GET 方式通過$_GET[]獲取，POST 方式通過$_POST[]獲取。
//使用$.post()非同步返回 html
$.post(`test.php`, {
url : `ycku`
}, function (response, status, xhr) {
$(`#box`).html(response);
});
四．$.getScript() 和$.getJSON()
jQuery 提供了一組用於特定非同步載入的方法：$.getScript()，用於載入特定的 JS 檔案；
$.getJSON()，用於專門載入 JSON 檔案。
有時我們希望能夠特定的情況再載入 JS 檔案，而不是一開始把所有 JS 檔案都載入了，
這時課時使用$.getScript()方法。
//點選按鈕後再載入 JS 檔案
$(`input`).click(function () {
$.getScript(`test.js`);
});
$.getJSON()方法是專門用於載入 JSON 檔案的，使用方法和之前的類似。
$(`input`).click(function () {
$.getJSON(`test.json`, function (response, status, xhr) {
alert(response[0].url);
});
});