jQuery 비동기 방식 연동

컴퓨터에서 서버에 자료를 요청할 때 현재 보고 있는 페이지의 화면전환 없이 서버에 요청한 자료를 전송받을 수 있는 Ajax, Asynchronous Javascript and XML 메서드 사용법과 Ajax 메서드를 사용해 현재 페이지가 아닌 외부에서 제공하는 XML(eXtensible Markup Language)이나 JSON(Javascript Object Notation) 파일의 데이터를 불러오는 방법에 대해 알아보겠습니다.

 

 

 

 

Ajax

---

• 동기 방식 : 서버에 신호를 보냈을 때 응답이 돌아와야 다음 동작을 수행

• 비동기 : 신호를 보냈을 때 응답 상태와 상관없이 다음 동작을 수행

 

비동기 방식(Ajax)의 사용 이유?

화면 전환 없이 클라이언트(사용자 컴퓨터)와 서버(서비스를 제공하는 컴퓨터) 간에 XML, JSON, 텍스트, HTML 등의 정보를 교환하기 위해 사용합니다. 일반적으로 자료를 요청할 경우 시간이 소요되는 데 비해 Ajax를 사용하면 대기시간 없이 다른 작업을 바로 수행할 수도 있습니다.

 

 

 

 

Ajax를 사용하기 전에는 client (사용자)가 자료를 요청하면 반드시 Server (서버) 컴퓨터를 거쳐야만 자료를 요청할 수 있었습니다. 이 방식으로 자료를 요청하면 자료가 전송될 동안 잠시 페이지가 서버(Server Script) 페이지로 갱신되어 화면이 깜박거리고 그 동안 사용자는 작업을 하지 못한 채 대기해야 합니다.

Ajax 를 사용해 사용자가 Server 에 자료를 요청할 경우 Server Script 페이지를 거치지 않아도 자료를 받아올 수 있습니다. Client는 서버에 자료를 요청하는 사이에도 다른 작업을 할 수 있습니다. 예시로 카페나 블로그 게시글에 댓글을 달 때 페이지 전환 없이 다는 것, 페이스북의 댓글 기능, 구글의 지도 등에 사용되고 있습니다.

 

 

웹 서버 설치

실습으로 Ajax 테스트 하기 전에 Wev Server 가 필요하니 설치해 보겠습니다. 웹 서버는 웹 서비스를 제공하는 컴퓨터를 말합니다. 완성된 웹 문서를 컴퓨터에 갖고 있으면 외부 사용자는 웹 문서를 볼 수 없어 서비스를 받을 수 없습니다. 외부에 있는 사용자가 완성된 웹 문서를 보도록 하려면 웹 서버를 구축하고 웹 서버에 완성된 HTML 문서를 저장해야 합니다.

Ajax 를 이용해 사용자가 폼에 입력 요소를 작성해서 데이터를 전송하고 응답을 요청하는 테스트를 수행하려면 웹 서버 뿐만 아니라 요청한 응답을 전송해 줄 Action Page도 필요합니다.  이 때 액션 페이지는 서버 측 스크립트 페이지인 PHP, ASP, JSP를 이용해 작성합니다. 서버 측 스크립트 페이지는 전송된 데이터를 이용하여 정상적인 데이터인지 검사 후 응답값을 되돌려 전송해줍니다. 서버 측 스크립트 페이지는 서버 컴퓨터에 저장되어 있어야 정상 작동합니다.

 

서버 측 스크립트 언어란

프로그래밍 언어는 크게 Client Side / Server Side 언어로 나눠집니다. Client 측 언어는 자바스크립트로 방문자의 컴퓨터에서 수행되고, Server 측 언어는 PHP, ASP, JSP로 서버에서 수행됩니다. 사이트에서 동적 사용자 환경을 개발할 때에는 주로 클라이언트 측 언어를 사용하고, 서버측 데이터베이스에서 저장된 데이터를 불러오거나 사용자가 전송한 데이터를 저장할 때에는 주로 서버측 언어를 사용합니다. 예로 로그인 시 아이디를 입력할 때 올바른 아이디, 비번 형식을 체크하는 것은 자바스크립트, 서버 사이드 측 스크립트 페이지에 방문객이 입력한 아이디와 비밀벌호 데이터를 전송해 로그인 성공이나 아이디 없음 등의 값을 내보내는 것은 JSP 등이 될 것입니다.

