AJAX 란 ?
Asynchronous JavaScript and XML 의 약자
자바스크립트를 이용해서 비동기식으로 서버와 통신하는 방식, 이 때 XML을 이용!
꼭 XML을 이용할 필요는 없고, 최근에는 json을 더 많이 이용한다!
비동기식이란 여러가지 일이 동시적으로 발생한다는 뜻으로, 서버와 통신하는 동안 다른 작업을 할 수 있다는 의미
기본 구조
- data : 서버에 전송할 데이터, key/value 형식의 객체
- dataType : 서버가 리턴하는 데이터 타입 (xml, json, script, html)
- type : 서버로 전송하는 데이터의 타입 (POST, GET)
- url : 데이터를 전송할 URL
- success : ajax 통신에 성공했을 때 호출될 이벤트 핸들러
로그인 예제
// login.php
<!DOCTYPE html>
<html lang="ko">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.2.4/jquery.min.js"></script>
<title>Document</title>
<script src="./js/main.js"></script>
</head>
<body>
<form id="form1" name="form1" action="login_ok.php" method="post">
<table>
<tr>
<td>아이디</td>
<td>
<input type='text' id='user_id' name='user_id' tabindex='1'/>
</td>
<td rowspan='2'>
<input type='button' id='login' tabindex='3' value='로그인' style='height:50px'/>
</td>
</tr>
<tr>
<td>비밀번호</td>
<td>
<input type='password' id='user_pw' name='user_pw' tabindex='2'/>
</td>
</tr>
</table>
</form>
<div id="message"></div>
<script>
$(document).ready(function() {
$('#login').on('click', function() {
var action = $('#form1').attr('action');
var form_data = {
user_id: $('#user_id').val(),
user_pw: $('#user_pw').val(),
is_ajax: 1
}
$.ajax({
type: "POST",
url: action,
data: form_data,
success: function(response) {
if(response == 'success') {
$('#message').html("<p>로그인 성공</p>")
$('#form1').slideUp('slow');
} else {
$('#message').html("<p>로그인 실패</p>")
}
}
})
return false;
})
})
</script>
</body>
</html>
// login_ok.php
<?
if(!isset($_POST['is_ajax'])) exit;
if(!isset($_POST['user_id'])) exit;
if(!isset($_POST['user_pw'])) exit;
$is_ajax = $_POST['is_ajax'];
$user_id = $_POST['user_id'];
$user_pw = $_POST['user_pw'];
$members = array(
'user1' => array('pw' => 'pw1', 'name' => '한놈'),
'user2' => array('pw' => 'pw2', 'name' => '두놈'),
'user3' => array('pw' => 'pw3', 'name' => '석삼')
)
if(!$is_ajax) exit;
if(!isset($members[$user_id])) exit;
if($members[$user_id]['pw'] != $user_pw) exit;
setcookie('user_id', $user_id)
setcookie('user_name', $members[$user_id]['name']);
echo "success";
?>
; 조심하자 ; 하나 차이로 코드가 작동하고 작동 안한다 ㅁㄴㅇㄻㄴㅇㄻㄴㄹㅇㅈㅁㄹㄷ
은정님 정리
API개념
Application Programming interface프로그램을 위한 인터페이스
프로그램간 커뮤니케이션을 담당하는 기능입니다.
어떤 응용프로그램에서 운영체제나 프로그래밍 언어가 제공하는 기능을 제어할 수 있도록 만든 인터페이스를 의미한다.
본래는 운영체제 프로그래밍 언어가 제공하는 기능을 제어할 수 있는 환경을 의미하였으나, 웹서비스에서 api의 의미가 확장 사용 되면서 특정 사이트에서 특정 데이터를 공유할 경우 어떤 방식으로 정보를 요청해야 하는지, 그리고 어떤 데이터를 제공 받을 수 있는지에 대한 규격또한 API라고도 한다.
동작원리
API는 사용자로부터 요청을 하면 결과값을 받아 Parding하면 된다.
요청 방법은 REST< XML-RPC 등의 형식이 있다.
그 가운데 REST 방식이 사용하는게 간단하기 때문에 많은 API제공 업체들이 REST 방식으로 API를 제공하고 있다.
덧붙여서 이야기를 하자면 REST API는 REST의 규칙에 맞게 만들어진 API를 의미한다.
REST의 규칙에 따라 URL를 규정하고 HTTP Methods를 활용하여 데이터를 요청할 수 있도록 한다.
REST의 정의를 제대로 이해하고 나면 REST 아키텍처를 적용한 API라는 사실만으로도 대충 API를 어떻게 사용하면 될지를 추측할 수 있다.
REST API Methode
CRUD ( create, read, update, delete )
GET
서버에 자원(resource)을 보내달라 요청을 하는것
주로 조회
POST
서버에게 자원(resource)를 보내면서 생성 요청
새로운 정보 추가
PUT
서버에게 자원(resource)을 업데이트 하거나
자원이 없다면 새로운 자원을 생성을 요청
PATCH
서버에게 자원(resource)의 업데이트를 요청
부분데이터를 업데이트
DELETE
서버에게 자원(resource) 삭제를 요청
'Dev > ajax' 카테고리의 다른 글
| serialize()로 노가다 없이 data를 한번에 보내버려~ (2) | 2021.07.05 |
|---|---|
| 이랜드 리테일 3월 퍼스널 컬러 (0) | 2021.02.15 |
| 롯데백화점 식품관 설문조사 (호남지방 추가 제작) (0) | 2021.02.03 |
| AJAX 비동기 통신 (롯데백화점 설문조사 결과) (0) | 2021.01.19 |
| AJAX 비동기 통신(타이어) (0) | 2021.01.19 |