아약스는 안정적으로 값을 반환 할 수없는 본질적으로 비동기이기 때문에 - 당신이 값을 반환 할 수 있도록 할 것 Promise 이데올로기 중심으로 구축 된 fetch API를 사용할 수 있습니다 또는 당신이 아약스 콜백을 사용할 수 있습니다 메일 검사가 완료되면 서버의 응답을 기반으로 처리를 계속합니다.
fetch api를 사용하면 여러 가지 서로 다른 요청을 연결할 수 있습니다. 따라서 이전 값이 true 또는 false 인 종속성이있는 경우 ajax에서 수행 할 수있는 작업을 기다릴 수 있습니다 (콜백 및 중첩 된 아약스 요청)
function mailCheck(mail) {
for(i = 0; i < mail.length; i++) {/* is this an array? */
if (mail[i] == "") document.getElementById("input").style.background = "#FFDDEE";
}
var _callback=function(response){
if(response===false){
document.getElementById("input").style.background = "#FFDDEE";
} else {
//TODO: GO TO NEXT STEP (PASSWORD)
}
}
existing.call(this, mail, _callback);
}
function existing(mail, callback) {
var xhr = new XMLHttpRequest();
xhr.onreadystatechange=function(){
if(this.status==200 && this.readyState==4)callback.call(this, this.response);
}
xhr.open('POST','mailcheck.php',true);
xhr.setRequestHeader('Content-Type','application/x-www-form-urlencoded');
xhr.send('mail='+mail);
}
제대로 완료되면 아약스와 비교하지만, 궁극적으로 더 유연한 때 ~ 아주 복잡 fetch API를 사용하여 기본 데모.
<?php
if($_SERVER['REQUEST_METHOD']=='POST') {
ob_clean();
$json=array('error');
$_POST['time']=microtime();
$dbhost = 'localhost';
$dbuser = 'root';
$dbpwd = 'xxx';
$dbname = 'xxx';
$db = new mysqli($dbhost, $dbuser, $dbpwd, $dbname);
switch($_POST['action']){
case 'checkmail':
/* db lookup and other tests */
$email=filter_var(filter_input(INPUT_POST, 'email', FILTER_SANITIZE_EMAIL), FILTER_VALIDATE_EMAIL);
$status=false;
$sql='select `username` from `users` where `email`=?';
$stmt=$db->prepare($sql);
if($stmt){
$stmt->bind_param('s', $email);
$result = $stmt->execute();
if($result){
$stmt->store_result();
$stmt->bind_result($username);
$stmt->fetch();
$stmt->close();
$db->close();
if($username) {
$_POST['username']=$username;
$status=true;
}
} else {
$status=false;
}
} else {
$status=false;
}
$_POST['status']=$status;
break;
case 'login':
/* validate user login */
$email=filter_var(filter_input(INPUT_POST, 'email', FILTER_SANITIZE_EMAIL), FILTER_VALIDATE_EMAIL);
$password=filter_input(INPUT_POST, 'password', FILTER_SANITIZE_STRING);
$status=false;
$sql='select `username`,`token` from `users` where `email`=? and `password`=?';
$stmt=$db->prepare($sql);
if($stmt){
$stmt->bind_param('ss', $email, $password);
$result = $stmt->execute();
if($result){
$stmt->store_result();
$stmt->bind_result($username, $token);
$stmt->fetch();
$stmt->close();
$db->close();
if($username) {
$_POST['username']=$username;
$_POST['token']=$token;
$status=true;
}
} else {
$status=false;
}
} else {
$status=false;
}
$_POST['status']=$status;
break;
}
$json = json_encode($_POST);
header('Content-Type: application/json');
header('HTTP/1.1 200 OK', true, 200);
exit($json);
}
?>
<!doctype html>
<html>
<head>
<meta charset='utf-8' />
<title>Chained Fetch</title>
<script>
var options={
once:false,
capture:false,
passive:false
};
document.addEventListener('DOMContentLoaded', function(){
document.querySelector('form > input[type="button"]').onclick=function(event){
var stack=[];
var url=location.href;
var mail=document.querySelector('form > input[name="email"]');
var password=document.querySelector('form > input[name="password"]');
var _final=function(r){
alert(r);
}
var _isvalid=function(r){
if(!r.status)throw new Error(r.action+' failed');
return r.status;
}
/* the urls could be totally different php scripts */
stack.push({
url:url, /* checkmail.php */
config:{
method:'POST',
mode:'cors',
credentials:'include',
headers:{ 'Content-Type':'application/x-www-form-urlencoded; charset=UTF-8' },
body:'action=checkmail&email='+mail.value
}
});
stack.push({
url:url,/* login.php */
config:{
method:'POST',
mode:'cors',
credentials:'include',
headers:{ 'Content-Type':'application/x-www-form-urlencoded; charset=UTF-8' },
body:'action=login&password='+password.value+'&email='+mail.value
}
});
fetch(stack[0].url, stack[0].config)
.then(response => response.json())
.then(data => _isvalid(data))
.then(data => fetch(stack[1].url, stack[1].config))
.then(response => response.json())
.then(data => _isvalid(data))
.then(_final)
.catch(err => alert(err.message));
}
},options);
</script>
</head>
<body>
<form>
<input type='email' name='email' />
<input type='password' name='password' value='knickers' />
<input type='button' value='Login' />
</form>
</body>
</html>
'mailCheck' - 메일 유형은 무엇입니까? 문자열, 배열, 객체? – RamRaider