來自網(wǎng)頁
一净薛、 Ajax簡介
Ajax(asynchronous javascript and xml)是異步的javascript和xml，因此需要瀏覽器允許javascript運行。Ajax可以在不刷新整個網(wǎng)頁的情況下更新網(wǎng)頁的部分內(nèi)容崭歧。2005年胧华，Google使用Ajax創(chuàng)建出的頁面極其生動，推動了Ajax的流行序愚，現(xiàn)今新浪微博憔披、Google地圖等都使用了Ajax技術(shù)來設(shè)計更加友好豐富的頁面。
二爸吮、Ajax交互
Ajax和服務(wù)器的交互如下：
- 瀏覽器創(chuàng)建XMLHttpRequest對象
- 瀏覽器請求服務(wù)器上的數(shù)據(jù)
- 瀏覽器發(fā)送XMLHttpRequest請求
- 服務(wù)器響應(yīng)XMLHttpRequest請求
- 服務(wù)器返回瀏覽器請求的數(shù)據(jù)
- 瀏覽器運行javascript解析服務(wù)器返回的數(shù)據(jù)并更新頁面內(nèi)容![ajax.gif]
來自網(wǎng)頁
三芬膝、Ajax實例
-
Ajax代碼
<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8" />
<title>Ajax Example</title>
<script>
function load()
{
var xmlhttp;
if (window.XMLHttpRequest)
{
xmlhttp = new XMLHttpRequest();
}
else
{
xmlhttp = new ActiveXObject("Microsoft.XMLHTTP");
}
xmlhttp.onreadystatechange = function()
{
if (xmlhttp.readyState == 4 && xmlhttp.status == 200)
{
document.getElementById("myDiv").innerHTML = xmlhttp.responseText;
}
}
xmlhttp.open("GET", "ajax.php", true);
xmlhttp.send();
}
</script>
</head>
<body>
<div id = "myDiv">use Ajax to modify text</div>
<button type = "button" onclick = "load()">modify text</button>
</body>
</html>
代碼解析：
對應(yīng)Ajax交互章節(jié)：
1.單擊button按鈕，事件調(diào)用load函數(shù)(Ajax開始了)
2.創(chuàng)建一個XMLHttpRequest對象
3.調(diào)用open方法異步請求ajax.php（只打印一句話形娇，參見如下ajax.gif）
4.調(diào)用send方法向服務(wù)器發(fā)出請求
5.等待服務(wù)器響應(yīng)锰霜，讀取服務(wù)器響應(yīng)結(jié)果
6.更改頁面文本內(nèi)容
-
Ajax渣渣效果演示
ajax.gif
四、Ajax小結(jié)
上文的Ajax實例演示效果很渣桐早，打擾了癣缅，這完全沒有體現(xiàn)Ajax的強大功能，比如百度瀏覽器的文本框輸入彈出提示勘畔，新聞頁面天氣的動態(tài)查詢更新等等所灸。但是Ajax的基本交互流程是相同的，以此入門炫七，日后再好好體驗Ajax的強大功能爬立。
