Ajax (Asynchronous JavaScript and XML)：異步的JavaScript和XML。
Ajax不是某種編程語(yǔ)言，而是一種在無(wú)需重新加載整個(gè)網(wǎng)頁(yè)的情況之下能夠更新部分網(wǎng)頁(yè)的技術(shù)。
傳統(tǒng)的網(wǎng)頁(yè)（即不用ajax技術(shù)的網(wǎng)頁(yè)）想要更新內(nèi)容或者提交一個(gè)表單，就要重新載入頁(yè)面。
而使用了ajax技術(shù)的網(wǎng)頁(yè)，通過(guò)在后臺(tái)跟服務(wù)器進(jìn)行少量的數(shù)據(jù)交換，網(wǎng)頁(yè)就可以實(shí)現(xiàn)異步局部更新。
使用步驟：
1、利用html+css來(lái)實(shí)現(xiàn)頁(yè)面，表達(dá)信息
2、用XMLHttpRequest和web服務(wù)器進(jìn)行數(shù)據(jù)的異步交換
3、運(yùn)營(yíng)js操作DOM，實(shí)現(xiàn)動(dòng)態(tài)局部刷新
//XMLHttpRequest對(duì)象創(chuàng)建
var request；
if(window.XMLHttpRequest){
request=new XMLHttpRequest(); //IE7+,Firefox,Chrome,Opera，Safari
}else{
request=new ActiveXObject（"Microsoft.XMLHTTP"）;//IE6,IE5
}
什么是http？
http是計(jì)算機(jī)通過(guò)網(wǎng)絡(luò)進(jìn)行通信的規(guī)則，使客戶端（瀏覽器）可以向web服務(wù)器請(qǐng)求信息和服務(wù)。
http是一種無(wú)狀態(tài)協(xié)議，無(wú)狀態(tài)指的是不建立持久的連接，也就是說(shuō)服務(wù)端不保留一些連接的信息。
瀏覽器發(fā)出請(qǐng)求，服務(wù)器響應(yīng)，連接即斷開。
一個(gè)完整的http請(qǐng)求過(guò)程，通常有7個(gè)步驟：
1. 建立TCP連接
2. web瀏覽器向web服務(wù)器發(fā)送請(qǐng)求命令
3. web瀏覽器發(fā)送請(qǐng)求頭信息
4. web服務(wù)器應(yīng)答
5. web服務(wù)器發(fā)送應(yīng)答頭信息
6. web服務(wù)器想瀏覽器發(fā)送數(shù)據(jù)
7. web服務(wù)器關(guān)閉TCP連接
一個(gè)http請(qǐng)求一般由四部分組成：
1. http請(qǐng)求的方法或動(dòng)作，比如是get還是post請(qǐng)求
2. 正在請(qǐng)求的URL，總得知道請(qǐng)求的地址是什么吧
3. 請(qǐng)求頭，包含一些客戶端環(huán)境信息，身份驗(yàn)證信息等
4. 請(qǐng)求體，也就是請(qǐng)求正文，請(qǐng)求正文中可以包含客戶提交的查詢字符串信息，表單信息等等
get請(qǐng)求：一般用于信息獲取，使用URL傳遞參數(shù)，對(duì)所發(fā)信息的數(shù)量也有限制，一般在2000個(gè)字符
post請(qǐng)求：一般用于修改服務(wù)器上的資源，對(duì)所發(fā)信息的數(shù)量無(wú)限制。
一個(gè)http響應(yīng)一般由三部分組成：
1. 一個(gè)數(shù)字和文字組成的狀態(tài)碼，用來(lái)顯示請(qǐng)求是成功還是失敗
2. 響應(yīng)頭，響應(yīng)頭也和請(qǐng)求頭一樣包含許多有用的信息，例如服務(wù)器類型、日期時(shí)間、內(nèi)容類型和長(zhǎng)度等
3. 相應(yīng)體，也就是響應(yīng)正文
http狀態(tài)碼由3位數(shù)字構(gòu)成，其中首位數(shù)字定義了狀態(tài)碼的類型
1xx：信息類，表示收到web瀏覽器請(qǐng)求，正在進(jìn)一步的處理中
2xx：成功，表示用戶請(qǐng)求被正確接收，理解和處理例如：200 OK
3xx：重定向，表示請(qǐng)求沒(méi)有成功，客戶必須采取進(jìn)一步的動(dòng)作
4xx：客戶端錯(cuò)誤，表示客戶端提交的請(qǐng)求有錯(cuò)誤，例如：404 NOT
Found：意味著請(qǐng)求中所引用的文檔不存在
5xx：服務(wù)器錯(cuò)誤，表示服務(wù)器不能完成對(duì)請(qǐng)求的處理：如 500
- XMLHttpRequest發(fā)送請(qǐng)求
open(method,url,async)
send(string)
例：request.open("GET","get.php",true);
request.send();
request.open("POST","post.php",true);
request.send();
request.open("POST","create.php",true);
//要寫在open和send方法之間
request.setRequestHeader("Content-type","application/x-www-form-urlencoded");
request.send("name=張三&sex=男");
實(shí)例前端代碼：
<body>
<h1>員工查詢</h1>
<label>請(qǐng)輸入員工編號(hào)：</label>
<input type="text" id="keyword" />
<button id="search">查詢</button>
<p id="searchResult"></p>
<h1>員工新建</h1>
<label>請(qǐng)輸入員工姓名：</label>
<input type="text" id="staffName" /><br>
<label>請(qǐng)輸入員工編號(hào)：</label>
<input type="text" id="staffNumber" /><br>
<label>請(qǐng)選擇員工性別：</label>
<select id="staffSex">
<option>女</option>
<option>男</option>
</select><br>
<label>請(qǐng)輸入員工職位：</label>
<input type="text" id="staffJob" /><br>
<button id="save">保存</button>
<p id="createResult"></p>
</body>
responseText：獲得字符串形式的響應(yīng)數(shù)據(jù)
responseXML：獲得XML形式的響應(yīng)數(shù)據(jù)
status和statusText：以數(shù)字和文本形式返回http狀態(tài)碼
getAllResponseHeader()：獲取所有的響應(yīng)報(bào)頭
getResponseHeader()：查詢響應(yīng)中的某個(gè)字段的值
readyState（onreadystatechange通過(guò)這個(gè)事件監(jiān)聽）屬性：
0：請(qǐng)求未初始化，open還未調(diào)用
1：服務(wù)器連接已建立，open已經(jīng)調(diào)用了
2：請(qǐng)求已接收，也就是接收到頭信息了
3：請(qǐng)求處理中，也就是接收到響應(yīng)主體了
4：請(qǐng)求已完成，且響應(yīng)已就緒，也就是響應(yīng)完成了
例：var request=new XMLHttpRequest();
request.open("GET","get.php",true);
request.send();
request.onreadystatechange = function(){
if(request.readyState===4&&request.status===200)
{
//做一些事情
request.responseText
}
}
實(shí)例：
<script>
document.getElementById("search").onclick = function(){
//發(fā)送Ajax查詢請(qǐng)求并處理
var request = new XMLHttpRequest();
request.open("GET","service.php?number="+document.getElementById("keyword").value);
request.send();
request.onreadystatechange = function(){
if(request.readyState === 4){
if(request.status === 200){
document.getElementById("searchResult").innerHTML = request.responseText;
}else{
alert(''發(fā)生錯(cuò)誤：" + request.status);
}
}
}
}
</script>
實(shí)例post：
<script>
document.getElementById("save").onclick = function(){
//發(fā)送Ajax查詢請(qǐng)求并處理
var request = new XMLHttpRequest();
request.open("POST","service.php);
var data = "name=" + document.getElementById("staffName").value
+"&number="+document.getElementById("staffNumber").value
+"&sex="+document.getElementById("staffSex").value
+"&job="+document.getElementById("staffJob").value;
request.setRequestHeader("Content-type","application/x-www-form-urlencoded");
request.send(data);
request.onreadystatechange = function(){
if(request.readyState === 4){
if(request.status === 200){
document.getElementById("createResult").innerHTML = request.responseText;
}else{
alert(''發(fā)生錯(cuò)誤：" + request.status);
}
}
}
}
</script>
JSON：JavaScript對(duì)象表示法（JavaScript Object Notation）
JSON是存儲(chǔ)和交換文本信息的語(yǔ)法，類似XML。它采用鍵值對(duì)的方式來(lái)組織，易于人們閱讀和編寫，同時(shí)也易于機(jī)器解析和生成
JSON是獨(dú)立于語(yǔ)言的，也就是說(shuō)不管什么語(yǔ)言，都可以解析JSON，只需要按照J(rèn)SON的規(guī)則來(lái)就行。
JSON與XML比較：
JSON的長(zhǎng)度相比XML短小
JSON讀寫的速度更快
JSON可以使用JavaScript內(nèi)建的方法直接進(jìn)行解析，轉(zhuǎn)換成JavaScript對(duì)象，非常方便
JSON語(yǔ)法規(guī)則：
JSON數(shù)據(jù)的書寫格式：名稱/值對(duì)。
名稱/值對(duì)組合中的名稱寫在前面（在雙引號(hào)中），值對(duì)寫在后面（同樣在雙引號(hào)中），中間用冒號(hào)隔開：比如"name":"張三"
JSON的值可以是下面這些類型：
數(shù)字（整數(shù)或浮點(diǎn)數(shù)），比如123，1.23
字符串（在雙引號(hào)中）
邏輯值（true或false）
數(shù)組（在方括號(hào)中）
對(duì)象（在花括號(hào)中）
null
JSON解析：
eval和JSON.parse
在代碼中使用eval是很危險(xiǎn)的！特別是用它執(zhí)行第三方的JSON數(shù)據(jù)（其中可能包含惡意代碼）時(shí)，
盡可能使用JSON.parse()方法解析字符串本身，該方法還可以捕捉JSON中的語(yǔ)法錯(cuò)誤。
實(shí)例：
<script>
document.getElementById("save").onclick = function(){
//發(fā)送Ajax查詢請(qǐng)求并處理
var request = new XMLHttpRequest();
request.open("POST","service.php);
var data = "name=" + document.getElementById("staffName").value
+"&number="+document.getElementById("staffNumber").value
+"&sex="+document.getElementById("staffSex").value
+"&job="+document.getElementById("staffJob").value;
request.setRequestHeader("Content-type","application/x-www-form-urlencoded");
request.send(data);
request.onreadystatechange = function(){
if(request.readyState === 4){
if(request.status === 200){
var data = JSON.parse(request.responseText);
if(data.success){
document.getElementById("createResult").innerHTML = data.msg;
}else{
document.getElementById("createResult").innerHTML = "出現(xiàn)錯(cuò)誤:" + data.msg;
}
}else{
alert("發(fā)生錯(cuò)誤：" + request.status);
}
}
}
}
</script>
jQuery.ajax([settings])
type：類型，“POST”或“GET”，默認(rèn)為“GET”
url：發(fā)送請(qǐng)求的地址
data：是一個(gè)對(duì)象，連同請(qǐng)求發(fā)送到服務(wù)器的數(shù)據(jù)
dataType：預(yù)期服務(wù)器返回的數(shù)據(jù)類型。如果不指定，jQuery將自動(dòng)根據(jù)http包MIME信息來(lái)智能判斷，一般我們采用json格式，可以設(shè)置為"json"
success：是一個(gè)方法，請(qǐng)求成功后的回調(diào)函數(shù)。傳入返回后的數(shù)據(jù)，以及包含成功代碼的字符串
error：是一個(gè)方法，請(qǐng)求失敗時(shí)調(diào)用此函數(shù)。傳入XMLHttpRequest對(duì)象
實(shí)例：
$(document).ready(function(){
$("#search").click(function(){
$.ajax({
type:"GET",
url:"service.php?number=" + $("#keyword").val(),
dataType:"json",
success: function(data){
if(data.success){
$("#searchResult").html(data.msg);
}else{
$("#searchResult").html("出現(xiàn)錯(cuò)誤：" + data.msg);
}
},
error: function(jqXHR){
alert("發(fā)生錯(cuò)誤："+ jqXHR.status);
}
});
});
});
實(shí)例post：
$(document).ready(function(){
$("#save").click(function(){
$.ajax({
type:"GET",
url:"service.php",
dataType:"json",
data:{
name:$("#staffName").val(),
number:$("#staffNumber").val(),
sex:$("#staffSex").val(),
job:$("#staffJob").val(),
}
success: function(data){
if(data.success){
$("#createResult").html(data.msg);
}else{
$("#createResult").html("出現(xiàn)錯(cuò)誤：" + data.msg);
}
},
error: function(jqXHR){
alert("發(fā)生錯(cuò)誤："+ jqXHR.status);
}
});
});
});
一個(gè)域名地址的組成：
http:// www . abc.com : 8080 / scripts/jquery.js
協(xié)議 子域名 主域名 端口號(hào) 請(qǐng)求資源地址
當(dāng)協(xié)議、子域名、主域名、端口號(hào)中任意一個(gè)不相同時(shí)，都算作不同域
不同域之間相互請(qǐng)求資源，就算做 “跨域”
比如：http://www.abc.com/index.heml 請(qǐng)求 http://www.efg.com/service.php
JavaScript出于安全方面的考慮，不允許跨域調(diào)用其他頁(yè)面的對(duì)象。
跨域：簡(jiǎn)單地理解就是因?yàn)镴avaScript同源策略的限制，a.com域名下的js無(wú)法操作b.com
或是c.a.com域名下的對(duì)象。
主域名：abc.com
子域名：www.abc.com
bbs.abc.com
beijing.bbs.abc.com
haidian.beijing.bbs.abc.com
子域名不同就是跨域！
處理跨域方法一 ------代理（屬于后臺(tái)技術(shù)）
通過(guò)在同域名的web服務(wù)器端創(chuàng)建一個(gè)代理：
北京服務(wù)器（域名：www.beijing.com）
上海服務(wù)器（域名：www.shanghai.com）
比如在北京的web服務(wù)器的后臺(tái) (www.beijing.com/proxy-shanghaiservice.php)來(lái)調(diào)用
上海服務(wù)器 (www.shanghai.com/service.php)的服務(wù)，然后再把響應(yīng)結(jié)果返回給前端，
這樣前端調(diào)用北京同域名的服務(wù)就和調(diào)用上海的服務(wù)效果相同了。
處理跨域方法二 ------JSONP（只能處理GET請(qǐng)求）
JSONP可用于解決主流瀏覽器的跨域數(shù)據(jù)訪問(wèn)的問(wèn)題，
在www.aaa.com頁(yè)面中：
<script>
function jsonp(json){
alert(json["name"]);
}
</script>
<script src = "http://bbb.com/jsonp.js"></script>
在www.bbb.com頁(yè)面中：
jsonp({"name":"張三","age":24});
處理跨域方法三 ------XHR2（IE10以下的版本都不支持）
html5提供的XMLHttpRequest level2已經(jīng)實(shí)現(xiàn)了跨域訪問(wèn)以及其他的一些新功能，
但是IE10以下的版本都不支持。
只需要在服務(wù)器端做一些小小的改造即可：
1. header("Access-Control-Allow-Origin:域名")
2. header("Access-Control-Allow-Methods:POST,GET")
- 使用load()方法異步請(qǐng)求數(shù)據(jù)
使用load()方法通過(guò)Ajax請(qǐng)求加載服務(wù)器中的數(shù)據(jù)，并把返回的數(shù)據(jù)放置到指定的元素中，它的調(diào)用格式為：
load(url,[data],[callback])
參數(shù)url為加載服務(wù)器地址，可選項(xiàng)data參數(shù)為請(qǐng)求時(shí)發(fā)送的數(shù)據(jù)，callback參數(shù)為數(shù)據(jù)請(qǐng)求成功后，
執(zhí)行的回調(diào)函數(shù)。
例如，點(diǎn)擊“加載”按鈕時(shí)，向服務(wù)器請(qǐng)求加載一個(gè)指定頁(yè)面的內(nèi)容，加載成功后，
將數(shù)據(jù)內(nèi)容顯示在<div>元素中，并將加載按鈕變?yōu)椴豢捎茫?<body>
<div id="divtest">
<div class="title">
<span class="fl">我最愛吃的水果</span>
<span class="fr">
<input id="btnShow" type="button" value="加載" />
</span>
</div>
<div class="content"></div>
</div>
<script type="text/javascript">
$(function () {
$("#btnShow").bind("click", function () {
var $this = $(this);
$(".content")
.html("")
.load("Data/fruit.html", function () {
$this.attr("disabled", "true");
};)
})
});
</script>
</body>
- 使用getJSON()方法異步加載JSON格式數(shù)據(jù)
使用getJSON()方法可以通過(guò)Ajax異步請(qǐng)求的方式，獲取服務(wù)器中的數(shù)據(jù)，并對(duì)獲取的數(shù)據(jù)進(jìn)行解析，
顯示在頁(yè)面中，它的調(diào)用格式為：
jQuery.getJSON(url,[data],[callback])或$.getJSON(url,[data],[callback])
其中，url參數(shù)為請(qǐng)求加載json格式文件的服務(wù)器地址，可選項(xiàng)data參數(shù)為請(qǐng)求時(shí)發(fā)送的數(shù)據(jù)，
callback參數(shù)為數(shù)據(jù)請(qǐng)求成功后，執(zhí)行的回調(diào)函數(shù)。
例如，點(diǎn)擊頁(yè)面中的“加載”按鈕，調(diào)用getJSON()方法獲取服務(wù)器中JSON格式文件中的數(shù)據(jù)，并遍歷數(shù)據(jù)，
將指定的字段名內(nèi)容顯示在頁(yè)面中：
<body>
<div id="divtest">
<div class="title">
<span class="fl">我最喜歡的一項(xiàng)運(yùn)動(dòng)</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("Data/sport.json", function (data) {
$this.attr("disabled", "true");
$.each(data, function (index, sport) {
$("ul").append("<li>" + sport["name"] + "</li>");
});
});
})
});
</script>
</body>
- 使用getScript()方法異步加載并執(zhí)行js文件
用getScript()方法異步請(qǐng)求并執(zhí)行服務(wù)器中的JavaScript格式的文件，它的調(diào)用格式如下所示：
jQuery.getScript(url,[callback])或$.getScript(url,[callback])
參數(shù)url為服務(wù)器請(qǐng)求地址，可選項(xiàng)callback參數(shù)為請(qǐng)求成功后執(zhí)行的回調(diào)函數(shù)。
例如，點(diǎn)擊“加載”按鈕，調(diào)用getScript()加載并執(zhí)行服務(wù)器中指定名稱的JavaScript格式的文件，
并在頁(yè)面中顯示加載后的數(shù)據(jù)內(nèi)容：
<body>
<div id="divtest">
<div class="title">
<span class="fl">我最喜歡的運(yùn)動(dòng)</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("Data/sport.js", function () {
$this.attr("disabled", "true");
});
})
});
</script>
</body>
- 使用get()方法以GET方式從服務(wù)器獲取數(shù)據(jù)
使用get()方法時(shí)，采用GET方式向服務(wù)器請(qǐng)求數(shù)據(jù)，并通過(guò)方法中回調(diào)函數(shù)的參數(shù)返回請(qǐng)求的數(shù)據(jù)，
它的調(diào)用格式如下：
$.get(url,[callback])
參數(shù)url為服務(wù)器請(qǐng)求地址，可選項(xiàng)callback參數(shù)為請(qǐng)求成功后執(zhí)行的回調(diào)函數(shù)。
例如，當(dāng)點(diǎn)擊“加載”按鈕時(shí)，調(diào)用get()方法向服務(wù)器中的一個(gè).php文件以GET方式請(qǐng)求數(shù)據(jù)，
并將返回的數(shù)據(jù)內(nèi)容顯示在頁(yè)面中：
<body>
<div id="divtest">
<div class="title">
<span class="fl">我的個(gè)人資料</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("Data/info.php", function (data) {
$this.attr("disabled", "true");
$("ul").append("<li>我的名字叫：" + data.name + "</li>");
$("ul").append("<li>男朋友對(duì)我說(shuō)：" + data.say + "</li>");
}, "json");
})
});
</script>
</body>
- 使用post()方法以POST方式從服務(wù)器發(fā)送數(shù)據(jù)
與get()方法相比，post()方法多用于以POST方式向服務(wù)器發(fā)送數(shù)據(jù)，服務(wù)器接收到數(shù)據(jù)之后，進(jìn)行處理，
并將處理結(jié)果返回頁(yè)面，調(diào)用格式如下：$.post(url,[data],[callback])
參數(shù)url為服務(wù)器請(qǐng)求地址，可選項(xiàng)data為向服務(wù)器請(qǐng)求時(shí)發(fā)送的數(shù)據(jù)，可選項(xiàng)callback參數(shù)為請(qǐng)求成功后
執(zhí)行的回調(diào)函數(shù)。
例如，在輸入框中錄入一個(gè)數(shù)字，點(diǎn)擊“檢測(cè)”按鈕，調(diào)用post()方法向服務(wù)器以POST方式發(fā)送請(qǐng)求，
檢測(cè)輸入值的奇偶性，并顯示在頁(yè)面中：
<body>
<div id="divtest">
<div class="title">
<span class="fl">檢測(cè)數(shù)字的奇偶性</span>
<span class="fr"><input id="btnCheck" type="button" value="檢測(cè)" /></span>
</div>
<ul>
<li>請(qǐng)求輸入一個(gè)數(shù)字 <input id="txtNumber" type="text" size="12" /></li>
</ul>
</div>
<script type="text/javascript">
$(function () {
$("#btnCheck").bind("click", function () {
$.post("Data/check.php", {
num: $("#txtNumber").val()
},
function (data) {
$("ul").append("<li>你輸入的<b> "
+ $("#txtNumber").val() + " </b>是<b> "
+ data + " </b></li>");
});
})
});
</script>
</body>
使用serialize()方法可以將表單中有name屬性的元素值進(jìn)行序列化，生成標(biāo)準(zhǔn)URL編碼文本字符串，
直接可用于ajax請(qǐng)求，它的調(diào)用格式如下：
$(selector).serialize()
其中selector參數(shù)是一個(gè)或多個(gè)表單中的元素或表單元素本身。
例如，在表單中添加多個(gè)元素，點(diǎn)擊“序列化”按鈕后，調(diào)用serialize()方法，將表單元素序列化后的
標(biāo)準(zhǔn)URL編碼文本字符串顯示在頁(yè)面中：
<body>
<div id="divtest">
<div class="title">
<span class="fl">我的個(gè)人資料</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>
- 使用ajax()方法加載服務(wù)器數(shù)據(jù)
使用ajax()方法是最底層、功能最強(qiáng)大的請(qǐng)求服務(wù)器數(shù)據(jù)的方法，它不僅可以獲取服務(wù)器返回的數(shù)據(jù)，
還能向服務(wù)器發(fā)送請(qǐng)求并傳遞數(shù)值，它的調(diào)用格式如下：
jQuery.ajax([settings])或$.ajax([settings])
其中參數(shù)settings為發(fā)送ajax請(qǐng)求時(shí)的配置對(duì)象，在該對(duì)象中，url表示服務(wù)器請(qǐng)求的路徑，
data為請(qǐng)求時(shí)傳遞的數(shù)據(jù)，dataType為服務(wù)器返回的數(shù)據(jù)類型，success為請(qǐng)求成功的執(zhí)行的回調(diào)函數(shù)，
type為發(fā)送數(shù)據(jù)請(qǐng)求的方式，默認(rèn)為get。
例如，點(diǎn)擊頁(yè)面中的“加載”按鈕，調(diào)用ajax()方法向服務(wù)器請(qǐng)求加載一個(gè)txt文件，
并將返回的文件中的內(nèi)容顯示在頁(yè)面：
<body>
<div id="divtest">
<div class="title">
<span class="fl">加載一段文字</span>
<span class="fr">
<input id="btnCheck" type="button" value="檢測(cè)" />
</span>
</div>
<ul></ul>
</div>
<script type="text/javascript">
$(function () {
$("#btnShow").bind("click", function () {
$.ajax({
url: "Data/article.txt",
dataType: "text",
success: function (data) {
$this.attr("disabled","true");
$("ul").append(data);
}
});
})
});
</script>
</body>
- 使用ajaxSetup()方法設(shè)置全局Ajax默認(rèn)選項(xiàng)
使用ajaxSetup()方法可以設(shè)置Ajax請(qǐng)求的一些全局性選項(xiàng)值，設(shè)置完成后，后面的Ajax請(qǐng)求將不需要
再添加這些選項(xiàng)值，它的調(diào)用格式為：
jQuery.ajaxSetup([options])或$.ajaxSetup([options])
可選項(xiàng)options參數(shù)為一個(gè)對(duì)象，通過(guò)該對(duì)象設(shè)置Ajax請(qǐng)求時(shí)的全局選項(xiàng)值。
例如，先調(diào)用ajaxSetup()方法設(shè)置全局的Ajax選項(xiàng)值，再點(diǎn)擊兩個(gè)按鈕，分別使用ajax()方法請(qǐng)求不同
的服務(wù)器數(shù)據(jù)，并將數(shù)據(jù)內(nèi)容顯示在頁(yè)面：
<body>
<div id="divtest">
<div class="title">
<span class="fl">加載一段文字</span>
<span class="fr">
<input id="btnShow_1" type="button" value="加載1" />
<input id="btnShow_2" type="button" value="加載2" />
</span>
</div>
<ul> </ul>
</div>
<script type="text/javascript">
$(function () {
$.ajaxSetup({
dataType: "text",
success: function (data) {
$("ul").empty().append(data);
}
});
$("#btnShow_1").bind("click", function () {
$.ajax({
url: "Data/article_1.txt"
});
})
$("#btnShow_2").bind("click", function () {
$.ajax({
url: "Data/article_2.txt"
});
})
});
</script>
</body>
- 使用ajaxStart()和ajaxStop()方法
ajaxStart()和ajaxStop()方法是綁定Ajax事件。ajaxStart()方法用于在Ajax請(qǐng)求發(fā)出前觸發(fā)函數(shù)，
ajaxStop()方法用于在Ajax請(qǐng)求完成后觸發(fā)函數(shù)。它們的調(diào)用格式為：
$(selector).ajaxStart(function())和$(selector).ajaxStop(function())
其中，兩個(gè)方法中括號(hào)都是綁定的函數(shù)，當(dāng)發(fā)送Ajax請(qǐng)求前執(zhí)行ajaxStart()方法綁定的函數(shù)，
請(qǐng)求成功后，執(zhí)行ajaxStop ()方法綁定的函數(shù)。
jQuery工具類函數(shù)
在jQuery中，通過(guò)$.browser對(duì)象可以獲取瀏覽器的名稱和版本信息，如$.browser.chrome為true，
表示當(dāng)前為Chrome瀏覽器，$.browser.mozilla為true，表示當(dāng)前為火狐瀏覽器，
還可以通過(guò)$.browser.version方式獲取瀏覽器版本信息。
例如，調(diào)用$.browser對(duì)象，獲取瀏覽器名稱并顯示在頁(yè)面中：
<body>
<div id="divtest">
<div class="title">
<span class="fl">獲取瀏覽器名稱</span>
</div>
<div class="content"></div>
</div>
<script type="text/javascript">
$(function () {
var strTmp = "您的瀏覽器名稱是：";
if ($.browser.chrome) { //谷歌瀏覽器
strTmp += "Chrome";
}
if ($.browser.mozilla) { //火狐相關(guān)瀏覽器
strTmp += "Mozilla FireFox";
}
$(".content").html(strTmp);
});
</script>
</body>
在jQuery中，可以調(diào)用名為$.isEmptyObject的工具函數(shù)，檢測(cè)一個(gè)對(duì)象的內(nèi)容是否為空，如果為空，
則該函數(shù)返回true，否則，返回false值，調(diào)用格式如下：
$.isEmptyObject(obj);
其中，參數(shù)obj表示需要檢測(cè)的對(duì)象名稱。
例如，通過(guò)$.isEmptyObject()函數(shù)，檢測(cè)某個(gè)指定的對(duì)象是否為空，并將結(jié)果顯示在頁(yè)面中：
<body>
<div id="divtest">
<div class="title">
<span class="fl">檢測(cè)對(duì)象是否為空</span>
</div>
<div class="content"></div>
</div>
<script type="text/javascript">
$(function () {
var obj = { };
var strTmp = "您定義了一個(gè)：";
if ($.isEmptyObject(obj)) { //檢測(cè)是否為空
strTmp += "空對(duì)象";
}
else {
strTmp += "非空對(duì)象";
}
$(".content").html(strTmp);
});
</script>
</body>
- 檢測(cè)對(duì)象是否為原始對(duì)象
調(diào)用名為$.isPlainObject的工具函數(shù)，能檢測(cè)對(duì)象是否為通過(guò){}或new Object()關(guān)鍵字創(chuàng)建的原始
對(duì)象，如果是，返回true，否則，返回false值，調(diào)用格式為：
$.isPlainObject (obj);
其中，參數(shù)obj表示需要檢測(cè)的對(duì)象名稱。
- 檢測(cè)兩個(gè)節(jié)點(diǎn)的包含關(guān)系
調(diào)用名為$.contains的工具函數(shù)，能檢測(cè)在一個(gè)DOM節(jié)點(diǎn)中是否包含另外一個(gè)DOM節(jié)點(diǎn)，如果包含，
返回true，否則，返回false值，調(diào)用格式為：
$.contains (container, contained);
參數(shù)container表示一個(gè)DOM對(duì)象節(jié)點(diǎn)元素，用于包含其他節(jié)點(diǎn)的容器，contained是另一個(gè)DOM對(duì)象
節(jié)點(diǎn)元素，用于被其他容器所包含。
調(diào)用名為$.trim的工具函數(shù)，能刪除字符串中左右兩邊的空格符，但該函數(shù)不能刪除字符串中間的空格，
調(diào)用格式為：
$.trim (str);
參數(shù)str表示需要?jiǎng)h除左右兩邊空格符的字符串。
調(diào)用名為$. param的工具函數(shù)，能使對(duì)象或數(shù)組按照key/value格式進(jìn)行序列化編碼，該編碼后的值
常用于向服務(wù)端發(fā)送URL請(qǐng)求，調(diào)用格式為：
$. param (obj);
參數(shù)obj表示需要進(jìn)行序列化的對(duì)象，該對(duì)象也可以是一個(gè)數(shù)組，整個(gè)函數(shù)返回一個(gè)
經(jīng)過(guò)序列化編碼后的字符串。
- 使用$.extend()擴(kuò)展工具函數(shù)
調(diào)用名為$. extend的工具函數(shù)，可以對(duì)原有的工具函數(shù)進(jìn)行擴(kuò)展，自定義類級(jí)別的jQuery插件，
調(diào)用格式為：
$. extend ({options});
參數(shù)options表示自定義插件的函數(shù)內(nèi)容。
例如，調(diào)用$.extend()函數(shù)，自定義一個(gè)用于返回兩個(gè)數(shù)中最大值的插件，并在頁(yè)面中將插件返回的
最大值顯示在頁(yè)面中：
<body>
<div id="divtest">
<div class="title">
<span class="fl">自定義工具函數(shù)求兩值中最大值</span>
<span class="fr">
<input id="btnShow" name="btnShow" type="button" value="計(jì)算" />
</span>
</div>
<div class="content">
<div class="tip"></div>
</div>
</div>
<script type="text/javascript">
/*------------------------------------------------------------/
功能：返回兩個(gè)數(shù)中最大值
參數(shù)：數(shù)字p1,p2
返回：最大值的一個(gè)數(shù)
示例：$.MaxNum(1,2);
/------------------------------------------------------------*/
(function ($) {
$.extend({
"MaxNum": function (p1, p2) {
return (p1 > p2) ? p1 : p2;
}
});
})(jQuery);
$(function () {
$("#btnShow").bind("click", function () {
$(".tip").html("");
var strTmp = "15與7中最大的數(shù)是：";
strTmp +=$.MaxNum (15, 7);
//顯示在頁(yè)面中
$(".tip").show().append(strTmp);
});
});
</script>
</body>
- 使用$.extend()擴(kuò)展Object對(duì)象
除使用$.extend擴(kuò)展工具函數(shù)外，還可以擴(kuò)展原有的Object對(duì)象，在擴(kuò)展對(duì)象時(shí)，兩個(gè)對(duì)象將進(jìn)行合并，
當(dāng)存在相同屬性名時(shí)，后者將覆蓋前者，調(diào)用格式為：
$. extend (obj1,obj2,…objN);
參數(shù)obj1至objN表示需要合并的各個(gè)原有對(duì)象。
例如，調(diào)用$.extend()函數(shù)對(duì)兩個(gè)已有的對(duì)象進(jìn)行合并，并將合并后的新對(duì)象元素內(nèi)容顯示在頁(yè)面中：
<body>
<div id="divtest">
<div class="title">
<span class="fl">合并原有對(duì)象</span>
</div>
<div class="content">
<div class="tip"></div>
</div>
</div>
<script type="text/javascript">
$(function () {
var objInfo = { name: "" };
var objMess = { name: "白富美,", title: "歡迎與我聯(lián)系！" };
var objNewInfo =$.extend(objInfo, objMess);
var strTmp = "<b>對(duì)象 白富美 合并后</b>：<br/><br/>";
strTmp += objNewInfo.name + objInfo.title;
//顯示在頁(yè)面中
$(".tip").show().append(strTmp);
});
</script>
</body>
