1.Ajax概述
1.Ajax：
Asynchronous JavaScript and XML(異步的JavaScript和XML)
Ajax是一種用于創(chuàng)建快速動(dòng)態(tài)網(wǎng)頁(yè)的技術(shù)。
通過(guò)在后臺(tái)與服務(wù)器進(jìn)行少量數(shù)據(jù)交換，Ajax可以使網(wǎng)頁(yè)實(shí)現(xiàn)異步更新。這意味著可以在不重新加載整個(gè)網(wǎng)頁(yè)的情況下，對(duì)網(wǎng)頁(yè)的某部分進(jìn)行更新。
傳統(tǒng)的網(wǎng)頁(yè)（不使用 AJAX）如果需要更新內(nèi)容，必需重載整個(gè)網(wǎng)頁(yè)面。
2.優(yōu)點(diǎn)：
最大的優(yōu)點(diǎn)是在不重新加載整個(gè)頁(yè)面的情況下，可以與服務(wù)器交換數(shù)據(jù)并更新部分網(wǎng)頁(yè)內(nèi)容。
3.使用：
Ajax 不需要任何瀏覽器插件，只需要用戶在允許JavaScript的瀏覽器上執(zhí)行。
2.Ajax工作原理
Ajax的原理簡(jiǎn)單來(lái)說(shuō)通過(guò)XmlHttpRequest對(duì)象來(lái)向服務(wù)器發(fā)異步請(qǐng)求，從服務(wù)器獲得數(shù)據(jù)，然后用javascript來(lái)操作DOM而更新頁(yè)面。這其中最關(guān)鍵的一步就是從服務(wù)器獲得請(qǐng)求數(shù)據(jù)。
XMLHttpRequest是Ajax的核心機(jī)制
3.XMLHttpRequest
1.創(chuàng)建XMLHttpRequest 對(duì)象
由于瀏覽器的不同，創(chuàng)建XMLHttpRequest的方式也不同
可以這樣來(lái)判斷
var xmlhttp;
if (window.XMLHttpRequest)
{
// IE7+, Firefox, Chrome, Opera, Safari 瀏覽器執(zhí)行代碼
xmlhttp=new XMLHttpRequest();
}
else
{
// IE6, IE5 瀏覽器執(zhí)行代碼
xmlhttp=new ActiveXObject("Microsoft.XMLHTTP");
}
2.XMLHttpRequest 的屬性
responseText
從服務(wù)器進(jìn)程返回?cái)?shù)據(jù)的字符串形式。responseXML
來(lái)自服務(wù)器的響應(yīng)是 XML，而且需要作為 XML 對(duì)象進(jìn)行解析onreadystatechange
請(qǐng)求發(fā)送到服務(wù)器，需要執(zhí)行響應(yīng)任務(wù)
當(dāng)readyState發(fā)生改變時(shí)就會(huì)觸發(fā)onreadystatechange事件readyState
存有XMLHttpRequest的狀態(tài)。從0-4發(fā)生變化
0：請(qǐng)求未初始化
1：服務(wù)器連接已建立
2：請(qǐng)求已接收
3：請(qǐng)求處理
4：請(qǐng)求已完成，且響應(yīng)已就緒status
從服務(wù)器返回的數(shù)字代碼
eg：
200: "OK"
404: 未找到頁(yè)面
3.XMLHttpRequest的方法
open(method,url,async)
規(guī)定請(qǐng)求的類型、url以及是否異步處理請(qǐng)求。
method：請(qǐng)求的類型；get，post
url：文件在服務(wù)器上的位置
async：true（異步）或 false（同步）send(string)
將請(qǐng)求發(fā)送到服務(wù)器。
string：僅用于 POST 請(qǐng)求
一個(gè)例子說(shuō)明上述屬性及方法
<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8">
<script>
function loadXMLDoc()
{
//創(chuàng)建XMLHttpRequest對(duì)象
var xmlhttp;
if (window.XMLHttpRequest)
{
// IE7+, Firefox, Chrome, Opera, Safari 瀏覽器執(zhí)行代碼
xmlhttp=new XMLHttpRequest();
}
else
{
// IE6, IE5 瀏覽器執(zhí)行代碼
xmlhttp=new ActiveXObject("Microsoft.XMLHTTP");
}
//onreadystatechange事件
xmlhttp.onreadystatechange=function()
{
//觸發(fā)onreadystatechange事件的因素判斷
//readyState的XMLHttpRequest狀態(tài)為4(請(qǐng)求已完成，且響應(yīng)已就緒)，并且status（服務(wù)器）返回200：OK；觸發(fā)事件
if (xmlhttp.readyState==4 && xmlhttp.status==200)
{
//從服務(wù)器進(jìn)程返回?cái)?shù)據(jù)的字符串形式。將值返回到id=myDiv的地方
document.getElementById("myDiv").innerHTML=xmlhttp.responseText;
}
}
//規(guī)定請(qǐng)求的類型、url以及是否異步處理請(qǐng)求。
xmlhttp.open("GET","/try/ajax/ajax_info.txt",true);
//將請(qǐng)求發(fā)送給服務(wù)器
xmlhttp.send();
}
</script>
</head>
<body>
<div id="myDiv"><h2>使用 AJAX 修改該文本內(nèi)容</h2></div>
<button type="button" onclick="loadXMLDoc()">修改內(nèi)容</button>
</body>
</html>
4.jquery中的Ajax
$.ajax
url
發(fā)送請(qǐng)求的地址，默認(rèn)為當(dāng)前地址type
請(qǐng)求方式(get,post)，默認(rèn)為getdata
向服務(wù)器發(fā)送的數(shù)據(jù)，要求類型是String或者Object類型dataType
數(shù)據(jù)類型(text,json,script,xml,html……)success
要求為Function類型的參數(shù)，請(qǐng)求成功后調(diào)用的回調(diào)函數(shù)，有兩個(gè)參數(shù)。
(1)由服務(wù)器返回，并根據(jù)dataType參數(shù)進(jìn)行處理后的數(shù)據(jù)。
(2)描述狀態(tài)的字符串。
function(data, textStatus){
//data可能是xmlDoc、jsonObj、html、text等等
this; //調(diào)用本次ajax請(qǐng)求時(shí)傳遞的options參數(shù)
}
- error
要求為Function類型的參數(shù)，請(qǐng)求失敗時(shí)被調(diào)用的函數(shù)。該函數(shù)有3個(gè)參數(shù)，即XMLHttpRequest對(duì)象、錯(cuò)誤信息、捕獲的錯(cuò)誤對(duì)象(可選)。ajax事件函數(shù)如下
function(XMLHttpRequest, textStatus, errorThrown){
//通常情況下textStatus和errorThrown只有其中一個(gè)包含信息
this; //調(diào)用本次ajax請(qǐng)求時(shí)傳遞的options參數(shù)
}
目前我用到的只有這些，后面會(huì)更新
$(function(){
$('#send').click(function(){
$.ajax({
type: "GET",
url: "test.json",
data: {username:$("#username").val(), content:$("#content").val()},
dataType: "json",
success: function(data){
$('#resText').empty(); //清空resText里面的所有內(nèi)容
var html = '';
$.each(data, function(commentIndex, comment){
html += '<div class="comment"><h6>' + comment['username']
+ ':</h6><p class="para"' + comment['content']
+ '</p></div>';
});
$('#resText').html(html);
}
});
});
});
