jQuery學習筆記（2）之Ajax上
阿新 • • 發佈：2019-01-07
前言：
Ajax是Asynchronous JavaScript and XML的縮寫，其核心是通過XMLHttpRequest物件，以一種非同步的方式，向伺服器傳送資料請求，並通過該物件接收請求返回的資料，從而完成人機互動的資料操作。在jQuery中，有大量的函式和方法為Ajax技術提供支援。
一. 載入非同步資料
我們先看下傳統的js方法實現Ajax功能
建立兩個新頁面a.html和b.html，前者單擊載入按鈕後，在不重新整理頁面的情況下，將後者頁面裡的內容載入進來進行顯示。
實現程式碼
a.html中
<!DOCTYPE html>
< b.html中
<div class="clsShow">姓名：緣滅<br />性別：男<br />郵箱：[email protected]</div>
1. jQuery中的load( )方法
load( )方法可以輕鬆實現獲取非同步資料的功能，語法格式為：
load(url, [data], [callback])
其中引數url為被載入的頁面地址，可選項[data]引數表示傳送到伺服器的資料，其格式為key/value。另一個可選項[callback]引數表示載入成功後，返回至載入頁的回撥函式。下面舉例說明：
a.html中改為以下程式碼
<body>
<div class="divFrame">
<div class="divTitle">
<input id="Button1" type="button" class="btn" value="獲取資料" />
</div>
<div class="divContent">
<div id="divTip"></div>
</div>
</div>
<script type="text/javascript">
$(function() {
$("#Button1").click(function() { //按鈕點選事件
$("#divTip").load("b.html"); //load()方法載入資料
})
})
</script>
</body>
注意：
在load（）方法中，引數url還可以用於過濾頁面中的某些類別的元素，如程式碼"$("#divTip").load(“b.html .divContent”)"，則表示獲取頁面b.html中類別名為divContent的全部元素。
2. jQuery中的全域性函式getJSON( )方法
getJSON( )方法用於呼叫JSON格式的資料，語法格式為：
$.getJSON(url, [data], [callback])
其中引數url為被載入的頁面地址，可選項[data]引數表示傳送到伺服器的資料，其格式為key/value。另一個可選項[callback]引數表示載入成功後，返回至載入頁的回撥函式。下面舉例說明
a.html中改為以下程式碼
<body>
<div class="divFrame">
<div class="divTitle">
<input id="Button1" type="button" class="btn" value="獲取資料" />
</div>
<div class="divContent">
<div id="divTip"></div>
</div>
</div>
<script type="text/javascript">
$(function() {
$("#Button1").click(function() { //按鈕單擊事件
//開啟檔案，並通過回撥函式處理獲取的資料
$.getJSON("json/UserInfo.json", function(data) {
$("#divTip").empty(); //先清空標記中的內容
var strHTML = ""; //初始化儲存內容變數
$.each(data, function(index, item) { //遍歷獲取的資料
strHTML += "姓名：" + item["name"] + "<br>";
strHTML += "性別：" + item["sex"] + "<br>";
strHTML += "郵箱：" + item["email"] + "<hr>";
})
$("#divTip").html(strHTML); //顯示處理後的資料
})
})
})
</script>
</body>
UserInfo.json中
[
{
"name": "緣滅",
"sex": "男",
"email": "[email protected]"
},
{
"name": "李xx",
"sex": "女",
"email": "[email protected]"
}
]
頁面效果圖：
3. jQuery中的全域性函式getScript( )方法
getScript( )方法用於獲取.js檔案的內容，語法格式為：
$.getScript(url, [callback])
其中引數url為被載入的JS檔案地址，可選項[callback]引數表示載入成功後執行的回撥函式。下面舉例說明
a.html中改為以下程式碼
<body>
<div class="divFrame">
<div class="divTitle">
<input id="Button1" type="button" class="btn" value="獲取資料" />
</div>
<div class="divContent">
<div id="divTip"></div>
</div>
</div>
<script type="text/javascript">
$(function() {
$("#Button1").click(function() { //按鈕單擊事件
//開啟已獲取返回資料的檔案
$.getScript("js/UserInfo.js");
})
})
</script>
</body>
UserInfo.js中
var data = [
{
"name": "緣滅",
"sex": "男",
"email": "[email protected]"
},
{
"name": "李xx",
"sex": "女",
"email": "[email protected]"
}
];
var strHTML = ""; //初始化儲存內容變數
$.each(data, function() { //遍歷獲取的資料
strHTML += "姓名：" + this["name"] + "<br>";
strHTML += "性別：" + this["sex"] + "<br>";
strHTML += "郵箱：" + this["email"] + "<hr>";
})
$("#divTip").html(strHTML); //顯示處理後的資料
4. jQuery中的全域性函式get( )方法
getJSON( )方法用於獲取XML文件資料，語法格式為：
$.get(url, [data], [callback], [type])
其中引數url為被載入的資料地址，可選項[data]引數表示傳送到伺服器的資料，其格式為key/value。另一個可選項[callback]引數表示載入成功後，返回至載入頁的回撥函式，可選項[type]引數表示返回資料的格式，如html,xml,js,json,text等。下面舉例說明
a.html中改為以下程式碼
<body>
<div class="divFrame">
<div class="divTitle">
<input id="Button1" type="button" class="btn" value="獲取資料" />
</div>
<div class="divContent">
<div id="divTip"></div>
</div>
</div>
<script type="text/javascript">
$(function() {
$("#Button1").click(function() { //按鈕單擊事件
//開啟檔案，並通過回撥函式處理獲取的資料
$.get("UserInfo.xml", function(data) {
$("#divTip").empty(); //先清空標記中的內容
var strHTML = ""; //初始化儲存內容變數
$(data).find("User").each(function() { //遍歷獲取的資料
var $strUser = $(this);
strHTML += "姓名：" + $strUser.find("name").text() + "<br>";
strHTML += "性別：" + $strUser.find("sex").text() + "<br>";
strHTML += "郵箱：" + $strUser.find("email").text() + "<hr>";
})
$("#divTip").html(strHTML); //顯示處理後的資料
})
})
})
</script>
</body>
UserInfo.xml中
<?xml version="1.0" encoding="utf-8" ?>
<Info>
<User id="1">
<name>緣滅11112222</name>
<sex>男</sex>
<email>[email protected]</email>
</User>
<User id="2">
<name>李xx</name>
<sex>女</sex>
<email>[email protected]</email>
</User>
</Info>