利用ajax异步post方式校验验证码
发布日期:2021-07-30 08:22:52 浏览次数:22 分类:技术文章

利用ajax异步post方式校验验证码


step1,获得ajax对象

 比如:

    var xhr = getXhr();
 
step2,发送post请求

   xhr.open('post','check_username.do',true);

   //因为按照http协议的要求,发送post请求时,应该发送一个content-type消息头。

   //而ajax对象默认情况下不会发送这个消息头,所以,需要调用setRequestHeader方法来添加。

   xhr.setRequestHeader('content-type','application/x-www-form-urlencoded');

   xhr.onreadystatechange = f1;

   //请求参数要写在send方法里

   xhr.send('username=zs&age=12');


step3,编写服务器端的处理程序

    跟以前相比,有一点点改变,就是一般不需要返回一个完整的页面,只需要返回部分数据。


step4,编写事件处理函数

            function f1(){
                if(xhr.readState == 4){
                    var txt = xhr.responseText;
                    dom操作更新页面...
                }
            }


示例代码:

			//post请求方式			function check_username_post(){				var xhr = getXhr();				xhr.open('post','checkUsername',true);			http://write.blog.csdn.net/postedit	xhr.setRequestHeader(						'content-type','application/x-www-form-urlencoded');				xhr.onreadystatechange = function(){					if(xhr.readyState==4){						if(xhr.status==200){							//服务器访问正常							var txt = xhr.responseText;							$('check_msg').innerHTML = txt;						}else{							$('check_msg').innerHTML = '验证出错';						}					}				};				$('check_msg').innerHTML = '正在验证';				xhr.send("username="+$V('userrname'));			}

其他细节及代码见:





上一篇:ajax对象的获取及其常用属性
下一篇:利用ajax异步校验验证码