서버를 구축하여 웹 서비스를 제공하는 방법으로 Autoset을 이용하여 서버를 직접 본인 컴퓨터에 설치하는 방법과 외부에 구축된 서버인 웹 호스팅을 이용하는 방법으로 주로 얼마씩 지불하고 임대해 사용합니다. 웹 서버와 웹 호스팅의 공통점은 보두 방문객인 Client에게 웹 서비스를 제공한다는 것입니다.

차이점은, 웹 서버는 사용자가 직접 컴퓨터에 서버를 구축해 웹 서비스를 제공하므로 웹 서버에 대한 전문지식과 전용회선이 필요하다는 것이고, 웹 호스팅의 경우는 이미 서버가 구축된 컴퓨터에 다수가 소량의 저장공간을 나눠 임대해 사용하는 것으로 서버에 대한 전문지식 없이 편리하게 사용할 수 있지만 저장공간의 용량제한이 있다는 것이 단점입니다.

 

 

 

Autoset을 이용해 PC를 Apache Server 컴퓨터로 세팅하기

 

• http://autoset.net/xe/download_autoset_9_0_0
• https://sourceforge.net/projects/project-autoset/files/AutoSet9/AutoSet910_x64.exe/download

 

참고중인 도서가 발행된 지 시간이 지나서 지금 유지보수는 작년부로 종료되었다고 하네요. 64비트라 AutoSet 910_x64.exe 를 내려받았습니다.

 

 

 

 

프로그램 설치 후 오토셋 9 매니저 창이 열리면 웹서버 시작, MySQL 시작을 차례로 눌러 웹서버를 실행한 뒤 브라우저 URL주소창에서 localhost를 입력해 AutoSet 사이트가 열리면 정상 설치 완료된 것입니다.

 

 

localhost

 

 

C:\AutoSet9\public_html 에 index.html 파일을 만들어 저장합니다. index.html 안에는 Hello APM 같은 내용을 넣어줍니다. 웹 문서가 제대로 나타나는 지 확인합니다. 브라우저 URL 주소 입력란에 localhost나 본인 컴퓨터의 IP 주소를 입력해줍니다. 내 컴퓨터의 IP 주소는 시작-> 실행을 누르거나 DOS 창에서 ipconfig를 입력한 뒤 확인하면 됩니다. http://ip주소나 localhost/index.html 로 아까와 같이 잘 실행되나 확인합니다.

 

 

localhost/index.html

index.html

0.00MB

 

 

웹 호스팅 테스트를 원하시면 닷홈 등 각종 무료 호스팅 서비스로 테스트하시면 됩니다. 원격 파일 업로드는 FileZilla 등의 프로그램을 사용하시면 됩니다.

 

 

 

Ajax 관련 메서드

---

종류	설명
load()	외부 콘텐츠를 가져올 때 사용
$.ajax()	데이터를 서버에 HTTP POST, GET 방식으로 전송할 수 있음 HTML, XML, JSON, 텍스트 유형에 데이터를 요청할 수 있는 통합메서드 $.post(), $.get(), $.getJSON() 메서드의 기능을 하나로 합친 것
$.post()	데이터를 서버에 HTTP POST 방식으로 전송 후 서버측의 응답을 받을 때 사용
$.get()	데이터를 서버에 HTTP GET 방식으로 전송 후 서버측의 응답을 받을 때 사용
$.getJSON()	데이터를 서버에 HTTP POST 방식으로 전송 후 서버측의 응답을 JSON 형식으로 받을 때 사용
$.getScript()	Ajax를 이용해 외부 자바스크립트를 불러옴 ex) $.getScript("demo_script.js");
.ajaxStop(function() { ... })	비동기 방식으로 서버에 응답 요청이 완료되었을 때 함수 실행
.ajaxSuccess(function() { ... })	Ajax 요청이 성공적으로 완료되면 함수 실행
.ajaxComplete(function() { ... })	Ajax 통신이 완료되면 함수 실행

 

 

load() 메서드는 사용자가 지정한 URL 주소에 데이터를 전송하고 외부 콘텐츠를 요청하여 가져올 때 사용합니다. 요청한 콘텐츠를 이용해 선택한 요소의 내용을 바꿀 수 있습니다. URL 주소에는 외부 콘텐츠를 요청할 외부 주소를 입력하고, data에는 전송할 데이터를 입력합니다. 전송이 완료되면 콜백 함수에 저장된 코드가 실행되는데 콜백 함수는 생략 가능합니다. load()로 불러오면서 외부 파일의 일부 요소만 불러올 수도 있습니다.

 

