局部方法$("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);
});
});

局部方法$("html").load()和全域方法$.get()、$.post()