九.jQuery 實現Ajax應用
1.使用load()方法異步請求數據
使用load()方法通過Ajax請求加載服務器中的數據，並把返回的數據放置到指定的元素中，它的調用格式為：
load(url,[data],[callback])
load方法請求異步數據：
load（URL，【data】，【callback】）
1，加載服務器地址
2，可選項請求發送的數據
3，參數為請親成功后執行回調的函數來設定按鈕是否繼續可用。
url中可以寫入選擇器篩選要請求的數據如"http://www.imooc.com/test.html .para"表示請求改地址中的類名為para的數據；
可選參數data:傳參表示post請求，無參數表示使用get請求；
load()方法中的回調函數里面還可以有三個回調參數：
1、responseText:請求返回的內容
2、textStatus:請求的狀態（success/error/notmodified/timeout）;
3、XMLHttpresquest對象
參數url為加載服務器地址，可選項data參數為請求時發送的數據，callback參數為數據請求成功后，執行的回調函數。
例如，點擊“加載”按鈕時，向服務器請求加載一個指定頁面的內容，加載成功后，將數據內容顯示在
從圖中可以看出，當點擊“加載”按鈕時，通過調用load()方法向服務器請求加載fruit.html文件中的內容，當加載成功后，先顯示數據，並將按鈕變為不可用。
2.使用getJSON()方法異步加載JSON格式數據
使用getJSON()方法可以通過Ajax異步請求的方式，獲取服務器中的數據，並對獲取的數據進行解析，顯示在頁面中，它的調用格式為：
jQuery.getJSON(url,[data],[callback])或$.getJSON(url,[data],[callback])
其中，url參數為請求加載json格式文件的服務器地址，可選項data參數為請求時發送的數據，callback參數為數據請求成功后，執行的回調函數。
$.getJSON(url, function(data){})//注意一定要傳數據
函數內：
當前按鈕無效；
each遍歷，$each(data, function(index,sport){});
例如，點擊頁面中的“加載”按鈕，調用getJSON()方法獲取服務器中JSON格式文件中的數據，並遍歷數據，將指定的字段名內容顯示在頁面中。如下圖所示：
圖中可以看出，當點擊“加載”按鈕時，通過getJSON()方法調用服務器中的sport.json文件，獲取返回的data文件數據，並遍歷該數據對象，以data[“name”]取出數據中指定的內容，顯示在頁面中。
任務
我來試試，親自調用getJSON()方法獲取服務器中JSON格式文件的內容。
在下列代碼的第24行，調用getJSON()方法獲取服務器中 http://www.imooc.com/data/sport.json 的JSON格式文件中的數據，並將數據中指定的內容顯示頁面中。
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<html xmlns="http://www.w3.org/1999/xhtml">
<head>
<title>使用getJSON()方法異步加載JSON格式數據</title>
<script src="http://libs.baidu.com/jquery/1.9.0/jquery.js" type="text/javascript"></script>
<link href="style.css" rel="stylesheet" type="text/css" />
</head>
<body>
<div id="divtest">
<div class="title">
<span class="fl">我最喜歡的一項運動</span>
<span class="fr">
<input id="btnShow" type="button" value="加載" />
</span>
</div>
<ul></ul>
</div>
<script type="text/javascript">
$(function () {
$("#btnShow").bind("click", function () {
var $this = $(this);
$.getJSON("http://www.imooc.com/data/sport.json",function(data){
$this.attr("disabled", "true");
$.each(data, function (index, sport) {
if(index==3)
$("ul").append("<li>" + sport["name"] + "</li>");
});
});
})
});
</script>
</body>
</html>
3.使用getScript()方法異步加載並執行js文件
使用getScript()方法異步請求並執行服務器中的JavaScript格式的文件，它的調用格式如下所示：
jQuery.getScript(url,[callback])或$.getScript(url,[callback])
參數url為服務器請求地址，可選項callback參數為請求成功后執行的回調函數。
例如，點擊“加載”按鈕，調用getScript()加載並執行服務器中指定名稱的JavaScript格式的文件，並在頁面中顯示加載后的數據內容，如下圖所示：
從圖中可以看出，當點擊“加載”按鈕調用getScript()方法加載服務器中的JavaScript格式文件后，自動執行文件代碼，將數據內容顯示在ul元素中。
任務
我來試試，親自調用getScript()加載並執行服務器中JavaScript格式的文件。
在下列代碼的第24行，使用getScript()方法加載並執行指定服務器路徑 http://www.imooc.com/data/sport_f.js 的JavaScript格式文件，根據條件，將數據內容顯示在頁面中。
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<html xmlns="http://www.w3.org/1999/xhtml">
<head>
<title>使用getScript()方法異步加載並執行js文件</title>
<script src="http://libs.baidu.com/jquery/1.9.0/jquery.js" type="text/javascript"></script>
<link href="style.css" rel="stylesheet" type="text/css" />
</head>
<body>
<div id="divtest">
<div class="title">
<span class="fl">我最喜歡的運動</span>
<span class="fr">
<input id="btnShow" type="button" value="加載" />
</span>
</div>
<ul></ul>
</div>
<script type="text/javascript">
$(function () {
$("#btnShow").bind("click", function () {
var $this = $(this);
$.getScript("http://www.imooc.com/data/sport_f.js",function(){
$this.attr("disabled", "true");
});
})
});
</script>
</body>
</html>
JS
var data = [{
"name": "足球"
}, {
"name": "散步"
}, {
"name": "籃球"
}, {
"name": "乒乓球"
}, {
"name": "騎自行車"
}];
$.each(data, function (index, sport) {
if (index == 1)
$("ul").append("<li>" + sport["name"] + "</li>");
});
4.使用get()方法以GET方式從服務器獲取數據
使用get()方法時，采用GET方式向服務器請求數據，並通過方法中回調函數的參數返回請求的數據，它的調用格式如下：
$.get(url,[callback])參數url為服務器請求地址，可選項callback參數為請求成功后執行的回調函數。
例如，當點擊“加載”按鈕時，調用get()方法向服務器中的一個php文件以GET方式請求數據，並將返回的數據內容顯示在頁面中，如下圖所示：
從圖中可以看出，通過$.get()方法向服務器成功請求數據后，在回調函數中通過data參數傳回請求的數據，並以data.name格式訪問數據中各項的內容。
任務
我來試試，親自使用$.get()方法請求服務器中的數據
在下列代碼的第23行，使用$.get()方法，請求服務器中 http://www.imooc.com/data/info_f.php 文件中的數據，並將返回的內容顯示在頁面中。
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<html xmlns="http://www.w3.org/1999/xhtml">
<head>
<title>使用get()方法以GET方式從服務器獲取數據</title>
<script src="http://libs.baidu.com/jquery/1.9.0/jquery.js" type="text/javascript"></script>
<link href="style.css" rel="stylesheet" type="text/css" />
</head>
<body>
<div id="divtest">
<div class="title">
<span class="fl">我的個人資料</span>
<span class="fr">
<input id="btnShow" type="button" value="加載" />
</span>
</div>
<ul></ul>
</div>
<script type="text/javascript">
$(function () {
$("#btnShow").bind("click", function () {
var $this = $(this);
$.get("http://www.imooc.com/data/info_f.php",function(data){
$this.attr("disabled", "true");
$("ul").append("<li>我的名字叫：" + data.name + "</li>");
$("ul").append("<li>男朋友對我說：" + data.say + "</li>");
}, "json");
})
});
</script>
</body>
</html>
相關問題：
問：
$.get()請求的問題
為何將下面的網址在瀏覽器中打開時，卻是一堆亂碼
http://www.imooc.com/data/info_f.php
答
{"name":"\u767d\u5bcc\u7f8e","say":"\u54b1\u4eec\u7ed3\u5a5a\u5427!"}
\u767d\u5bcc\u7f8e和 \u54b1\u4eec\u7ed3\u5a5a\u5427! 都是unicode編碼，轉譯過來就是：白富美 咱們結婚吧!
在線轉譯網址：http://tool.chinaz.com/Tools/Unicode.aspx
5.使用post()方法以POST方式從服務器發送數據
與get()方法相比，post()方法多用於以POST方式向服務器發送數據，服務器接收到數據之后，進行處理，並將處理結果返回頁面，調用格式如下：
$.post(url,[data],[callback])
參數url為服務器請求地址，可選項data為向服務器請求時發送的數據，可選項callback參數為請求成功后執行的回調函數。
例如，在輸入框中錄入一個數字，點擊“檢測”按鈕，調用post()方法向服務器以POST方式發送請求，檢測輸入值的奇偶性，並顯示在頁面中，如下圖所示：
任務
我來試試，親自調用\(.post()方法向服務器發送數據，檢測數據是否大於0。 在下列代碼的第23、24、25行中，使用\).post()向服務器 http://www.imooc.com/data/check_f.php 文件中發送檢測的數據。
注意：在POST過程中，傳遞的參數就是用戶在文本框中輸入的值。
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<html xmlns="http://www.w3.org/1999/xhtml">
<head>
<title>使用post()方法以POST方式從服務器發送和獲取數據</title>
<script src="http://libs.baidu.com/jquery/1.9.0/jquery.js" type="text/javascript"></script>
<link href="style.css" rel="stylesheet" type="text/css" />
</head>
<body>
<div id="divtest">
<div class="title">
<span class="fl">檢測數字是否大於0</span>
<span class="fr"><input id="btnCheck" type="button" value="檢測" /></span>
</div>
<ul>
<li>請求輸入一個數字 <input id="txtNumber" type="text" size="12" /></li>
</ul>
</div>
<script type="text/javascript">
$(function () {
$("#btnCheck").bind("click", function () {
$.post("http://www.imooc.com/data/check_f.php",{
num:$("#txtNumber").val()
},
function (data) {
$("ul").append("<li>你輸入的<b>"
+ $("#txtNumber").val() + "</b>是<b>"
+ data + "</b></li>");
});
})
});
</script>
</body>
</html>
相關問題：
問：
代碼中num的作用
答
num是后端接收數據的字段，后端定義了這個num參數，所以你要傳過去，方便后端的接收，不然程序會出錯。http://www.imooc.com/data/check_f.php 是后端返回的數據是0，也就是success函數里面接收的data。
6.使用serialize()方法序列化表單元素值
使用serialize()方法可以將表單中有name屬性的元素值進行序列化，生成標准URL編碼文本字符串，直接可用於ajax請求，它的調用格式如下：
$(selector).serialize()
其中selector參數是一個或多個表單中的元素或表單元素本身。
例如，在表單中添加多個元素，點擊“序列化”按鈕后，調用serialize()方法，將表單元素序列化后的標准URL編碼文本字符串顯示在頁面中，如下圖所示：
從圖中可以看出，當點擊“序列化”按鈕后，調用表單元素本身的serialize()方法，將表單中元素全部序列化，生成標准URL編碼，各元素間通過&號相聯。
任務
我來試試，親自調用serialize()將表單中的元素值進行序列化
在下列代碼的第35行，調用serialize()將表單中的元素值進行序列化，並將序列化后的字符串內容顯示在頁面元素中。
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<html xmlns="http://www.w3.org/1999/xhtml">
<head>
<title>使用serialize()方法序列化表單元素值</title>
<script src="http://libs.baidu.com/jquery/1.9.0/jquery.js" type="text/javascript"></script>
<link href="style.css" rel="stylesheet" type="text/css" />
</head>
<body>
<div id="divtest">
<div class="title">
<span class="fl">我的個人資料</span>
<span class="fr">
<input id="btnAction" type="button" value="序列化" />
</span>
</div>
<form action="">
<ul>
<li>姓名：<input name="Text1" type="text" size="12" /></li>
<li>
<select name="Select1">
<option value="0">男</option>
<option value="1">女</option>
</select>
</li>
<li><input name="Checkbox1" type="checkbox" />資料是否可見 </li>
<li id="litest"></li>
</ul>
</form>
</div>
<script type="text/javascript">
$(function () {
$("#btnAction").bind("click", function () {
$("#litest").html($("form").serialize());
})
})
</script>
</body>
</html>
7..使用ajax()方法加載服務器數據
使用ajax()方法是最底層、功能最強大的請求服務器數據的方法，它不僅可以獲取服務器返回的數據，還能向服務器發送請求並傳遞數值，它的調用格式如下：
jQuery.ajax([settings])或$.ajax([settings])
其中參數settings為發送ajax請求時的配置對象，在該對象中，url表示服務器請求的路徑，data為請求時傳遞的數據，dataType為服務器返回的數據類型，success為請求成功的執行的回調函數，type為發送數據請求的方式，默認為get。
例如，點擊頁面中的“加載”按鈕，調用ajax()方法向服務器請求加載一個txt文件，並將返回的文件中的內容顯示在頁面，如下圖所示：
從圖中可以看出，當點擊“加載”按鈕時，調用$.ajax()方法請求服務器中txt文件，當請求成功時調用success回調函數，獲取傳回的數據，並顯示在頁面中。
任務
我來試試，親自調用$.ajax()方法檢測輸入值的奇偶性
下列代碼的第28、30行中，設置$.ajax()方法中的配置對象，檢測輸入值的奇偶性，並將檢測后的結果顯示在頁面中。請使用POST方式發送請求。
注：url為 http://www.imooc.com/data/check.php
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<html xmlns="http://www.w3.org/1999/xhtml">
<head>
<title>使用ajax()方法加載服務器數據</title>
<script src="http://libs.baidu.com/jquery/1.9.0/jquery.js" type="text/javascript"></script>
<link href="style.css" rel="stylesheet" type="text/css" />
</head>
<body>
<div id="divtest">
<div class="title">
<span class="fl">檢測數字的奇偶性</span>
<span class="fr">
<input id="btnCheck" type="button" value="檢測" />
</span>
</div>
<ul>
<li>請求輸入一個數字
<input id="txtNumber" type="text" size="12" />
</li>
</ul>
</div>
<script type="text/javascript">
$(function () {
$("#btnCheck").bind("click", function () {
$.ajax({
url: "http://www.imooc.com/data/check.php",
data: { num: $("#txtNumber").val() },
dataType:"text",
success: function (data) {
$("ul").append("<li>你輸入的<b> "
+ $("#txtNumber").val() + " </b>是<b> "
+ data + " </b></li>");
}
});
})
});
</script>
</body>
</html>
8.使用ajaxSetup()方法設置全局Ajax默認選項
使用ajaxSetup()方法可以設置Ajax請求的一些全局性選項值，設置完成后，后面的Ajax請求將不需要再添加這些選項值，它的調用格式為：
jQuery.ajaxSetup([options])或$.ajaxSetup([options])
可選項options參數為一個對象，通過該對象設置Ajax請求時的全局選項值。
例如，先調用ajaxSetup()方法設置全局的Ajax選項值，再點擊兩個按鈕，分別使用ajax()方法請求不同的服務器數據，並將數據內容顯示在頁面，如下圖所示：
從圖中可以看出，使用ajaxSetup()方法設置了Ajax請求時的一些全局性的配置選項后，在兩次調用ajax請求服務器txt文件時，只需要設置url地址即可。
任務
我來試試，親自使用ajaxSetup()方法設置Ajax請求時的全局性配置選項
在下列代碼的第27、28、29行中，使用ajaxSetup()方法設置Ajax請求時的全局性配置選項，完成檢測輸入數據奇偶性和是否大於0的檢測。
注：url路徑為 http://www.imooc.com/data/check.php
ajaxSetup的問題
1.這個ajax 全局配置，只是針對 ajax()方法？ 還是所有能發送ajax 請求的方法都器作用的？
自己親自試過了，是針對所有的
全局設置同樣需要加入 type:'POST',
2.為什么data: { num: $("#txtNumber").val()},寫在ajaxSetup里面就會判斷所有的數都等於0？？
這里請求的是php格式的數據，dataType:"text"在$.ajax( )里是不起作用的，ajaxSetup中如果放入數據data{num:$("txtNumber").val( )}，會與ajax里面的兩條語句發生沖突，因為數據是輸入前需要判斷的，所以不應該放在配置信息里面
9.使用ajaxStart()和ajaxStop()方法
ajaxStart()和ajaxStop()方法是綁定Ajax事件。ajaxStart()方法用於在Ajax請求發出前觸發函數，ajaxStop()方法用於在Ajax請求完成后觸發函數。它們的調用格式為：
$(selector).ajaxStart(function())和$(selector).ajaxStop(function())
其中，兩個方法中括號都是綁定的函數，當發送Ajax請求前執行ajaxStart()方法綁定的函數，請求成功后，執行ajaxStop ()方法綁定的函數。
例如，在調用ajax()方法請求服務器數據前，使用動畫顯示正在加載中，當請求成功后，該動畫自動隱藏，如下圖所示：
從圖中可以看出，由於使用ajaxStart()和ajaxStop()方法綁定了動畫元素，因此，在開始發送Ajax請求時，元素顯示，請求完成時，動畫元素自動隱藏。
注意：該方法在1.8.2下使用是正常的
任務
我來試試，親自使用ajaxStart()和ajaxStop()方法綁定元素。
在下列代碼的第24、27行，調用ajaxStart()和ajaxStop()方法綁定元素，當發送Ajax請求和結束請求時，在元素中顯示不同的文字內容。
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<html xmlns="http://www.w3.org/1999/xhtml">
<head>
<title>使用ajaxStart()和ajaxStop()方法</title>
<script src="http://libs.baidu.com/jquery/1.8.2/jquery.js" type="text/javascript"></script>
<link href="style.css" rel="stylesheet" type="text/css" />
</head>
<body>
<div id="divtest">
<div class="title">
<span class="fl">加載一段文字</span>
<span class="fr">
<input id="btnShow" type="button" value="加載" />
</span>
</div>
<ul>
<li id="divload"></li>
</ul>
</div>
<script type="text/javascript">
$(function () {
$("#divload").ajaxStart(function(){
$(this).html("正在請求數據...");
});
$("#divload").ajaxStop(function(){
$(this).html("數據請求完成！");
});
$("#btnShow").bind("click", function () {
var $this = $(this);
$.ajax({
url: "http://www.imooc.com/data/info_f.php",
dataType: "json",
success: function (data) {
$this.attr("disabled", "true");
$("ul").append("<li>我的名字叫：" + data.name + "</li>");
$("ul").append("<li>男朋友對我說：" + data.say + "</li>");
}
});
})
});
</script>
</body>
</html>
問：
ajax 中 dataType類型如何選擇 在什么樣的情況選擇啥？那POST和GET是怎么選擇呢？
答：
看你請求的地址返回的數據格式，是json形式就用json，是純文本 HTML 信息就用html，是需要純文本就用text等等，POST和GET是type選擇，你參數是加在url后的就是get方式，如果是表單類型的數據就用post。這個你查一下get和post之間的區別就知道了
10.編程練習
定義一個json對象，用於保存學生的相關資料
任務
通過$.each()工具函數，獲取數組中各元素的名稱與內容，顯示在頁面中。
1.首先定義一個json對象jsonStu,保存學生的"姓名"和"分數"信息.
2.然后,通過調用$.each()工具函數,遍歷該數據,分別獲取"姓名"和"分數"信息.
3.最后,將遍歷后獲取的整個內容顯示在頁面中
<!DOCTYPE html>
<html>
<head>
<meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
<title>挑戰題</title>
</head>
<body>
<h3>學生信息表</h3>
<ul id="ul"></ul>
<script src="http://libs.baidu.com/jquery/1.9.0/jquery.js" type="text/javascript"></script>
<script>
//定義一個json對象，用於保存學生的相關資料
var json = [
{"name":"小紅","num":"101","sex":"女","code":"80"},
{"name":"小明","num":"102","sex":"女","code":"60"},
{"name":"小欄","num":"103","sex":"女","code":"90"},
{"name":"小小","num":"104","sex":"女","code":"100"}
]
$.each(json,function(index, student) {
$("#ul").append("<li>"+ "姓名:"+student.name+" num:"+student.num+" sex:"+student.sex+" 分數:"+student.code+"</li>")
})
</script>
</body>
</html>
11.使用jquery ajax寫上述案例
<!DOCTYPE HTML>
<html>
<head>
<meta http-equiv="Content-Type" content="text/html; charset=utf-8">
<title>Demo</title>
<style>
body, input, select, button, h1 {
font-size: 28px;
line-height:1.7;
}
</style>
</head>
<body>
<h1>員工查詢</h1>
<label>請輸入員工編號：</label>
<input type="text" id="keyword" />
<button id="search">查詢</button>
<p id="searchResult"></p>
<h1>員工新建</h1>
<label>請輸入員工姓名：</label>
<input type="text" id="staffName" /><br>
<label>請輸入員工編號：</label>
<input type="text" id="staffNumber" /><br>
<label>請選擇員工性別：</label>
<select id="staffSex">
<option>女</option>
<option>男</option>
</select><br>
<label>請輸入員工職位：</label>
<input type="text" id="staffJob" /><br>
<button id="save">保存</button>
<p id="createResult"></p>
<script src="http://apps.bdimg.com/libs/jquery/1.11.1/jquery.js"></script>
<script>
$(document).ready(function(){
$("#search").click(function(){
$.ajax({
type: "GET",
url: "serverjson2.php?number="+encodeURI（$("#keyword").val()）+"&" + new Date().getTime(),
dataType: "json",
success: function(data) {
if (data.success) {
$("#searchResult").html(data.msg);
//document.getElementById("searchResult").innerHTML = request.responseText;
} else {
$("#searchResult").html("出現錯誤：" + data.msg);
}
},
error: function(jqXHR){
alert("發生錯誤：" + jqXHR.status);
//alert("發生錯誤：" + request.status);
},
});
});
$("#save").click(function(){
$.ajax({
type: "POST",
url: "serverjson.php",
//post請求，數據的參數構造，傳入id為id為staffName，id為staffNumber，id為staffSex和id為staffJob的值
data: {
name: $("#staffName").val(),
number: $("#staffNumber").val(),
sex: $("#staffSex").val(),
job: $("#staffJob").val()
},
dataType: "json",
success: function(data){
if (data.success) {
$("#createResult").html(data.msg);
} else {
$("#createResult").html("出現錯誤：" + data.msg);
}
},
error: function(jqXHR){
alert("發生錯誤：" + jqXHR.status);
},
});
});
});
</script>
</body>
</html>
十.跨域
用於解決主流瀏覽器的跨域數據訪問的問題，只支持GET請求。
Jsonp
寫法：
只需要在服務器端設置即可
參考資料：
http://www.imooc.com/learn/250
http://www.imooc.com/learn/762