$(요소 선택).load(url, data, 콜백함수)

// example (같은 폴더 내)
$("#newsWrap").load("jquery_ajax_news.html #news_1")

 

 

$.ajax() 메서드는 사용자가 지정한 URL 경로에 파일의 데이터를 전송하고 입력한 URL 경로 파일로부터 요청한 데이터를 불러옵니다. 이 때 불러올 수 있는 외부데이터는 텍스트, HTML, XML, JSON 등이며 선택한 요소에 Ajax를 이용해 요청한 외부 데이터를 불러옵니다. 다양한 옵션들이 있으며 옵션은 속성과 값으로 이루어집니다.

 

$.ajax({
	url: "전송 페이지"(action url),
	type: "전송 방식"(get, post 방식),
	data: "전송할 데이터",
	dataType: "요청한 데이터 형식"("html", "xml", "json", "text", "jsonp"),
	success: function(result){
		전송에 성공하면 실행될 코드
	},
	error: function(){
		전송에 실패하면 실행될 코드
	}
});

 

 

데이터 전송과 요청이 정상적으로 이뤄지면 success 함수가 실행되며 success의 result 매개변수에는 요청한 데이터가 저장됩니다. 아래는 $.ajax() 메서드의 옵션 종류입니다.

 

종류	설명
async	통신을 동기 또는 비동기 방식으로 설정하는 옵션. 기본값 : 비동기 (true)
beforeSend	요청 전에 함수를 실행하는 이벤트 핸들러
cache	요청한 페이지를 인터넷에 캐시(저장)할 지의 여부 설정. 기본값 : true
complete	Ajax가 완료되었을 때 함수를 실행하는 이벤트 핸들러
contentType	서버로 전송할 데이터의 content-type 설정. 기본값 application/x-www-form-urlencoded
data	서버로 전송할 데이터 지정
dataType	서버에서 받아올 데이터의 형식 지정 (생략하면 자동 형식 설정)
error	통신에 문제가 발생했을 때 함수 실행
success	Ajax로 통신이 정상적으로 이뤄지면 이벤트 핸들러 실행
timeout	통신 시간 제한. 시간 단위는 밀리초
type	데이터를 전송할 방식(get/post)
url	데이터를 전송할 페이지 설정. 기본값 : 현재 페이지
username	HTTP 액세스를 할 때 인증이 필요한 경우 사용자 이름 지정

 

 

비동기 통신 방식으로 데이터를 전송하거나 요청하려면 데이터를 가공해야 합니다. 다음은 비동기 통신 방식으로 데이터를 전송, 요청할 때 사용하는 Ajax 전송 데이터 가공 메서드입니다. JSON.parse() 메서드는 입력하는 자료형이 객체형태일 뿐 문자열의 데이터를 입력하여 객체를 반환합니다. 아래 표에서 등장하는 Query String이란 사용자가 웹에서 입력 데이터를 전달하는 단순하고 널리 사용되는 방법으로 URL 주소 뒤에 입력 데이터를 함께 제공하는 방법으로 url과 쿼리스트링은 물음표(?)로 구분되며 변수와 값의 쌍(변수=값)으로 구분됩니다. 여러 쌍일 경우 각각을 &로 구분합니다.

 

종류	사용법	설명
serialize()	$("form").serialize();	사용자가 입력 요소에 값을 입력한 데이터의 전송 방식을 쿼리스트링 형식의 데이터로 변환하여 반환 'name1=value1&name2=value2 ...'
serializeArray()	$("form").serializeArray();	사용자가 입력 요소에 값을 입력한 데이터의 전송 방식을 배열 객체로 변환하여 반환 [{name1: value}, {name2: value2}]
$.param()	$.param(Object);	{name1: value}, {name2: value2}와 같이 작성된 객체를 가공해 'name1=value1&name2=value2 ...' 과 같은 쿼리스트링 형식의 데이터로 변환하여 반환
JSON.parse()	JSON.parse("{"name":"value"}")	객체 형태로 작성된 문자열 데이터를 객체로 가공하여 반환
JSON.stringify()	JSON.stringify({"name1":"value1", "name2":"value2"})	객체를 문자열 데이터로 가공하여 반환

 

 

 

 

