優點：減輕服務器的負擔,按需取數據,最大程度的減少冗余請求
局部刷新頁面,減少用戶心理和實際的等待時間,帶來更好的用戶體驗
基於xml標准化,並被廣泛支持,不需安裝插件等
進一步促進頁面和數據的分離
缺點：AJAX大量的使用了javascript和ajax引擎,這些取決於瀏覽器的支持.在編寫的時候考慮對瀏覽器的兼容性.
AJAX只是局部刷新,所以頁面的后退按鈕是沒有用的.
對流媒體還有移動設備的支持不是太好等
實例化ajax
//實例化對象 var xmlhttp=null; if(window.XMLHttpRequest) { xmlhttp=new XMLHttpRequest(); }else{ xmlhttp=ActiveXObject("Mircrosoft.XMLHTTP"); //瀏覽器是否支持 XMLHttpRequest 對象 }
//向服務器發送請求
xmlhttp.open("請求的類型get或post","文件在的服務器上位置","true異步或false同步");
xmlhttp.send();//將請求發送到 服務器上
setRequestHeader("頭名稱","規定頭的值");
//服務器響應
responseText(); //獲取字符串形式的響應數序
responseXML(); //獲取XML形式的響應數據
onreadystatechange事件
//當請求發送到服務器的時候，我們需要執行
XMLHttpRequest的三個重要屬性
onreadystatechange 存儲函數，每當readyState屬性改變時，就會調用該函數
readystate XMLHttpRequest的狀態
0為請求未初始化
1服務器連接已建立
2 請求已接收
3 請求處理中
4 請求已完成,且響應已就緒
status 200 “OK” 404 未找到頁面
xmlhttp.onreadystatechange=function()
{
if (xmlhttp.readyState==4 && xmlhttp.status==200)
{
document.getElementById("myDiv").innerHTML=xmlhttp.responseText;
}
}
<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8">
<meta http-equiv="X-UA-Compatible" content="IE=edge,chrome=1">
<title>Examples</title>
<meta name="description" content="">
<meta name="keywords" content="">
<link href="" rel="stylesheet">
</head>
<body>
<form entype="multipart/form-data" name="aax">
<table border="0" width="300">
<tr>
<td>名稱</td>
<td><input type="text" name=name /></td>
</tr>
<tr>
<td>類型</td>
<td>
<select name="s">
<option value="1">服裝</option>
<option value="2">視頻</option>
<option value="3">汽車</option>
</select>
</td>
</tr>
<tr>
<td align="right">單價：</td>
<td><input type="text" name="price"/></td>
</tr>
<tr>
<td align="right">庫存：</td>
<td><input type="text" name="total"/></td>
</tr>
<tr>
<td align="right">圖片：</td>
<td><input type="file" name="pic"/></td>
</tr>
<tr>
<td align="right" valign="top">描述：</td>
<td><textarea rows="5" cols="20" name="note"></textarea></td>
</tr>
<tr>
<td colspan="2" align="center">
<input type="submit" onclick="ajax();" value="添加"/>
<input type="reset" value="重置"/>
</td>
</tr>
</table>
</form>
<script>
function ajax()
{
var f=document.aax;
var name=f.name.value;
var typeid=f.s.value;
var pic=f.pic.value;
var price=f.price.value;
var note=f.note.value;
var xmlhttp=null;
if(window.XMLHttpRequest)
{
xmlhttp=new XMLHttpRequest();
}else{
xmlhttp=ActiveXObject("Microsoft.XMLHTTP");
}
var lian="name="+name+"&typeid="+typeid+"&pic="+pic+"&price="+price+"¬e="+note;
$xmlhttp.setRequestHeader("Content-Type","application/x-www-form-urlencoded;charset=UTF-8");
xmlhttp.open("get","addcas.php",true);
xmlhttp.send(null);
xmlhttp.onreadystatechange=function(){
if(xmlhttp.readyState==4 && xmlhttp.status==200)
{
document.getElementById("sed").innerHTML=$xmlhttp.responeseText;
}
};
}
</script> </body> </html>