Ajax---后台校验用户输入的数据

来源：互联网发布：java大数据方向编辑：程序博客网时间：2024/05/22 14:31

Ajax----校验用户输入的数据
index.jsp
<head>
<title>Ajax技术演示</title>
<script type="text/javascript">
//把name提交到后台校验；看是否可用
function chacke1(obj){
var name=obj.value;
//创建一个Ajax
var xhr=null;//XMLHttpRequest
if(window.XMLHttpRequest){//看浏览器是否认识该对象--
xhr=new XMLHttpRequest();//-高版本的浏览器ActiveObjectIE7之后，火狐，google等支持
}else{
xhr=new ActiveObject("Microsoft.XMLHttp");//IE6及以下，其它大部分旧版本的浏览器
}
//2设置通讯和地址**************与POST方式有区别********************8
var url="<c:url value='TestServlet?name="+name+"'/>";//校验参数的servlet
//POST方式有区别var url="<c:url value='TestServlet'/>";不放参数
xhr.open("GET",url,true);//true为异步：你做你的；我做我的；同时可以运行
//xhr.open("GET",url,false);//false为同步
//POS方式有区别：xhr.open("Post",url,true);

//3设置访问成功后的js对象（调用回显函数--原来在子页面调用父页面的函数；来操作告诉用户其填写的name是否合法）
xhr.onreadystatechange=function (){
if(xhr.readyState==4){//Ajax是完成状态
if(xhr.status==200){//正常应答才执行
var text=xhr.responseText();//拿到后台的返回信息
alert("后台返回信息"+text);
//***********如果想在这里操纵页面----用这种架构;调用函数
succ(text);
}
}

}
//4发送（动作触发）********与POST方式有区别***********
xhr.send(null);//是GET方式提交参数为null
//POST方式有区别xhr.send("name="+name);

alert("结束了");//如果是true为异步；这句会立马执行；如果是false为同步；要等ajax执行完成才会执行这句
}
function succ(obj){
div1.innerHTML=obj;
}
</script>
</head>
<body>
<form action="">
<h3>GET方式的ajax技术演示</h3> <br/>
Name<input type="text" name="name" onblur="chack1(this);"/><br/>
<div id="div1"></div><br/><br/>
<h3>POST方式的ajax技术演示</h3> <br/>
Name<input type="text" name="name" onblur="chack2(this);"/><br/>
<div id="div2"></div><br/><br/>
Pwd<input type="password">
</form>
</body>
<-------------------把Ajax做成工具---------------->
ajax.js
function Ajax(obj){//传进一个要用Ajax的对象
this.get=function(url,succ,failure){//URL：obj调用的是后台的那个servlet路径
//succ和failure 是设置访问成功后的js对象(回调函数)
//创建一个Ajax
var xhr=null;
if(window.XMLHttpRequest){
xhr=new XMLHttpRequest();
}else{
xhr=new ActiveObject("Microsoft.XMLHttp");
}
//2设置通讯和地址
xhr.open("GET",url,true);
//3设置访问成功后的js对象
xhr.onreadystatechange=function (){
if(xhr.readyState==4){//Ajax是完成状态
if(xhr.status==200){//正常应答才执行
var text=xhr.responseText();//拿到后台的返回信息
alert("后台返回信息"+text);
succ(text);
}else{
failure(xhr.status);
}
}

}
//4发送（动作触发）
xhr.send(null);//是GET方式提交参数为null
}
this.post=function(url,data,succ,failure){//URL：
//succ和failure 是设置访问成功后的js对象(回调函数);data是要传的参数
//创建一个Ajax
var xhr=null;
if(window.XMLHttpRequest){
xhr=new XMLHttpRequest();
}else{
xhr=new ActiveObject("Microsoft.XMLHttp")；
}
//2设置通讯和地址
xhr.open("POST",url,true); //3设置访问成功后的js对象
xhr.onreadystatechange=function (){
if(xhr.readyState==4){//Ajax是完成状态
if(xhr.status==200){//正常应答才执行
var text=xhr.responseText();//拿到后台的返回信息
alert("后台返回信息"+text);
succ(text);
}else{
failure(xhr,status);
}

} }

xhr.setRequestHeader("Content-Type", "application/x-www-form-urlencoded");
//4发送（动作触发）
xhr.send(data);
}
}
应用ajax.js用界面---index2.jsp
<head>
<script type="text/javascript" src="<c:url value='/js/ajax.js'/>"></script>
<script type="text/javascript">
//把name提交到后台校验；看是否可用
function chacke1(obj){
var name=obj.value;
var url="<c:url value='/TestServlet'?name="+name+"/>";
var ajax=new Ajax();
ajax.get(url, succ1, failure);
}
function succ1(obj){
div1.innerHTML=obj;
}
function chacke2(obj){
var data="name"+obj.value;
var url="<c:url value='TestServlet'/>";
var ajax=new Ajax();
ajax.post(url,data,succ2, failure);
}
function succ2(obj){
div2.innerHTML=obj;
}
function failure(obj){
alert("服务器响应的错误信息代码:"+obj);
}
</script>
</head>
<body>
<form action="">
<h3>GET方式的ajax技术演示</h3> <br/>
Name<input type="text" name="name" onblur="chack1(this);"/><br/>
<div id="div1"></div><br/><br/>
<h3>POST方式的ajax技术演示</h3> <br/>
Name<input type="text" name="name" onblur="chack2(this);"/><br/>
<div id="div2"></div><br/><br/>
Pwd<input type="password">
</form>
</body>

阅读全文

0 0