Ajax로 JSON 데이터 바인딩 방법

비동기 통신 기술을 이용하여 서버 데이터베이스에 데이터를 요청하고, 데이터베이스에 요청한 데이터를 받아와 HTML 문단 태그에 결합하는 것을 binding(묶기)이라고 부릅니다. 

 

데이터가 바인딩되는 과정

 

 

실습을 위해 가상 회원 정보 데이터를 제공받아 진행해보겠습니다. mockaroo를 이용하면 데이터베이스에 데이터를 요청해 받은 것처럼 회원정보 데이터 파일(JSON)을 얻을 수 있습니다. 

 

 

mockaroo.com

 

 

 

여기서 id, first_name, last_name, email 필드만 남기고 나머지는 제거한 뒤 데이터 파일 저장 형식 (Format)을 JSON 형식으로 지정한 뒤 Download Data를 클릭합니다. 1천명의 임의의 데이터 JSON 파일을 받을 수 있습니다. 받기 전 미리보기도 가능합니다.

 

샘플 데이터베이스 생성하기

 

 

자바스크립트의 객체 표기법을 JSON이라고 부릅니다. 데이터를 전달할 때 사용하는 표준형식인 JSON의 기본형은 다음과 같습니다. 속성(Key)과 값(Value)가 한 쌍입니다. 

 

{"속성1" : 값1, "속성2" : 값2, ... }

 

 

HTML에 가상 회원 데이터(JSON)을 불러와 바인딩해봅시다. HTML에서 $.ajax()메서드로 가상회원데이터(MOCK_DATA.json)을 불러온 후 Table로 가공하여 class 값이 "wrap"인 문단 태그에 결합하여 출력해 보겠습니다.

 

 

(좌) 파일 위치   (우) 실행 후 : http://localhost/jquery_ajax_2_test.html

 

MOCK_DATA.json

0.08MB

jquery_ajax_2_test.html

0.00MB

 

 

 

 

Ajax로 XML 데이터 바인딩 방법

이번에는 $.ajax() 메서드를 사용하여 비동기 통신 방식으로 요청한 XML 데이터를 바인딩해보겠습니다. XML은 확장성 마크업 언어이며 태그명을 사용자가 임의로 작성할 수 있습니다. XML은 주로 데이터를 배포할 목적으로 쓰이며 기본형은 다음과 같습니다. 상단에는 버전과 인코딩 방식을 선언하고 사용자 임의로 시작, 종료 태그를 사용해 구조화된 데이터를 만듭니다.

 

<?xml version = "1.0" encoding="UTF-8"?>
<tag1>
<tag2>bulabula..</tag2>
</tag1>

 

 

테스트를 위해 mocakroo에서 아까와 같은 방식으로 가상 회원 데이터베이스를 생성하되 XML로 생성합니다. 살펴보면<record>라는 태그에 한명씩 가상 회원 데이터가 각각 저장되어 있습니다. ajax로 바인딩하는 것은 url로 다른 데이터 파일을 연결하고 dataType을 xml로만 바꾸면 되는 것이라 생략하겠습니다.

 

 

 

 

자바스크립트의 보안 정책과 외부 데이터 바인딩하기

JS의 보안 정책은 JS로 A 사이트의 데이터를 B 사이트로 불러오는 것을 허용하지 않습니다. 이것을 동일 출처 원칙(Same-origin policy)라고 합니다. ajax() 메서드로도 서로 다른 도메인의 데이터를 전송할 수 없고, 교차 도메인(Cross-Domain)도 허용하지 않습니다.

 

서로 다른 사이트에서 데이터를 서로 주고받으려면...

서버 언어를 사용해 데이터를 가져오거나 JSONP를 사용하는 방법이 있습니다.

관리자가 직접 접근할 수 없는 외부 서버의 데이터를 가져올 때는 주로 서로 다른 사이트에서 데이터를 요청하고 이를 ajax로 가공합니다. JSONP를 사용할 때에는 주로 교차 도메인으로 데이터를 불러올 때이며 역시 동일출처보안정책을 피하고 관리자의 외부 서버 접근도 가능해야 합니다. 

 

 

 

RSS(신문사 새 소식) 연동하기

