Andy

AJAX

2017/04/03 JavaEE

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课程

Search

    Post Directory