优点：减轻服务器的负担,按需取数据,最大程度的减少冗余请求
局部刷新页面,减少用户心理和实际的等待时间,带来更好的用户体验
基于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>