RSS, Really Simple Syndication. '초간편 배포'라는 의미로 새로운 읽을거리가 자주 갱신되는 블로그나 뉴스에서 주로 사용하는 XML 기반의 콘텐츠 배급 포맷입니다. RSS로 뉴스나 블로그의 관심있는 읽을거리만 모아 볼 수 있고, 사이트 연동이 가능해서 운영하는 사이트의 내용이 풍부해지게 활용할 수도 있습니다. 

동일 출처원칙에 따라 RSS를 불러오지 못하기에 PHP는 서버가 서로 통신할 수 있는 cURL(Client URL Library Functions) 메서드를 지원하기 때문에 서버언어 중 PHP를 사용해서 교차 도메인 데이터 XML를 불러오겠습니다. PHP 선언문과 변수 선언문은 아래와 같이 선언합니다.

 

<?php ... php code ... ?>
<? $변수이름 = 값; ?>

 

 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 세션 종료

 

 

이제 cURL 메서드를 사용해 교차 도메인 데이터를 불러오겠습니다. RSS는 허핑턴포스트의 메인 부분을 불러오는 rss를 사용했습니다. RSS는 허핑턴포스트 홈페이지의 제일 하단에 RSS 메뉴를 누르시면 주소를 가져올 수 있습니다. 

 

<?php
	$ch = curl_init(); //cURL 세션 생성 및 초기화
	curl_setopt($ch, CURLOPT_SSL_VERIFYPEER, false); // SSL 인증서 검사 여부
	curl_setopt($ch, CURLOPT_RETURNTRANSFER, true); // 결과값을 받을 것인지의 여부
	curl_setopt($ch, CURLOPT_HEADER, 0); //헤더정보 출력여부 (가져오는 등)
	curl_setopt($ch, CURLOPT_URL, "https://www.huffingtonpost.kr/feeds/index.xml");
	// 접속할 URL 주소
	
	$url_source = curl_exec($ch); // cURL 세션 실행
	curl_close($ch); //cURL 세션 종료

	echo $url_source; //html 출력. 리턴값 없음
?>

<html>
<head>
<script  src="http://code.jquery.com/jquery-latest.min.js"></script>
<script>
$(function() {
  $.ajax({
    url: "news_test.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);
		}
	}, 
	error: function(e, e1, e2){
		console.log(e2);
	}
    });
});		
</script>
</head>

<body>
	<div class="wrap"></div>
</body>
</html>

 

 

가져온 XML 데이터를 $.ajax() 메서드를 사용해서 HTML문서로 불러온 후 문단 태그에 결합하면 아래와 같이 주요 뉴스 데이터가 출력됩니다. 10개만 불러오도록 하였기에 목록 10개만 출력됩니다. 지금 나오는 예제들은 아까 설명한 autoset으로 서버를 켜놔야 실행됩니다. 아까 실행 이후로 건든 적 없으시다면 상관없습니다. 확인은 브라우저 URL 창에다가localhost/jquery_ajax_5_test.html 을 입력하면 아래와 같이 보실 수 있습니다.

 

 

가져온 화면

 

jquery_ajax_5_test.html

0.00MB

news_test.php

0.00MB

 

 

 

 

 

JSONP로 교차 도메인 데이터(XML) 불러오기

이번에는 JSONP로 교차 도메인 (Cross-Domain) 서버에서 json데이터를 가져와보겠습니다. json파일 형식의 데이터와 함께 PHP코드를 작성하여 서버(오토셋)에 업로드합니다. $_GET["callback"] 은 이후에 작성할 HTML문서에서 get 방식으로 전송할 데이터를 받을 매개변수입니다. php에서 .연산자는 문자열결합 연산자입니다.

 

//member_test.php
<?php
	$data = '[
	{"id":1,"first_name":"Debor","last_name":"Durnall","email":"ddurnall0@wired.com"},
	{"id":2,"first_name":"Nefen","last_name":"Cosgreave","email":"ncosgreave1@nih.gov"},
	{"id":3,"first_name":"Pierson","last_name":"Hildrew","email":"phildrew2@phpbb.com"}
    ]';
	echo $_GET["callback"]."(".$data.")"; 
?>

<html>
<head>
<script  src="http://code.jquery.com/jquery-latest.min.js"></script>
<script>
$(function(){
	var href = "http://localhost/member_test.php?callback=myFnc";
	$.ajax({
		url:href,
		dataType:"jsonp"
	}).done(function myFnc(data){
		console.log(data);
	});
});

