- 오늘은 유효성검사와 ajax에 대해서 알아보겠습니다.
유효성 검사란?
- 유효성 검사(Validation)는 사용자로부터 입력받은 데이터가 원하는 형식과 규칙에 부합하는지를 확인하는 과정입니다. 웹 개발에서 유효성 검사는 주로 사용자가 제출한 폼 데이터의 유효성을 검증하는 데에 사용됩니다.
- 유효성 검사는 클라이언트 측 검사와 서버 측 검사로 나눌 수 있습니다. 클라이언트 측 검사는 웹 브라우저에서 실행되며, 사용자 인터페이스에 즉각적인 피드백을 제공할 수 있습니다. 대표적인 클라이언트 측 검사 방법으로는 HTML5에서 추가된 폼 유효성 검사 기능과JavaScript를 사용한 검사가 있습니다. 이러한 방법은 필드에 입력된 데이터가 올바른 형식인지, 필수 입력 필드가 비어있지 않은지 등을 확인할 수 있습니다.
- 하지만 클라이언트 측 검사만으로는 보안상의 문제가 발생할 수 있으므로 서버 측 검사도 필요합니다. 서버 측 검사는 서버에서 입력 데이터를 받아 실제로 유효성을 검사하는 것을 의미합니다. 서버 측 검사를 통해 입력 데이터의 정합성과 완전성을 보장할 수 있습니다. 주로 백엔드 언어나 프레임워크에서 제공하는 기능을 사용하여 서버 측 검사를 구현합니다.
AJAX란?
- Ajax(Asynchronous JavaScript and XML)는 웹 개발에서 사용되는 기술 중 하나로, 웹 페이지에서 비동기적으로 서버와 데이터를 교환할 수 있게 해줍니다.
- 기존의 웹 페이지는 사용자가 요청을 보내면 전체 페이지를 다시 불러와야 했지만, Ajax를 사용하면 페이지 전체를 다시 불러오지 않고도 필요한 데이터만 서버로부터 받아와 화면을 업데이트할 수 있습니다.
- Ajax는 JavaScript, XML, HTML, CSS 등을 사용하여 구현할 수 있습니다. 그러나 최근에는 XML 대신 JSON(JavaScript Object Notation)을 주로 사용합니다. Ajax를 사용하면 사용자 경험을 향상시킬 수 있으며, 서버와의 통신에서 발생하는 대기 시간을 줄일 수 있습니다. 예를 들어, 웹 페이지에서 실시간 검색 기능을 구현하거나, 채팅 애플리케이션에서 새로운 메시지를 실시간으로 받아올 때 Ajax를 사용할 수 있습니다.
- 자 이제 오늘 했던 예제를 함께 보시겠습니다.
<script src="https://ajax.googleapis.com/ajax/libs/jquery/3.6.0/jquery.min.js"></script>
<script>
let isEmailCheck = false;
function emailChecking()
function joinChecks(){
let youEmail = $("#youEmail").val();
if(youEmail == null || youEmail == ""){
$("#youEmailComment").text("* 이메일을 입력해주세요");
} else {
$.ajax({
type : "POST",
url : "joinCheck.php",
data : {"youEmail" : youEmail, "type" : isEmailCheck},
dataType : "json",
success : function(data){
if(data.result == "good"){
$("#youEmailComment").text("* 사용가능한 이메일입니다.");
isEmailCheck = true;
} else {
$("#youEmailComment").text("* 이미 회원가입한 이메일 입니다. 로그인해주세요");
isEmailCheck = false;
}
}
error : function(request, status, error){
console.log("request", +request);
console.log("status", +status);
console.log("error", +error);
}
})
}- Jquery를 사용해서 작업을 해주었습니다.Jquery를 사용하여 AJAX를 쉽게 사용할 수 있습니다.
$.ajax({
type : "POST",
url : "joinCheck.php",
data : {"youEmail" : youEmail, "type" : isEmailCheck},
dataType : "json",
success : function(data){
if(data.result == "good"){
$("#youEmailComment").text("* 사용가능한 이메일입니다.");
isEmailCheck = true;
} else {
$("#youEmailComment").text("* 이미 회원가입한 이메일 입니다. 로그인해주세요");
isEmailCheck = false;
}
}
})이 부분은 Ajax 요청을 보내는 부분입니다. $.ajax() 함수는 jQuery에서 제공하는 Ajax 헬퍼 함수입니다.
- type: "POST": 요청의 HTTP 메소드를 POST로 설정합니다.
- url: "joinCheck.php": 요청을 보낼 서버의 URL을 설정합니다.
- data: { "youEmail": youEmail, "type": isEmailCheck }: 요청에 포함될 데이터를 설정합니다. 이 경우에는 "youEmail"과 "type"이라는 두 개의 데이터를 전송합니다.
- dataType: "json": 서버에서 반환되는 데이터 타입을 JSON으로 설정합니다.
- success: function(data) { ... }: 요청이 성공적으로 완료되면 실행되는 콜백 함수입니다. 서버에서 반환된 데이터는 data 매개변수로 전달됩니다.
- error: function(request, status, error) { ... }: 요청이 실패한 경우 실행되는 콜백 함수입니다. 실패한 이유에 대한 정보는 request, status, error 매개변수로 전달됩니다.
- 끝!