* 概述 |
AJAX是“Asynchronous Javascript And XML”的缩写,中文译作“异步JavaScript和XML”。使用AJAX可以通过HTTP协议与服务器交互数据,可以在在不重新加载整个网页的情况下,对网页的某部分进行更新。
XMLHttpRequest(XHR)是一个API对象,其中的方法可以用来在浏览器和服务器端传输数据。
为了实现AJAX技术,早期微软的IE5、IE6浏览器内嵌了XMLHTTP组件,其它浏览器比如Opera、Mozila的早期版本则内嵌了XMLHttpRequest组件。XMLHTTP与XMLHttpRequest有很多相同的属性和方法,因此XMLHTTP也被一起叫做XMLHttpRequest,简称XHR。后来XHR被W3C组织标准化。各浏览器也逐渐按照W3C制定的标准来实现XHR,到目前为止,仍然有部分的属性和方法不被部分浏览器支持。不过笔者认为,老版本浏览器的占有量会越来越少,新版本的浏览器可能会更加严格的按照W3C制定的标准来实现XHR,兼容性问题就会被慢慢淡化,Jquery框架在2.2的版本在实例化XHR时就不考虑IE5、IE6的兼容性问题了。
* 实例分析 |
在jsp页面中,我们创建XMLHttpRequest对象,向服务器请求数据,完成数据加载,实现局部更新。
/**
* 输入用户名失去焦点事件
* 检查用户名是否重复
*/
function checkUserName(){
//获得文本框的值
var username= document.getElementById("username").value;
//1.创建异步交互对象
var xhr =createXmlHttp();
//2.设置监听
xhr.onreadystatechange=function () {
if (xhr.readyState== 4){ //TODO:
if (xhr.status==200){
document.getElementById("userNameValid").innerHTML=xhr.responseText;
}
}
}
//3.打开连接
xhr.open("GET","${pageContext.request.contextPath}/user_findByName.action?time="+ new Date().getTime() + "&username="+username,true);
//4.发送
xhr.send(null);
}
function createXmlHttp(){
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;
}
上面提到的checkUserName方法,是在input输入框失去焦点时触发的,那么根据action(user_findByName.action),我们可以继续追寻:
/**
* AJAX进行一步校验用户名的执行方法
* @throws IOException
*/
public String findByName() throws IOException {