JQuery(비동기방식연동 Ajax)
Ajax란?
비동기방식의 Javascript와 XML을 가리킨다.
동기방식은 서버에 신호를 보냈을 때 응답이 돌아와야 다음 동작을 수행할 수 있고 비동기 방식은 그와 반대로
신호를 보냈을때 응답 상태와 상관없이 다음 동작을 수행할 수 있다는 점이 다르다.
Ajax를 이용하는 이유는 화면 전환 없이 클라이언트와 서버간에XML, JSON(JavaScript Object Notation), 텍스트,
HTML등의 정보를 교환하기 위해서이다.
다시말해, Ajax를 이용하면 사용자가 서버에 자료를 요청할 때 화면전환없이 요청한 자료를 전송받을 수 있다.
또한 자료를 요청할 경우 어느정도 시간이 소요되는데 반해 Ajax를 이용하면 사용자가 기다릴 필요 없이
다른 작업을 바로 수행할 수 있다.
Ajax 관련 메소드
| 종류 | 설명 |
| load() | 외부 컨텐츠를 가져올 때 사용한다. |
| $.ajax() | 데이터를 서버에 HTTP POST, GET 방식으로 전송할 수 있으며, HTML, XML, JSON, 텍스트 유형에 데이터를 요청할 수 있는 통합적인 메소드이다. 이 표에 있는 $.post(), $.get(), $.getJSON() 메소드의 기능을 하나로 합쳐 놓은것이라고 보면 된다. |
| $.post() | 데이터를 서버에 HTTP POST 방식으로 전송한 후 서버측의 응답을 받을 때 사용한다. |
| $.get() | 데이터를 서버에 HTTP GET 방식으로 전송한 후 서버 측의 응답을 받을 때 사용한다. |
| $.getJSON() | 데이터를 서버에 HTTP GET 방식으로 전송한 후 서버측의 응답을 JSON형식으로 받을 때 사용한다. |
| $.getScript() | Ajax를 이용하여 외부 자바스크립트를 불러온다. 예) $(“button”).click(function(){ $.getScript(“demo_ajax_script.js”); }); |
| .ajaxStop(function(){…}) | 비동기 방식으로 서버에 응답 요청이 완료되었을 때 함수가 실행된다. |
| .ajaxSuccess(function(){…}) | ajax 요청이 성공적으로 완료되면 함수가 실행된다. |
| .ajaxComplete(function(){…}) | ajax 통신이 완료되면 함수가 실행된다. |
load() 메소드
사용자가 지정한 URL주소에 데이터를 전송하고 외부 컨텐츠를 요청하여 가져올 때 사용한다.
요청한 컨텐츠를 이용해 선택한 요소의 내용을 바꿀 수 있다.
기본형은 다음과 같다.
$(요소 선택).load(url, data, 콜백 함수)다음 URL주소에는 외부 컨텐츠를 요청할 외부 주소를 입력하고, data에는 전송할 데이터를 입력한다.
그리고 전송이 완료되면 콜백함수에 저장된 코드가 실행된다. 이때 전송할 데이터와 콜백함수의 입력은 생략할 수
있다.
다음은 load() 함수를 사용하여 외부파일(jquery_ajax_news.html)의 일부요소를 불러오는 예제이다.
jquery_ajax_news.html
<body>
<p id="news_1">Contrary to popular belief, Lorem Ipsum is not simply random text.
It has roots in a piece of classical Latin literature from 45 BC, making it over 2000 years old.</p>
<p id="news_2">The standard chunk of Lorem Ipsum used since the 1500s is reproduced below for those interested.</p>
</body><script>
$(function(){
$("#newsWrap_1")
.load("jqeury_ajax_news.html #news_1");
$("#newsWrap_2")
.load("jquery_ajax_news.html #news_2");
});
</script>
</head>
<body>
<h1>LOAD 1</h1>
<div id="newsWrap_1"></div>
<h1>LOAD 2</h1>
<div id="newsWrap_2"></div>
</body>
$.ajax() 메소드
사용자가 지정한 URL 경로에 파일의 데이터를 전송하고 입력한 URL 경로 파일로부터 요청한 데이터를 불러온다.
이때 불러올 수 있는 외부 데이터로는 텍스트, HTML, XML, JSON 형식 등이 있으며, 선택한 요소에 Ajax를 이용해
요청한 외부 데이터를 불러온다.
다음은 $.ajax() 메소드의 기본형이다.
중괄호 내에 다양한 옵션을 입력할 수 있다. 옵션은 속성과 값으로 이루어진다.
$.ajax({
1. url:"전송 페이지"(action url),
2. type:"전송 방식"(get, post 방식),
3. data:"전송할 데이터",
4. data Type:"요청한 데이터 형식"("html", "xml", "json", "text", "jsonp"),
5. success:function(data){
전송에 성공하면 실행할 코드;
},
error:function(){
전송에 실패하면 실행할 코드;
}
});1의 url에는 데이터 전송 및 요청할 외부 주소를 입력한다.
2의 type에는 전송방식을 입력한다.
3의 data에는 전송할 데이터를 입력한다.
4의 dataType은 서버로부터 받아올 데이터 형식을 지정한다. 데이터가 HTML일 경우에는 "html", XML일 경우에는
"xml", JSON일 경우에는 "json"이라고 입력한다.
5는 데이터 전송 및 요청이 정상적으로 이루어지면 함수가 실행된다. 이때 매개변수(result)에는 요청한 데이터가 저장
된다.
다음은 $.ajax()메소드의 옵션 종류이다.
| 종류 | 설명 |
| async | 통신을 동기 또는 비동기 방식으로 설정하는 옵션이다. 기본값은 비동기 통신 방식은 true로 설정되어 있다. 만일 비동기 방식으로 설저오디어 있다면 사용자 컴퓨터에서 서버로 데이터를 전송하고 요청하는 동안에도 다른 작업을 할 수 있다. |
| beforeSend | 요청하기 전에 함수를 실행하는 이벤트 핸들러이다. |
| cache | 요청한 페이지를 인터넷에 캐시(저장)할지의 여부를 설정한다. 기본값은 true이다. |
| complete | Ajax가 완료되었을 때 실행하는 이벤트 핸들러이다. |
| contentType | 서버로 전송할 데이터의 content-type을 설정한다. 기본값은 application/x-www-form-ur-lencoded이다. |
| data | 서버로 전송할 데이터를 지정한다 |
| dataType | 서버에서 받아올 데이터의 형식을 지정한다. 생략하면 요청한 자료에 맞게 자동으로 형식이 설정된다. |
| error | 통신에 문제가 발생했을 때 함수를 실행한다. |
| success | Ajax로 통신이 정상적으로 이뤄지면 이벤트 핸들러를 실행한다. |
| timeout | 통신 시간을 제한한다. 시간 단위는 밀리초이다. |
| type | 데이터를 전송할 방식(get/post)을 설정한다. |
| url | 데이터를 전송할 페이지를 설정한다. 기본값은 현재페이지이다. |
| username | HTTP 액세스를 할 때 인증이 필요할 경우 사용자 이름을 지정한다. |
또한 비동기 통신 방식으로 데이터를 전송하거나 요청하려면 데이터를 가공해야 한다.
다음은 비동기 통신 방식으로 데이터를 전송하거나 요청할 때 사용하는 Ajax 전송 데이터 가공 메소드이다.
| 종류 | 사용법 | 설명 |
| serialize() | $(“form”).serialize(); | 사용자가 입력 요소에 값을 입력한 데이터의 전송방식을 ‘name1=value1 & name2=value2,…’와 같은 쿼리 스트링 형식의 데이터로 변환해 반환한다. |
| serializeArray() | $(“form”).serializeArray() | 사용자가 입력 요소에 값을 입력한 데이터의 전송 방식을[{name1:value1},{name2:value2}]와 같은 배열 객체로 변환해 반환한다. |
| $.param() | $.param(Object); | {name1:value1, name2:value2}와 같이 작성된 객체를 가공해 ‘name1=value1 & name2=value2, …’와 같은 쿼리 스트링 형식의 데이터로 변환해 반환한다. |
| JSON.parse() | JSON.parse(‘{“name”:”value”}’); | 객체 형태로 작성한 문자열 데이터를 객체로 가공하여 반환한다. |
| JSON.stringify() | JSON.stringify({“name1”:”value1”, “name2”:”value2”}) | 객체를 문자열 데이터로 가공하여 반환한다. |
JSON.parse() 메소드는 입력하는 자료형이 '객체형태'일 뿐 '문자열'의 데이터를 입력하여 객체를 반환한다.
Ajax로 JSON 데이터 바인딩하기
바인딩(binding)은 '묶다'라는 의미이다. 비동기 통신 기술을 이용하여 서버 데이터베이스(DB)에 데이터를 요청하고,
데이터베이스에 요청한 데이터를 받아와 HTML 문단태그에 결합하는 것을 바인딩이라고 한다.
HTML에서 $.ajax() 메소드로 가상회원 데이터(JSON)를 불러온다.
그런 다음 가상 회원 데이터를 표(Table)로 가공하여 class값이 "wrap"인 문단 태그에 결합하여 출력한다.
<script>
$(function(){
$.ajax({
url:"js/MOCK_DATA.json",
dataType:"json",
success:function(data){ //data는 MOCK_DATA.json이 참조된다.
if(data.lenth > 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>각각의 배열 객체(JSON)의 데이터가 테이블(<tr>...</tr>)에 한 행씩 출력된다.
Ajax로 XML 데이터 바인딩하기
xml(eXtensible Markup Language, 확장성 마크업 언어)란?
XML은 확장 가능한 언어이므로 태그명을 사용자가 임의로 작성할 수 있다.
이렇게 사용자가 임의의 태그명을 만들어 사용할 수 있기 때문에 많은 지식이 없어도 된다. 즉, 서버의 데이터를
XML데이터로 가공하는것은 어렵지 않다. 그래서 XML은 주로 데이터를 배포할 목적으로 사용한다.
XML의 기본형은 다음과 같다. 상단에는 버전과 인코딩 방식을 선언하고 사용자가 임의로 시작 태그와 종료 태그를
사용하여 구조화된 데이터를 만든다.
<?xml version="1.0" encoding="UTF-8"?>
<tag1>
<tag2>내용</tag2>
</tag1>
HTML에서 $.ajax()메소드를 사용하여 외부데이터(XML)를 불러온다. 그런다음 불러온 가상회원 데이터를 표(Table)로
가공하여 class 값이 "wrap"인 문단 태그에 결합시켜 출력한다.
<script>
$(function(){
$.ajax({
url:"js/dataset.xml",
dataType="xml",
success:function(data){
var $data = $(data).find("record");//dataset.xml에서 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>각각의 <record>...</record>의 개수만큼 테이블(<tr>..</tr>)에 한 행씩 출력된다.
자바스크립트의 보안정책과 외부 데이터 바인딩하기
자바스크립트의 보안정책은 자바스크립트로 A 사이트의 데이터를 B사이트로 불러오는것을 허용하지 않는다.
이 정책을 동일 출처 원칙(Same-origin policy)이라 한다. 즉, ajax()메소드로는 서로 다른 도메인의 데이터를 전송할 수
없을 뿐만 아니라 교차 도메인(Cross-Domain)도 허용하지 않는다.
서로 다른 사이트에서 데이터를 서로 주고 받으려면 서버 언어를 사용해 데이터를 가져오거나 JSONP를 사용하는
방법이 있다.
서버 언어를 사용하는 방법은 서로 다른 사이트에서 데이터를 요청하고 이를 ajax로 가공하면 된다.
이 방법은 주로 관리자가 직접 접근할 수 없는 외부 서버의 데이터를 가져올 때 사용한다.
JSONP를 사용하는 방법은 '동일 출처 보안 정책'을 피해야 하고 관리자의 외부 서버 접근이 가능해야 한다는
전제조건이 필요하다. 이 방법은 교차 도메인으로 데이털르 불러올 때 사용한다.
아예 다른 서버로는 관리자가 직접 접근할 수 없기 때문에 서버 언어를 사용해서 데이터를 가져오는 방법은
사용할 수 없다.
하지만 관리하는 사이트가 2개이면 관리자가 서버에 접근할 수 있기 때문에 JSONP를 사용하면 된다.
RSS(신문사 새 소식)연동하기
신문사 사이트에 접속하여 RSS(Really Simple Syndication)를 불러오는 방법을 알아볼것이다.
자바스크립트는 동일 출처 원칙에 따라 도메인이 다른 사이트느 서로 데이터를 요청할 수 없다.
RSS란 '초 간편 배포'라는 의미앋. 즉, 새로운 읽을거리가 자주 갱신되는 블로그나 뉴스에서 주로 사용하는 XML
기반의 컨텐츠 배급 포맷이다. RSS를 사용하면 뉴스나 블로그의 관심있는 읽을거리만 모아서 볼 수 있다는 장점이
있다. 또한 사이트 연동이 가능하다. 사이트에 RSS를 연동하면 자신이 운영하는 사이트의 내용이 풍부해져
설치하기 전보다 방문자가 늘어나는 효과를 얻을 수 있다.
신문사 RSS(오늘의 주요뉴스) XML URL 경로 복사하기
신문사를 방문하여 '오늘의 주요 뉴스'RSS를 클릭한 다음 XML URL경로를 복사한다.
그런 다음 $.ajax() 메소드를 사용해 신문사 RSS를 사져온다. 하지만 동일 출처 원칙에 따라 RSS를 불러오지 못하고
오류가 발생할 것이다.
<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>
서버언어(PHP)로 교차 도메인 데이터(XML)불러오기
PHP언어는 서버가 서로 통신할 수 있는 cURL(Client URL Library Functions)메소드를 지원한다.
이 메소드를 사용하면 교차 도메인 데이터(XML)를 불러올 수 있다. PHP 언어를 사용하기 위해 먼저 PHP 선언문을
작성하는 방법과 변수를 정의하는 방법을 알아보자.
다음은 PHP 선언문과 변수 선언문의 기본형이다.
1. PHP 선언문
<?php
php코드
?>
2. 변수 선언문
<?
$변수 이름=값;
?>PHP선언문을 작성했으니 cURL 메소드를 사용해 교차 도메인 데이터를 불러와야 한다.
다음은 cURL메소드의 기본형이다.
1. curl_init() : cURL을 사용하기 위해 초기화 하는 메소드로, cURL 세션을 생성한다.
2. curl_setopt(세션, 옵션, 값) : 생성된 cURL 세션의 옵션을 설정한다.
옵션에 적용 가능한 값
CURLOPT_URL:접속할 url 주소 설정
CURLOPT_SSL_SERIFYPEER:SSL인증서 검사 여부 결정
CURLOPT_RETURNTRANSFER:결과값을 받을 것인지의 여부 설정
CURLOPT_HEADER:헤더 정보 출력 여부 설정
3. curl_exec():cURL 세션을 실행한다.
4. 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;
?>다음은 위의 예제에서 가져온 데이터(XML)를 $.ajax()메소드를 사용하여 HTML 문서로 불러오는 예제이다.
<script>
$(function(){
$.ajax({
url:"news.php",
dataType:"xml",
success:function(data){
var $items = $(data).find("item");
if($items.length > 0){//<item>요소가 1개 이상인 경우 실행한다.
$items = $items.slice(0, 10);//$items 배열에 <item> 요소를 10개 가져온다.
var $ulTag = $("<ul/>");
$.each($items, fuction(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>위 예제를 실행하면 10개의 오늘의 주요 뉴스 데이터가 출력된다. 기사 제목을 클릭하면 기사의 상세 페이지로
이동한다.
JSONP로 교차 도메인 데이터(XML)불러오기
1. 가상회원데이터(json)을 만들어 서버에 업로드하고 다음과 같이 PHP코드를 작성한다.
여기서 $_GET["callback"]은 이후에 작성할 HTML문서에서 get 방식으로 전송한 데이터를 받을 매개변수이다.
<?php
$data='[
{"id","1","name":"Choldcroft","email":"dcroft@hibu.com"},
{"id","2","name":"Levi","email":"wlev1@blogger.com"},
{"id","3","name":"Axcell","email":"laxcellc@ebay.co.uk"}
]';
echo $_GET["callback']."(".$data.")";
?>php에서 . 연산자는 문자열 결합 연산자이다.
2. 교차 도메인 환경에서 실행하기 위해 HTML파일은 PHP파일과 서로 다른 서버에 저장한다.
<script>
$(function(){
var href="http://localhost/9장/member_2.php?callback=myFnc";
$.ajax({
url:href,
dataType:"jsonp"
}).done(function myFnc(data){
console.log(data)
});
});
</script>파일을 실행하면 교차 도메인 서버 간 요청한 데이터를 정상적으로 불러올 수 있다.
먼저 데이터를 요청한 교차 도메인서버에서 함수(myFnc())를 실행한다. 그런다음 객체가 담긴 배열(json)을
인자값으로 전달한다. 마지막으로 done에 작성한 함수를 호출하고 매개변수(data)에 인자값(json)을 할당한다.
3. $.ajax()메소드를 사용하여 JSONP 방식으로 불러온 데이터(json)를 HTML 문단 태그에 결합한다
<script>
$(function(){
var href="http://localhost/9장/member_2.php?callback=myFnc";
$.ajax({
url:href,
dataType:"jsonp"
}).done(function myTest(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>파일을 실행하면 데이터(json)가 테이블에 삽입된다.
Ajax로 로그인 프로그램 만들기
Ajax로 로그인하는 프로그램을 만들것.
아이디와 비밀번호를 입력하고 로그인 버튼을 누르면 비동기 통신 방식으로 서버에 아이디와 비밀번호가 전송된다.
만약 아이디와 비밀번호가 일치하면 문단태그에 환영 메시지가 나타난다.
<script>
$(function(){
var $frm=$(".login_f");
$frm.on("submit", function(e){
e.preventDefault();
//[submit]버튼을 눌러도 action페이지로 이동하지 않는다.
var myData=$frm.seralize();
//사용자가 폼 입력 요소에 작성한 값을 쿼리 스트리아 형식의
//데이터로 변환하여 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.php'>
<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>다음은 사용자가 입력한 아이디와 비밀번호가 일치하는지를 검사하는 PHP페이지이다.
사용자가 전송한 아이디와 비밀번호가 일치하면 JSON 데이터를 반환한다.
<?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'].'"}';
}
?>
(참고 : do it 자바스크립트+제이쿼리 입문)