ajax mysql登录我注册_利用ajax完成简单的注册登录

一、首先我们会把ajacx进行封装，众所周知，ajax的步骤一般分为四个部分

1、创建ajax对象

const xhr = new XMLHttpRequest();

2、打开连接，里面的三个参数代表的是请求方式和连接的路径，路径的后面可以直接加？+数据；

第三个参数是布尔类型，代表是否执行异步操作，然后true代表异步，false代表同步

xhr.open('get','demo.php?id=1',true);

3、发送请求

xhr.send();

4、监听请求状态

xhr.onreadystatechange = function(){//判断xhr的状态(0~4 4的时候就圆满完成)和请求的状态 - 200

if(xhr.readyState===4 && xhr.status==200){//接收响应数据

let res =xhr.responseText;

console(res);

}

}

然后post请求里面是需要在send()里面传输数据的，需要在发送请求前，设置post请求头，

模拟表单来传递数据给服务端(否则获取不到send中的参数)

//请求头

ajax.setRequestHeader('content-type', 'application/x-www-form-urlencoded')//send发送请求的时候要携带请求参数(键1=值1&键2=值2)

ajax.send('name=Jack&age=18&gender=男')

二、然后，我来介绍一下，简单的封装ajax

/*封装ajax*/

functionsendAjax(options){//处理每个选项

//路径必填，且是字符串

if(!options.url){//没有传url

throw new Error("请求地址必填");

}//如果代码能走到这里，传了地址

//判断类型

if(Object.prototype.toString.call(options.url) !== '[object String]'){//不是字符串

throw new Error("请求地址必须是字符串");

}//处理请求方式

//没有传，默认是get

if(!options.method){

options.method= 'get';

}//如果代码能走到这里，说明传入了

//判断是否是get或post

if(options.method.toLowerCase()!=="get" && options.method.toLowerCase()!=="post"){//不是get或post

throw new Error("请求方式只接受get或post");

}//处理数据

if(!options.data){ //如果没传

//默认赋值为null

options.data = null;

}else{ //如果有传入

var data = '';//判断数据是字符串还是object

if(Object.prototype.toString.call(options.data)==='[object String]'){//如果是字符串

//判断是否至少包含一个 =

if(options.data.indexOf("=") === -1){throw new Error("数据格式有误！");

}

data=options.data;

}else if(Object.prototype.toString.call(options.data)==='[object Object]'){//{"username":"张三","password":123456,tel:1234567810} 转为

//'username=张三&password=123456&tel=12345678910'

var f = '';for(var attr inoptions.data){

data+= f + attr + "=" +options.data[attr];

f= '&';

}

}//代码走到这里，data都是一个字符串，是数据

//请求方式是否为get

if(options.method==="get"){//将数据放在地址后面

options.url = options.url + "?" + data; //"demo.php?[object Object]"

}

}//处理是否异步的async

if(options.async===undefined){ //值是undefiend表示没有传

options.async = true;

}//代码走到这里，说明async传入了

//判断类型是否是布尔值

if(Object.prototype.toString.call(options.async) !== '[object Boolean]'){throw new Error("async参数只接受布尔类型");

}//处理想要的数据格式 dataType

//判断是否传入

if(!options.dataType){

options.dataType= 'string';

}//如果能走到这里，传入了，就判断是否为 string或json

if(options.dataType.toLowerCase() !== 'string' && options.dataType.toLowerCase() !== 'json'){throw new Error("dataType参数只接受string或json");

}//处理成功时要执行的回调函数

//判断是否传入

if(!options.success){

options.success= function(){}

}//如果传入了，判断是否是一个函数

if(Object.prototype.toString.call(options.success) !== '[object Function]'){throw new Error("success参数只接受函数类型");

}//处理错误是执行的函数

if(!options.error){

options.error= function(){}

}//如果传入了，判断是否是一个函数

if(Object.prototype.toString.call(options.error) !== '[object Function]'){throw new Error("error参数只接受函数类型");

}//到这里所有参数处理完毕 - 开始ajax

//ajax对象的兼容写法

varxhr;try{

xhr= new XMLHttpRequest(); //这种写法在ie下是不能兼容的

}catch(e){try{

xhr= new ActiveXObject("Microsoft.XMLHTTP"); //兼容ie678

}catch(err){

xhr= new ActiveXObject("Msxml2.XMLHTTP"); //更低版本ie

}

}//打开

xhr.open(options.method,options.url,options.async);//监听

xhr.onreadystatechange = function(){//判断ajax的状态

//先判断是否完成

if(xhr.readyState===4){//在判断是否成功

if(xhr.status>=200 && xhr.status<300){//成功

//获取响应的数据

var res =xhr.responseText;//判断想要的数据格式是什么

if(options.dataType==="json"){//如果是json，就将数据先转为json对象

res =JSON.parse(res);

}//调用成功想执行的函数

options.success(res);

}else{ //请求失败了

options.error();

}

}

}//发送

if(options.method==="post"){

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

xhr.send(data);return;

}

xhr.send();

}

Document

登录

用户名：密码：

var btn = document.querySelector("input[type='button']");var usernamein = document.querySelector("input[name='username']");var passwordin = document.querySelector("input[name='password']");

btn.addEventListener("click",login);functionlogin(){var username =usernamein.value.trim();var password =passwordin.value.trim();//验证数据

var usernameRule = /^(\w|[\u4e00-\u9fa5]){2,12}$/;var passwordRule = /^[a-zA-Z0-9]{6,16}$/;if(!usernameRule.test(username)){

alert("用户名必须是2~12位的数字、字母、下划线或汉字");return false;

}if(!passwordRule.test(password)){

alert("密码必须是6~16的数字、字母");return false;

}//调用函数发送ajax//里面的username是键值对，其实是username:username

sendAjax({

url:"login.php",

method:"post",

data:{username,password},

dataType:"json",

success:res=>{if(res.meta.status===201){

alert(res.meta.msg);

location.assign("home.html");

}else{

alert(res.meta.msg);return false;

}

}

});

}