</script>
</head>
<body>
</body>
</html>

 

member_test.php

0.00MB

jquery_ajax_6_test.html

0.00MB

 

 

교차도메인 환경에서 실행하기 위해 HTML(jquery_ajax_6_test.html) 파일은 앞서 작성한 member_test.php와 서로 다른 서버에 저장합니다. 파일을 실행하면 교차 도메인 서버간 요청한 데이터를 잘 불러옵니다. 먼저 데이터를 요청한 교차도메인 서버(member_test.php)에서 함수(myFunc())를 실행합니다. 그 후 객체가 담긴 배열 (json)을 인자값으로 전달합니다. 마지막으로 done에 작성한 함수를 호출하고 매개변수(data)에 인자값(json)을 할당합니다.

 

jquery_ajax_6_test.html

 

 

이제 $.ajax() 메서드를 사용하여 JSONP 방식으로 불러온 json 데이터를 HTML 문단 태그에 결합합니다.

 

<html>
<head>
<script  src="http://code.jquery.com/jquery-latest.min.js"></script>
<script>
$(function(){
	var href = "http://localhost/member_test.php?callback=myFnc";
	$.ajax({
		url:href,
		dataType:"jsonp"
	}).done(function myFnc(data){
		if(data.length>0) {
			var $table = $("<table/>");
			data.forEach(function(o){
				$id = o.id;
				$name = o.name;
				$email = o.email;

			var trTag = $("<tr/>");
			trTag.append(
				$("<td/>").text($id),
				$("<td/>").text($name),
				$("<td/>").text($email)
			);
			$table.append(trTag);
			});
			$(".wrap").append($table);
		}
	});
});

</script>
</head>

<body>
	<div class="wrap">
	</div>
</body>
</html>

 

jquery_ajax_7_test.html

0.00MB

 

jquery_ajax_7_test.html 의 결과화면

 

 

 

 

Ajax로 로그인 프로그램 만들기 예제

이제 Ajax를 사용해서 로그인 프로그램을 만들어보겠습니다. 아이디와 비번을 입력하고 로그인 버튼을 누르면 비동기 통신방식으로 서버에 아이디, 비번이 전송됩니다. 로그인 성공하면 문단 태그에 환영 메시지를 찍을 것입니다. 먼저 html (member_login_test.html)로 로그인 폼을 만들고 제이쿼리의 $.ajax() 메서드를 사용해서 입력한 아이디, 비번값을 서버에 전송해 일치 여부를 응답받아 보겠습니다.

 

 

<!DOCTYPE html> 
<head>
<meta charset="UTF-8">
<script  src="http://code.jquery.com/jquery-latest.min.js"></script>
<script>
$(function(){

	var $frm= $(".login_f");
	$frm.on("submit", function(e){
		e.preventDefault(); // submit 버튼을 눌러도 action 페이지로 이동하지 않음
		var myData = $frm.serialize(); // 사용자가 폼 입력요소에 작성한 값을 쿼리스트링 형식의 데이터로 변환하여 myData에 대입

	     $.ajax({
		type: "POST",
		url: $frm.attr("action"),
		data: myData,
		success: function(res){
			if(res){
				var jsonData = JSON.parse(res);	// res에 요청한 데이터를 받아온 후 res를 json 형식으로 변형해 jsonData에 대입
				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_test.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_test.html

0.00MB

 

 

 

사용자가 입력한 아이디, 비번이 일치하는지 검사하는 PHP 페이지입니다. 사용자가 전송한 아이디, 비번이 일치하면 JSON 데이터를 반환합니다. 그러면 잘 나와야되는데 도서 그대로 따라하니 json 형식 오류가 떠서 확인 후 되는 코드로 수정하겠습니다. (현재는 안됩니다..그냥 흐름만 참고 부탁드립니다.)

 

 

<?php
// member_login_ok_test.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'].'"	}';
	}
?>

member_login_ok_test.php

0.00MB

 

 

 

 

 

---

 

DO IT! 시리즈의 자바스크립트 + 제이쿼리 입문을 보고 공부하며 작성한 포스팅입니다.
자바스크립트를 처음 배울 때 가볍게 보기 좋은 책인 것 같습니다. 입문 추천도서로도 자주 등장하는 책입니다.