공부할 책 : Do it! 자바스크립트 + 제이쿼리 입문
Ajax란?
Ajax(Asynchronous JavaScript and XML)란 비동기 방식의 Javascript와 XML 을 가리킨다.
동기 방식이란 서버에 신호를 보냈을 때 응답이 돌아와야 다음 동작을 수행할 수 있다.
비동기 방식이란 반대로 신호를 보냈을 때 응답 상태와 상관없이 다음 동작을 수행할 수 있다.
Ajax를 이용하는 이유 :
화면 전환 없이 클라이언트(사용자 컴퓨터)와 서버(서비스를 제공하는 컴퓨터)간에 XML, JSON, 텍스트, HTML 등의 정보를 교환하기 위해서이다.
다시 말해 Ajax를 이용하면 사용자가 서버에 자료를 요청할 때 화면 전환 없이 요청한 자료를 전송받을 수 있다.
또한 자료를 요청할 경우 어느 정도 시간이 소요되는 데 반해 Ajax를 이용하면 사용자가 기다릴 필요 없이 다른 작업을 바로 수행할 수 있다.
Ajax 사용 전/후 달라진 점을 살펴보자.
Ajax 사용 전 방식
사용자(client)가 자료를 요청하면 반드시 서버 컴퓨터를 거쳐야만 자료를 요청할 수 있다.
이 방식으로 자료를 요청하면 잠시 페이지가 서버 스크립트 페이지로 갱신되어 화면이 깜빡거리고 그동안 사용자는 어떤 작업도 할 수 없게 된다.
Ajax 사용 후 방식
Ajax를 사용해 사용자가 서버에 자료를 요청할 경우 서버 스크립트 페이지를 거치지 않아도 자료를 받아올 수 있다. 즉 사용자는 서버에 자료를 요청하는 사이에도 다른 작업을 할 수 있다. 카페나 블로그 게시글에 댓글을 달 때 페이지 전환 없이 바로 할 수 있는 것도 Ajax를 사용했기 때문이다.
웹 서버 설치하기
웹 서버는 웹 서비스를 제공하는 컴퓨터를 말한다. 완성된 웹 문서를 컴퓨터에 저장만 해둔다면 외부에 있는 사용자는 완성된 웹 문서를 볼 수 없어 서비스를 받을 수 없다.
외부에 있는 사용자가 완성된 웹 문서를 볼 수 있도록 하려면 웹 서버를 구축하고 웹 서버에 완성된 HTML 문서를 저장해야 한다.
Ajax를 이용해 사용자가 폼에 입력 요소를 작성해서 데이터를 전송하고 응답을 요청하는 테스트를 수행하려면 웹 서버도 필요하지만 데이터를 전송하여 요청한 응답을 전송해 줄 액션 페이지도 필요하다. 일반적으로 이 액션 페이지는 서버 측 스크립트 페이지인 PHP, ASP, JSP 를 이용해 작성한다. 서버 측 스크립트 페이지는 전송된 데이터를 이용하여 정상적인 데이터인지 검사한 후 응답값을 되돌려 전송해 준다. 이 서버 측 스크립트 페이지는 서버 컴퓨터에 저장되어 있어야 정상적으로 작동한다.
서버를 구축하여 웹 서비스를 제공하는 방법에는 오토셋(Autoset)을 이용하여 서버를 직접 본인 컴퓨터에 설치하는 방법과 외부에 구축된 서버인 웹 호스팅을 임대하여 이용하는 방법이 있다.
오토셋 이용해 아파치 서버 설치하기
오토셋은 아파치 서버를 설치하여 PHP, MySQL 프로그램을 각각 설치할 필요 없이 내 컴퓨터를 한 번에 서버로 만들어 주는 프로그램이다. 설치 방법이 매우 간단하고 관리도 쉬워 초보 사용자가 서버를 구축할 때 많이 이용한다.
예제 코드는 C:\AutoSet9\public_html 경로에 올려야 실행이 된다.
그리고 주소에는 localhost\(html파일이름) 입력하면 잘 로드된다
웹 호스팅 등록하여 서버 이용하기
어렵고 안되길래 생략
난 오토셋 쓰는게 더 쉬운 것 같으..
Ajax 관련 메서드
load() 외부 콘텐츠를 가져올 때 사용
$.ajax() 데이터를 서버에 HTTP POST, GET 방식으로 전송할 수 있으며, HTML XML JSON 텍스트 유형에 데이터를 요청할 수 있는 통합적인 메서드. $post(), $get(), $getJSON() 메서드의 기능을 하나로 합쳐 놓은 것이라 보면 된다.
$.post() 데이터를 서버에 HTTP POST 방식으로 전송한 후 서버 측의 응답을 받을 때 사용
$.get() 데이터를 서버에 HTTP GET 방식으로 전송한 후 서버 측의 응답을 받을 때 사용
$.getJSON() 데이터를 서버에 HTTP GET 방식으로 전송한 후 서버 측의 응답을 JSON 형식으로 받을 때 사용
$.getScript() Ajax를 이용하여 외부 자바스크립트를 불러옴
.ajaxStop(funciton(){...}) 비동기 방식으로 서버에 응답 요청이 완료되었을 때 함수 실행
.ajaxSuccess(function(){...}) ajax 요청이 성공적으로 완료되면 함수 실행
.ajaxComplete(function(){...}) ajax 통신이 완료되면 함수 실행
load() 메서드
$(요소 선택).load(url, data, 콜백 함수)
url 주소에는 외부 콘텐츠를 요청할 외부 주소를,
data에는 전송할 데이터를,
그리고 전송이 완료되면 콜백 함수에 저장된 코드가 실행된다.
이때 전송할 데이터와 콜백 함수의 입력은 생략할 수 있다.
예제 :
결과 :
(오토셋 웹서버 파일에 코드 저장 후 localhost/jquery_ajax_1_test.html 들어간 결과)
$.ajax() 메서드
$.ajax() 메서드의 옵션 종류
async 통신을 동기 또는 비동기 방식으로 설정하는 방식. 기본값은 비동기 통신 방식인 true로 설정되어 있다. 만일 비동기 방식으로 설정되어 있다면 사용자 컴퓨터에서 서버로 데이터를 전송하고 요청하는 동안에도 다른 작업을 할 수 있다.
beforeSend 요청하기 전에 함수를 실행하는 이벤트 핸들러
cache 요청한 페이지를 인터넷에 캐시(저장)할 지의 여부를 설정 (기본값 true)
complete Ajax가 완료되었을 때 실행하는 함수
contentType 서버로 전송할 데이터의 content-type을 설정
data 서버로 전송할 데이터 지정
dataType 서버에서 받아올 데이터의 형식 지정
error 통신에 문제 있을 때 함수 실행
success Ajax로 통신이 정상적으로 이뤄지면 이벤트 핸들러 실행
timeout 통신 시간 제한 (단위 : 밀리초)
type 데이터를 전송할 방식을 설정
url 데이터를 전송할 페이지 설정
username HTTP 엑세스 할 때 인증이 필요한 경우 사용자 이름 지정
Ajax로 JSON 데이터 바인딩
비동기 통신 기술을 이용해 서버 데이터베이스에 데이터를 요청하고, 데이터베이스에 요청한 데이터를 받아와 HTML 문단 태그에 결합하는 것을 바인딩이라 부른다.
JSON이란?
자바스크립트의 객체 표기법을 JSON 이라고 부른다. JSON 은 데이터를 전달할 때 사용하는 표준 형식, 속성(Key)과 값(Value)이 하나의 쌍을 이룬다.
{"속성1":값1, "속성2":값2, "속성3":값3}
예제 :
<!DOCTYPE html>
<html lang="ko">
<head>
<meta charset="UTF-8">
<title> Ajax </title>
<script src="js/jquery.js"></script>
<script>
$(function() {
$.ajax({
url:"js/MOCK_DATA.json",
dataType:"json",
success:function(data){
if(data.length>0){
var tb=$("<table />");
for(var i in data){
var $id = data[i].id;
var $first_name = data[i].first_name;
var $last_name = data[i].last_name;
var $email = data[i].email;
var $gender = data[i].gender;
var row = $("<tr />").append(
$("<td/>").text($id),
$("<td />").text($first_name),
$("<td />").text($last_name),
$("<td />").text($email),
$("<td />").text($gender)
)
tb.append(row);
}
$(".wrap").append(tb);
}
}
})
});
</script>
</head>
<body>
<div class="wrap"></div>
</body>
</html>결과 :
Ajax로 XML 데이터 바인딩
XML 이란?
<?xml version="1.0 encoding="UTF-8"?>
<tag1>
<tag2>내용</tag2>
</tag1>
상단에 인코딩 방식 선언, 시작 태그와 종료 태그를 사용해 구조화된 데이터를 만든다.
예제 :
<!DOCTYPE html>
<html lang="ko">
<head>
<meta charset="UTF-8">
<title> Ajax </title>
<script src="js/jquery.js"></script>
<script>
$(function() {
$.ajax({
url:"js/dataset.xml",
dataType:"xml",
success:function(data){
var $data = $(data).find("record")
if($data.length>0){
var tb = $("<table/>");
$.each($data,function(i,o){
var $id = $(o).find("id").text();
var $first_name = $(o).find("first_name").text();
var $last_name = $(o).find("last_name").text();
var $email = $(o).find("email").text();
var $gender = $(o).find("gender").text();
var row = $("<tr/>").append(
$("<td/>").text($id),
$("<td/>").text($first_name),
$("<td/>").text($last_name),
$("<td/>").text($email),
$("<td/>").text($gender)
)
tb.append(row);
})
$(".wrap").append(tb)
}
}
})
});
</script>
</head>
<body>
<div class="wrap"></div>
</body>
</html>
</script>
</head>
<body>
<div class="wrap"></div>
</body>
</html>결과 :
자바스크립트의 보안 정책과 외부 데이터 바인딩하기
자바스크립트의 보안 정책은 자바스크립트로 A사이트의 데이터를 B사이트로 불러오는 것을 허용하지 않는다. 이 정책을 동일 출처 원칙이라 한다. 즉 ajax() 메서드로는 서로 다른 도메인의 데이터를 전송할 수 없을 뿐만 아니라 교차 도메인도 허용하지 않는다.
서로 다른 사이트에서 데이터를 서로 주고받으려면 서버 언어를 사용해 데이터를 가져오거나 JSONP를 사용하는 방법이 있다. 서버 언어를 사용하는 방법은 서로 다른 사이트에서 데이터를 요청하고 이를 ajax로 가공하면 된다. 이 방법은 주로 관리자가 직접 접근할 수 없는 외부 서버의 데이터를 가져올 때 사용한다. JSONP를 사용하는 방법은 '동일 출처 보안 정책'을 피해야 하고 관리자의 외부 서버 접근이 가능해야 한다는 전제 조건이 필요하다. 이 방법은 교차 도메인으로 데이터를 불러올 때 사용한다.
RSS 연동하기
RSS 란 '초간편 배포'라는 의미다. 즉 새로운 읽을거리가 자주 갱신되는 블로그나 뉴스에서 주로 사용하는 XML 기반의 콘텐츠 배급 포멧이다. RSS를 사용하면 뉴스나 블로그의 관심 있는 읽을거리만 모아서 볼 수 있다는 장점이 있다. 또한 사이트 연동이 가능하다.
조선닷컴 RSS를 방문하여 XML URL 경로를 복사한다.
예제 :
<!DOCTYPE html>
<html lang="ko">
<head>
<meta charset="UTF-8">
<title> Ajax </title>
<script src="js/jquery.js"></script>
<script>
$(function() {
$.ajax({
url:"http://myhome.chosun.com/rss/www_section_rss.xml",
dataType:"xml",
success:function(data){
console.log(data);
}
})
});
</script>
</head>
<body>
<div class="wrap"></div>
</body>
</html>결과 :
동일 출처 원칙에 따라 오류 발생
PHP로 교차 도메인 데이터(XML) 불러오기
PHP언어는 서버가 서로 통신할 수 있는 cURL 메서드를 지원한다. 이 메서드를 사용하면 교차 도메인 데이터(XML)를 불러올 수 있다.
PHP 선언문 / 변수 선언문
PHP 선언문
<?php
php 코드
?>
변수 선언문
<?
$변수 이름 = 값;
?>
cURL 메서드
curl_init() : cURL을 사용하기 위해 초기화하는 메서드, cURL 세션 생성
curl_setopt(세션,옵션,값) : 생성된 cURL 세션의 옵션 설정
옵션에 적용 가능한 값 :
CURLOPT_URL 접속할 url 주소 설정
CURLOPT_SSL_VERIFYPEER SSL 인증서 검사 여부 설정
CURLOPT_RETURNTRANSFER 결괏값을 받을 것인지 여부 설정
CURLOPT_HEADER 헤더 정보 출력 여부 설정
curl_exec() : cURL 세션을 실행
curl_close() : cURL 세션 종료
PHP 언어의 cURL 메서드를 사용해 XML 불러오는 예제 :
<?php
$ch = curl_init();
curl_setopt($ch,CURLOPT_SSL_VERIFYPEER, false);
curl_setopt($ch,CURLOPT_RETURNTRANSFER, true);
curl_setopt($ch,CURLOPT_HEADER, 0);
curl_setopt($ch,CURLOPT_URL,
"http://myhome.chosun.com/rss/www_section_rss.xml");
$url_source = curl_exec($ch);
curl_close($ch);
echo $url_source;
?>$.ajax()메서드를 사용해 HTML 문서로 불러온 다음 문단 태그에 결합하는 예제 :
<!DOCTYPE html>
<html lang="ko">
<head>
<meta charset="UTF-8">
<title> Ajax </title>
<script src="js/jquery.js"></script>
<script>
$(function() {
$.ajax({
url:"news.php",
dataType:"xml",
success: function(data){
var $items = $(data).find("item");
if($items.length>0){
$items=$items.slice(0,10);
var $ulTag =$("<ul/>");
$.each($items,function(i,o){
var $title = $(o).find("title").text();
var $link = $(o).find("link").text();
var $aTag = $("<a/>")
.attr({
"href":$link,
"target":"_blank"
})
.text($title);
var $liTag=$("<li/>")
.append($aTag);
$ulTag.append($liTag);
})
$(".wrap").append($ulTag);
}
}
})
});
</script>
</head>
<body>
<div class="wrap"></div>
</body>
</html>결과 :
JSONP로 교차 도메인 데이터(XML) 불러오기
JSONP로 교차 도메인 서버에서 데이터를 가져오는 방법
- 먼저 가상 회원 데이터를 만들어 서버에 업로드하고 다음과 같이 PHP를 작성한다.
여기서_GET["callback"]은 이후에 작성할 HTML 문서에서 get방식으로 전송된 데이터를 받을 매개변수이다.
<?php
$data = '[
{"id":"1","name":"Choldcroft","email":"dcroft0@hibu.com"},
{"id":"2","name":"Levi","email":"wlevi1@blogger.com"},
{"id":"3","name":"Axcell","email":"laxcellc@ebay.co.uk"}
]';
echo $_GET["callback"]."(".$data.")";
?>- 교차 도메인 환경에서 실행하기 위해 HTML 파일은 앞에서 작성한 PHP 파일과 다른 서버에 저장한다.
<!DOCTYPE html>
<html lang="ko">
<head>
<meta charset="UTF-8">
<title> Ajax </title>
<script src="js/jquery.js"></script>
<script>
$(function() {
var href = "http://localhost/member.php?callback=myFnc";
$.ajax({
url:href,
dataType:"jsonp"
}).done(function myFnc(data){
console.log(data);
})
});
</script>
</head>
<body>
<div class="wrap"></div>
</body>
</html>결과 :
- $.ajax() 메서드를 사용하여 JSONP 방식으로 불러온 데이터(json)를 HTML 문단 태그에 결합
<!DOCTYPE html>
<html lang="ko">
<head>
<meta charset="UTF-8">
<title> Ajax </title>
<script src="js/jquery.js"></script>
<script>
$(function() {
});
</script>
</head>
<body>
<div class="wrap"></div>
</body>
</html>결과 :
정리 실습 :
예제 :
member_login.html 코드 :
<!DOCTYPE html>
<html lang="ko">
<head>
<meta charset="UTF-8">
<title> Ajax </title>
<link rel="stylesheet" href="css/login.css" />
<script src="js/jquery.js"></script>
<script>
$(function(){
var $frm = $(".login_f");
$frm.on("submit",function(e){
e.preventDefault();
var myData = $frm.serialize();
$.ajax({
type: "POST",
url:$frm.attr("action"),
data: myData,
success:function(res){
if(res){
var jsonData = JSON.parse(res);
var message = jsonData.user_name + "(" + jsonData.user_id + ")" + "님 반갑습니다";
$(".login_wrap").html(message);
}
}
})
})
})
</script>
</head>
<body>
<div class="login_wrap">
<h1>로그인</h1>
<form class="login_f" method='post' action='member_login_ok.php'>
<p>
<label for="user_id">아이디</label>
<input type="text" name="user_id" id="user_id" value="korean" />
</p>
<p>
<label for="user_pw">비밀번호</label>
<input type="password" name="user_pw" id="user_pw" value="12345" />
</p>
<p><input type="submit" value="로그인" class="login_btn" /></p>
</form>
</div>
</body>
</html>
member_login_ok.php 코드 :
<?php
if(!isset($_POST['user_id']) || !isset($_POST['user_pw'])) exit;
$user_id = $_POST['user_id'];
$user_pw = $_POST['user_pw'];
$members = array(
'korean' => array('pw' => '12345',
'name' => '박부장'),
'seoul' => array('pw' => '56789',
'name' => '홍대리')
);
if(isset($members[$user_id]) && $members[$user_id]['pw'] == $user_pw) {
echo '{"user_id":"'.$user_id.'","user_name":"'.$members[$user_id]['name'].'"}';
}
?>
결과 :
