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

前端之家收集整理的这篇文章主要介绍了利用ajax异步post方式校验验证码前端之家小编觉得挺不错的,现在分享给大家,也给大家做个参考。

利用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异步校验验证码 原文链接:https://www.f2er.com/ajax/162665.html

猜你在找的Ajax相关文章