Ajax的全称:
Asynchronous JavaScript and XML(异步的JavaScript和XML)
有了下面这个对象之后,才出现了异步处理请求的方式。
XMLHttpRequest对象
var request=new XMLHttpRequest();//这种方式在IE6,IE5不支持
所以可以定义如下:
Ajax不是某种编程语言,是一种在无需重新加载整个网页的情况之下能够更新部分网页的技术。
var request;
if(window.XMLHttpRequest)
{
request=new XMLHttpRequest();//IE7+,Firefox,Chrome,Opera
}else{
request=new ActiveXObject("Microsoft.XMLHTTP");//IE6,IE5
}
定义一个Ajax函数,因为针对不同的浏览器的创建方式不同,所以我们创建XmlHttpRequest如下:
function createXmlHttpRequest(){
var xmlHttp;
try{ //Firefox, Opera 8.0+, Safari
xmlHttp=new XMLHttpRequest();
}catch (e){
try{ //Internet Explorer
xmlHttp=new ActiveXObject("Msxml2.XMLHTTP");
}catch (e){
try{
xmlHttp=new ActiveXObject("Microsoft.XMLHTTP");
}catch (e){}
}
}
return xmlHttp;
}
函数,xmlHttpRequest有4种状态,xmlHttpRequest.onreadystatechange表示的是每次状态的变化触发的事件,
xmlHttpRequest.readyState表示当前所处的状态,当这个值等于4并且xmlHttpRequest.status==200||xmlHttpRequest.status==304,
就表示成功回传信息,发送的数据成功得到响应。
window.οnlοad=function(){//这个是页面加载完了过后再执行
document.getElementById("checkusername").οnclick=function(){
var xhr=createXmlHttpRequest();
xhr.onreadystatechange=function()
{
if(xhr.readyState==4)//当有成功得到相应的状态后就执行这里面的操作
{
if(xhr.status==200||xhr.status==304){
var data =xhr.responseText;
document.getElementById("divcheck").innerHTML=data;
}
}
}
//打开和服务器的连接,加Time是让每次请求信息不一样,请求信息一样得不到响应
xhr.open("POST","${pageContext.request.contextPath}/ajaxServlet?time="+new Date().getTime());
//设置请求头信息
xhr.setRequestHeader("content-type","application/x-www-form-urlencoded");
var username=document.getElementById("username").value;
//发送数据,使用post的话在前面设置serRequestHeader,使用get的话这里就是send(null)
xhr.send("username="+username);
}
}
这样我们就将页面输入的username通过Ajax传给servlet去处理,处理完后通过Servlet中的PrintWriter out =
response.getWriter(); out.write("data");这个方法将数据传回到页面,页面通过
var data =xhr.responseText;得到数据并进行处理,就完成一次ajax请求。