文章摘要
这篇文章介绍了如何使用AJAX技术在不同浏览器中创建XMLHTTP对象，并详细描述了验证用户名的过程。文章首先定义了一个名为`ajaxFunction`的函数，用于在IE7+、Firefox、Chrome、Safari等浏览器中创建XMLHTTP对象，针对不同版本的IE浏览器提供了兼容性处理方法。接着，文章描述了`CheckUserName`函数，该函数通过AJAX技术向一个Servlet发送用户名请求。在请求处理过程中，代码会根据服务器返回的状态码（如200表示“OK”，1表示用户名已存在）动态更新页面内容，显示相应的提示信息。文章还提到了在发送请求时设置内容类型和表单数据处理的步骤。整体来看，文章重点展示了如何利用AJAX技术实现高效的用户名验证功能。
//创建对象
function ajaxFunction(){
var xmlHttp;
try{
// 适用于IE7+, Firefox, Chrome, Opera, Safari
xmlHttp=new XMLHttpRequest();
}
catch(e){
try{
//Internet Explorer
xmlHttp=new ActiveXObject(“Msxml2.XMLHTTP”);
}
catch(e){
try{
// 适用于IE6, IE5
xmlHttp=new ActiveXObject(“Microsoft.XMLHTTP”);
}
catch(e){
xmlHttp=false;
}
}
}
return xmlHttp;
}
//创建对象
function ajaxFunction(){
var xmlHttp;
try{
// 适用于IE7+, Firefox, Chrome, Opera, Safari
xmlHttp=new XMLHttpRequest();
}
catch(e){
try{
//Internet Explorer
xmlHttp=new ActiveXObject(“Msxml2.XMLHTTP”);
}
catch(e){
try{
// 适用于IE6, IE5
xmlHttp=new ActiveXObject(“Microsoft.XMLHTTP”);
}
catch(e){
xmlHttp=false;
}
}
}
return xmlHttp;
}
var flag=ture;
function CheckUserName(){
//获取jsp页面输入的值
var name=document.getElementById(“r_name”).value;
if(name==””||name==null){
document.getElementById(“span01″).innerHTML=”<font color=’red’>用户名不能为空！</font>”
flag=false;
}else{
//1.创建对象
var request=ajaxFunction();
//2.发送请求
request.open(“POST”,”/StudyWeb/CheckUserNameServlet”,true);//true表示异步提交
//注册状态改变监听，获取服务器传送过来的数据
request.onreadystatechange=function(){
//readyState==4表示请求已经完成，且响应已就绪。status==200表示“OK”
if(request.readyState==4 && request.status==200){
var data=request.responseText;//获取CheckUserNameServlet中response中存储的值
if(data==1){
document.getElementById(“span01″).innerHTML=”<font color=’red’>用户名已存在！</font>”
flag=false;
}else{
document.getElementById(“span01″).innerHTML=”<font color=’green’>√</font>”
flag=true;
}
}
}
//如果是post方式带数据，那么这里要添加头，说明提交的数据类型是一个经过url编码的form表单数据
request.setRequestHeader(“Content-type”,”application/x-www-form-urlencoded;charset=UTF-8″);
//带数据过去，在send方法里填写表单数据
request.send(“name=”+name);
}
return flag;
}
© 版权声明
文章版权归作者所有，未经允许请勿转载。
