前端利用ajax实现用户注册页面

开发一个用户注册界面，使用ajax交互技术

ajax是什么呢？允许浏览器与服务器通信而无须刷新前页面的技术都被叫做Ajax.

AJAX:(Asynchronous JavaScript and XML)并不是一项新技术,其实是多种技术的综合，包括Javascript、XHTML和CSS、DOM、XML和XMLHttpRequest.

首先Ajax请求的步骤：

(1)创建XMLHttpRequest对象,也就是创建一个异步调用对象；

(2)创建一个新的HTTP请求,并指定该HTTP请求的方式、URL及验证信息；

(3)设置响应HTTP请求状态变化的函数；

(4)发送HTTP请求；

(5)获取异步调用返回的数据；

(6)使用JavaScript和DOM实现局部刷新。

注册页面由web开发，还是html,css,js组成。
其中为了实现用户注册我们引入了XMLHttpRequest对象，该对象可以让服务器与网页进行通信，让一个本来静态的网页可以和我们互动。我们需要为他设计对象类型API，其主要负责客户端和服务端数据的传递和接收和请求XML数据（JSON/TEXT）

其实我感觉JS最不好写…

附上代码：

task4.js:

//登录页的操作DOM
var register = document.getElementById('register');//获得登录页的注册按钮元素
var getVertify = document.getElementById('getVertify');//获得获取验证码的按钮元素
var userName = document.getElementById('userName');//获取邮箱框框元素
var vertify = document.getElementById('vertify');//获取验证码框框元素
var userPwd = document.getElementById('userPwd');//获取密码框框元素
var login = document.getElementById('login');//获取登录按钮元素
//全局变量
var vertifyCode , yourEmail ,yourPwd;

//获取验证码函数
getVertify.onclick = function(ev1){
myAjax('GET',"http://120.24.93.68:/api/register/sendCheckCode",{"email":""+userName.value+""},
function(xhr){
	var str = xhr.responseText;
	var myObj = JSON.parse(str);
	console.log(myObj);
	vertifyCode = myObj.data;
	vertify.value = vertifyCode;
	console.log(vertifyCode);
	console.log(myObj.code,myObj.message);
	},function(xhr){
		alert('请求失败!');
	})	;		
 //点击注册进行跳转到注册页面
 register.onclick = function(){
	 if(vertify.value != vertifyCode)
	 {
		 alert('当前验证码出错或超时!');
	 }
	 else
	 {
		 window.location.href = "register.html";
	 }
 }

}

//登录函数
login.onclick = function(){
if(userPwd.value.length == 0 || userName.value.length == 0)
{
alert(‘密码和邮箱不能为空!’);
}
else
{
myAjax(‘POST’,‘http://120.24.93.8/api/login’,
{
“email”:""+userName+"",
“password”:""+userPwd+""
},
function(xhr){
var str = xhr.responseText;
var myObj = JSON.parse(str);
console.log(myObj);
if(myObj.code != 200)
{
alert(‘密码或用户名错误’);
}
else
alert(‘登录成功’);
},
function(xhr){
alert(‘登录失败！’);
})
}
}

//对象转字符串
function objToStr(obj){
obj.time = new Date().getTime();
var res = [];
for(var key in obj){
res.push(encodeURIComponent(key)+"="+encodeURIComponent(obj[key]));//encodeURIComponent进行中文转码
}
return res.join("&");
}

//封装Ajax函数
function myAjax(type ,url , obj, success, error){
//将对象转换成为字符串
var str = objToStr(obj);
//创建一个异步对象
var xmlhttp , timer;

if(window.XMLHttpRequest){   //IE7+ , 火狐 , 谷歌 等浏览器
	xmlhttp = new XMLHttpRequest();
}
else{	//兼容IE6,IE5
	xmlhttp = new ActiveXObject("Microsoft.XMLHTTP");
}

//判断请求方式并设置请求
if(type === "GET"){
//发送GET请求
	xmlhttp.open("GET", url + "?" + str)
	xmlhttp.send();
}
else{
	xmlhttp.open("POST",url,true);
	xmlhttp.setRequestHeader("Content-type","application/json;charset=UTF-8");
		xmlhttp.send(JSON.stringify(obj));
}

//监听状态变化
xmlhttp.onreadystatechange = function(e){
	if(xmlhttp.readyState === 4){	
		if(xmlhttp.status === 200 ){
			success(xmlhttp);
		}
		else{
			error(xmlhttp);
		}
	}
}

}

task4.css:

.userPwd,.userName,.vertify{
display: block;
outline: none;
margin: 20px auto;
height: 30px;
width: 400px;
border-radius: 5px;
border: 1px #CCCCCC solid;
}

.login,.register,.getVertify{
margin-left: 45%;
margin-top: 10px;
float: left;
display: block;
width: 150px;
height: 25px;
cursor: pointer;
}

task4.html:

登录注册页面

有了这些我们就可以实现浏览器同步交互了，步骤：
1、客户发出HTTP请求

2、服务器接受客户的请求并处理客户的请求

3、服务器相应客户的请求，返回客户所需要的页面

这样一个使用AJAX异步请求实现登陆就完成了hhh
在这里插入图片描述

前端利用ajax实现用户注册页面

猜你喜欢