AJAX
- 优点:增强用户体验,局部刷新减少服务器响应内容降低了服务器压力
- 缺点:增加了服务器访问次数增加了服务器压力
获取XMLHttpRequest对象
function createXMLHttp(url){
var xmlHttpRequest=null;
if (window.XMLHttpRequest){
// code for all new browsers
xmlHttpRequest=new XMLHttpRequest();
}
else if (window.ActiveXObject){
// code for IE5 and IE6
try{
xmlHttp=new ActiveXObject("Msxml2.XMLHTTP");
}catch(e){
xmlHttp=new ActiveXObject("Microsoft.XMLHTTP");
}
}
if (xmlHttpRequest==null){
alert("Your browser does not support XMLHTTP.");
return null;
}
return xmlHttpRequest;
}
打开链接
open方法三个参数
- 请求方式
- 请求的url
- 是否为异步请求
<!-- get -->
xmlHttpRequest.open("GET","/xpress/ajaxServlet",true);
<!-- post -->
xmlHttpRequest.open("GET","/xpress/ajaxServlet",true);
xmlHttpRequest.setRequestHeader("Content-Type","x-www-form-urlencoded");
发送
xmlHttpRequest.send("username=xpress&nickname=xp");
响应
- xmlHttpRequest.readyState; 5种状态
- 0:刚创建
- 1:请求开始,已经调用open
- 2:已经调用send
- 3:服务器已经响应,但未完成
- 4:服务器响应结束
- xmlHttpRequest.status;服务器响应码
- xmlHttpRequest.responseText; 响应的文本内容
- xmlHttpRequest.responseXML; 响应的xml内容,是一个document对象,服务器段设置Content-Type:text/xml;charset=UTF-8
xmlHttpRequest.onreadystatechange = function(){
if(xmlHttpRequest.readyState == 4 && xmlHttpRequest.status == 200){
var text = xmlHttpRequest.responseText;
}
}
以上概念总结于传智播客JavaWeb课程