타 브라우저간에 데이터를 주고받는 방식이 필요할때가 존재한다.
이럴경우 ajax로는 서로다른 도메인으로는 지원을 하지 않는다.
하지만 대안으로 나온 방법이 jsonp방식이다.
(조건은 서버측 코드를 핸들링할수 있어야 한다는 조건이다.)
클라이언트측 스크립트 소스는 다음과 같다.
클라이언트측 포트는 8080이다
$(function(){
$("#btn").click(function(){
$.ajax({
//호출할 원격URL
url : "http://localhost:7070/index.jsp",
//jsonp방식으로 값을 받겠다.
dataType : "jsonp",
//서버측에서 request.getparameter를 하여 받기위한 jsonp의 name
//빼주게되면 default request.getParameter("callback") 으로 받게된다.
jsonp : "callback",
//async는 왜있는지 모르겠지만 jquery 1.8버전부터 jsonp에 같이 적용하라고 적혀있는듯한
//영어가.... 영어울렁증임 ㅠㅠ
async: false,
//success는 일반 json 방식과 같음
success : function(data){
console.log("result data object",data);
}
});
});
});
html태그는 그냥 버튼 하나만 존재한다.
<input type="button" id="btn" value="jsonp호출" />
원격지 소스관련 코드이다.
ExtJS 강좌에서도 내용을 올려놓았으나 jQuery 보시는분들을 위해서....
Spring 개발자는 해당 라이브러리를 이용하여도 무관하나 보통은 jackson 을 사용하는듯 하다
본인은 일반 jsp페이지로 샘플링을 할것이며
PHP환경은 PHP자체적으로 지원하는 함수를 이용하길 바람.
java 환경에서는 json-simple 라이브러리가 필요하다.
[다운로드 라이브러리]
json-simple-1.1.1.jar별도로 사용하고계신 라이브러리가 있으시다면 무시하셔도 상관없음
서버 코드 부분
서버측 포트는 7070이다.
//클라이언트측 jsonp 속성의 지정해준 value값 = callback이라 callback으로 받았음
String callBack = request.getParameter("callback");
//단순한 success object 생성
JSONObject jsonObj = new JSONObject();
jsonObj.put("success", true);
//다시 클라이언트로 던져준다/
PrintWriter pw = response.getWriter();
//대신, 클라이언트측에서 받은 callBack parameter + "(" + jsonObject의 문자열 + ")"
//형식으로 response 해주어야 함
pw.print(callBack+"("+jsonObj.toString()+")");
pw.flush();
pw.close();
위와같이 하게되면 jsonp받식으로 클라이언트의 $.ajax부분인 success 부분에서 값을 받을수있을것이다!!
도움이 되셨다면 공감클릭! 궁금하신점은 댓글!!
'자바스크립트이야기 > jQuery' 카테고리의 다른 글
| [jQuery 15장] 비동기 Ajax 통신을 해보자!! - JSON방식 (8) | 2014.06.17 |
|---|---|
| [jQuery 14장] 비동기 Ajax 통신을 해보자!! - HTML방식 (6) | 2014.06.16 |
| [jQuery 13장] 동적으로 생성된 태그에 이벤트를 주자! (24) | 2014.06.16 |
| [jQuery 12장] 동적으로 태그 추가 및 태그를 문자자체로 표출하기 (2) | 2014.06.10 |
| [jQuery 11장] 태그속성값 가져오기 attr / prop (0) | 2014.06.10 |
지난 시간에는 html페이지를 만들어서 해당 url을 호출하여 화면에 비동기방식으로 뿌리는 것을 샘플링과 함께 설명을 했다.
파일타입은 html뿐만 아니라 jsp,php,asp 등 모든 웹소스 구동 페이지면
어느 언어건 상관이 없다 ㅎㅎ
오늘은 json타입으로 비동기 호출을 해보도록 할꺼임.
json은 data받아오고 각각의 구분자에 맞춰서 화면표출하는것 때문에 자주이용
한다.
json 타입으로 게시판을 작성하도 상관은없지만, 핸들링 해주는게 html타입보다는 불편함.
이번에는 다음과 같은 형태의 로직으로 샘플링을 짜도록 하겠다.
1. index.html - selectbox 1개, 버튼 1개가, ajax 화면을 뿌릴 div태그 1개
2. list1.json - flag : Y , data : '성공'
3. list2.json - flag : N , data : '실패'
위 3개의 소스의 가상로직은 데이터를 조회하다보면 데이터가 있고, 없는 경우가
있다.
예를들어 게시판의 검색같은?
솔직히 select 필요는 없지만 구분자를 통해 화면에 결과값을 나눠서 뿌리고자
json 파일을 두개 만들어보았다.
ajax에 대해서 14장에서 html 예를 들었으니 오늘은 그저 각각 통소스 샘플링만
공개하도록 하겠음.
1. index.html
<!DOCTYPE html>
<html>
<head>
<meta charset="UTF-8">
<title>Insert title here</title>
<script type="text/javascript" src="//cdnjs.cloudflare.com/ajax/libs/jquery/1.9.0/jquery.js"></script>
<script type="text/javascript">
$(function(){
$("#searchButton").click(function(){
var flag = $("#resultSelect").val();
//select box로 구분을 주었지만
//실질적으로는 내부로직에서 db조회하여 데이터가 있으면
//json 파싱하여 데이터 생성을 하고
//없으면 데이터 없음으로 파싱해야한다
if(flag == "Y") {
url = "/list1.json";
} else {
url = "/list2.json";
}
//비동기 통신을 하여 json타입으로 호출한다.
$.ajax({
url: url
, dataType : 'json'
, success: function(data) {
//result결과
//json객체의 flag가 Y이면 data라는 성공메시지를 result변수에 담는다.
if(data.flag == "Y"){
var result = data.data;
//json객체의 flag가 Y가아닌 그이후는 data라는 실패메시지를 result변수에 담는다.
} else {
var result = data.data;
}
//div태그에 html로 출력!!
$("#listLayout").html(data.data);
}
});
})
})
</script>
</head>
<body>
<select id="resultSelect">
<option value="Y">성공JSON</option>
<option value="N">실패JSON</option>
</select>
<input type="button" id="searchButton" value="조회" /><br/>
<div id="listLayout"></div>
</body>
</html>
2. list1.json 파일소스
{
"flag" : "Y",
"data" : "성공"
}
3. list2.json 파일소스
{
"flag" : "N",
"data" : "실패"
}
각 소스를 화면에 띄워서 실행하도록 해보자.
그리고 약간씩 변경을 하여 어떻게 저런식으로 결과물이 나오는지 이해를 하도록 하자!!
도움이 되셨다면 손가락↓ 클릭! 궁금하신점은 댓글!!
'자바스크립트이야기 > jQuery' 카테고리의 다른 글
| [jQuery 16장] 다른 도메인간 비동기 Ajax 통신을 해보자!! - JSONP방식 (2) | 2014.06.30 |
|---|---|
| [jQuery 14장] 비동기 Ajax 통신을 해보자!! - HTML방식 (6) | 2014.06.16 |
| [jQuery 13장] 동적으로 생성된 태그에 이벤트를 주자! (24) | 2014.06.16 |
| [jQuery 12장] 동적으로 태그 추가 및 태그를 문자자체로 표출하기 (2) | 2014.06.10 |
| [jQuery 11장] 태그속성값 가져오기 attr / prop (0) | 2014.06.10 |
주말에 쉬어서 글을 올리게 되었습니다 ㅎㅎ
보통 form태그에서 submit 처리 하면 화면이 깜박이면서 데이터 로딩후 화면에
표출된다.하지만, Ajax통신을 하게되면 화면에 깜박임을 찾아볼수가 없을 것이다!
말그대로 화면은 가만히 있는상태에서 뒷단에서 모든 데이터 처리를 하고 return값을 핸들링하면서 웹화면을 제어할 수 있다!
데이터 타입은 다양하다 html, json, jsonp, xml, javascript 등등..
이번장에서 다룰 내용은 html방식이다.
html페이지는 두개를 만들어서 ajax예제를 만들어보겠음!
첫번째 파일명은 index.html
두번째 파일명은 list.html
우선은 index페이지는 게시판 껍데기라고 해보자
언뜻보면 저번에 했던 변수에 html태그 만들어서 뿌리는 방식이 있는데 그거랑 비슷하다.
전에 했던거에 확장편이라고 생각하면 된다.
임의로 list객체에 데이터를 담아서 ajax통신을하여 url호출을 하여 데이터를 화면에 뿌려보도록 하자!!
index.html은 단순 리스트 출력을 할수 있는 출력버튼이 있고,
list.html페이지에는 임의로 테이블 태그로 리스트를 만들 태그들이 있다.
index.html페이지의 출력버튼 클릭시 특정 div레이아웃에 list.html페이지의 태그들을 넣어볼것이다.
우선스크립트 부분을 봅시다.
$(function(){
$("#listButton").click(function(){
$.ajax({
type: 'post'
, url: '/list.html'
, dataType : 'html'
, success: function(data) {
$("#listDiv").html(data);
}
});
})
})
html부분이다.
<input type="button" id="listButton" value="리스트출력" /> <br/> <div id="listDiv"></div>
버튼 클릭전 초기화면은 다음과 같다.
다음처름 버튼만 있는 페이지다.
list.html 페이지 코드를 보자
* 참고로 하단에 있는 소스가 풀소스다.
<html></html> / <title></title> / <body></body> 모든 태그들은 없다
<table> <tr> <td>abcsdkjfslkdfjsdf</td> </tr> <tr> <td>abcsdkjfslkdfjsdf</td> </tr><tr> <td>abcsdkjfslkdfjsdf</td> </tr> <tr> <td>abcsdkjfslkdfjsdf</td> </tr><tr> <td>abcsdkjfslkdfjsdf</td> </tr> <tr> <td>abcsdkjfslkdfjsdf</td> </tr><tr> <td>abcsdkjfslkdfjsdf</td> </tr> <tr> <td>abcsdkjfslkdfjsdf</td> </tr> </table>
막 코딩한거지만 게시판 목록이라고 하자!! ㅎㅎ
자이제 버튼 클릭하여 list.html 페이지를 호출해보자!!
출력화면이다.
나왔다! ㅎ
일반 form태그는 어떤 이벤트가 발생하고 데이터를 뿌리려면 화면이 깜박이고
페이지 url 이 변경이 될텐데 위에 캡처화면은 url 변경도 없이 데이터가 특정
클릭이벤트로 인하여 출력된다.
그리고 주의할점
흔히, ajax통신하는 list.html와 같은 페이지를 <html></html>등 모든 페이지를
작업을하고 ajax 호출을 하시는 분들이 계신다.
ajax html을 하면 index.html와 같이 호출 하는 부모페이지에 태그를 맞추자
index.html도 html/body태그가 있고, list.html에도 html/body태그가 있으면
좀 거시기 하지 않은가....
물론, 어찌하다보면 페이지는 나오지만 충분히 필요 없는 태그들은 빼도 되지 않을까... 가를 개인적인 생각이다...
샘플 코드를 한번 로컬에서 동작시켜서 이해를 하도록 하자!! ㅋ
list.html에 대한 결과를 받아오려면 $.ajax의 success 에 함수를 이용하여 파싱을 하도록 하자
success : function(data){} 에서의 data가 html태그가 나온다.
의심이 되면 alert(data)로 확인을 할수 있을 것이다.
다음에는 json객체를 파싱하여 ajax로 뽑아오자~
도움이 되셨다면 손가락↓ 클릭! 궁금하신점은 댓글!!
'자바스크립트이야기 > jQuery' 카테고리의 다른 글
| [jQuery 16장] 다른 도메인간 비동기 Ajax 통신을 해보자!! - JSONP방식 (2) | 2014.06.30 |
|---|---|
| [jQuery 15장] 비동기 Ajax 통신을 해보자!! - JSON방식 (8) | 2014.06.17 |
| [jQuery 13장] 동적으로 생성된 태그에 이벤트를 주자! (24) | 2014.06.16 |
| [jQuery 12장] 동적으로 태그 추가 및 태그를 문자자체로 표출하기 (2) | 2014.06.10 |
| [jQuery 11장] 태그속성값 가져오기 attr / prop (0) | 2014.06.10 |
지난 시간에 before/after/append/html등을 이용하여 동적으로 태그를 화면에
삽입했었다. 이렇게 동적으로 추가된 태그는 일반적인 이벤트가 동작되지 않는다.
예를 들어 다음 소스와 같이 코딩해보자
스크립트 부분
$(function(){
$("#makebtn").click(function(){
var dynamicTag = '<input type="button" id="btn" value="경고"/>';
$("body").html(dynamicTag);
})
$("#btn").click(function(){
alert("!");
})
})
html태그소스
<input type="button" id="makebtn" value="버튼생성"/>
다음화면은 '버튼생성'을 클릭하면 '경고'라는 버튼이 화면에 생성된다. 기존 버튼생성버튼은 없어지고 경고버튼이 생성이 되었다. 해당 경고버튼을 누를경우 alert이 떠야 정상인대, alert이 뜨지 않는다.
한번 위소스를 실행해보도록 하자!!! 
이유는 동적으로 생성된 태그는 별도의 이벤트 형식으로 지정 해줘야 한다.
예전버전에는 bind, live태그를 1.4.3 전버전에서 사용했는데 jquery사이트에서조차 live이벤트를 사용하지 말라고 하며, 1.4.3이후에는 delegate이벤트가 생겨 한동안 delegate 이벤트를 사용했었다.
하지만!! 1.7이후버전에는 on이벤트가 생겼다.
각각의 이벤트들의 단점이 있으니 on 이벤트가 1.7버전에 생겼겠으니!!
1.7이후버전에는 on 태그를 이용하도록 하자!
위에 소스중에서 한줄만 변경만 하면 이벤트가 동작한다.
바로.바로..바로...바로....!!!!
$("#btn").click(function(){ <<<< 이 부분이다.
$(document).on("click","#btn",function(){ <<< 요로케 바꿔보자 ㅎㅎㅎ
on태그 각각에 들어가는 parameter들은
첫번째 : click / change 등등의 이벤트
두번째 : 이벤트 적용할 타겟 태그
세번째 : 동작 함수
저형식으로 하면 동적으로 생성된 태그들에게 이벤트를 적용할수 있다!!!
도움이 되셨다면 손가락↓ 클릭! 궁금하신점은 댓글!!
'자바스크립트이야기 > jQuery' 카테고리의 다른 글
| [jQuery 15장] 비동기 Ajax 통신을 해보자!! - JSON방식 (8) | 2014.06.17 |
|---|---|
| [jQuery 14장] 비동기 Ajax 통신을 해보자!! - HTML방식 (6) | 2014.06.16 |
| [jQuery 12장] 동적으로 태그 추가 및 태그를 문자자체로 표출하기 (2) | 2014.06.10 |
| [jQuery 11장] 태그속성값 가져오기 attr / prop (0) | 2014.06.10 |
| [jQuery 10장]스크립트로 지정 태그에 클래스 적용하기 (0) | 2014.06.09 |
쉽게 생각하면 스크립트 상에서 문자열로 만든 html 태그를 현재 보여진 화면에서 출력을 시켜주는 것이다.
동적으로 태그를 추가해주려면 해당 태그내에 html 태그를 모두 갈아 엎어주거나
지정 태그 기준으로부터 삽입할 위치를 지정해주는것을 해보기로 하겠다.
지정태그내에 존재하는 html 태그를 새로 지정한 html태그로 엎어버리고자 할때는
$(지정타겟).html(HTML태그문자열)
지정태그내에 존재하지 마지막 태그다음에 태그문자열을 삽입하는 방법은
$(지정타겟).append(HTML태그문자열)
지정태그바로 다음에 태그문자열을 붙이는 방법은
$(지정타겟).after(HTML태그문자열)
지정태그바로 이전에 태그문자열을 붙이는 방법은
$(지정타겟).before(HTML태그문자열)
와 같이 주면 될것이다.
그리고 예를들어서 화면에 HTML태그를 문자로 보여주고 싶을 경우!
$(지정타겟).text(HTML태그문자열) 처럼 text함수를 이용하면 태그가 아닌 문자로 화면에 출력이 가능하다
태그 화면을 보여주는 함수 : html / append / before / after
태그UI화면이 아닌 문자열로 화면을 보여주는 함수 : text
샘플로 태그 화면 보여주는 함수중에는 html을 써보고 문자열로보여주는 text 함수로만 샘플링을 구현해보았다. 해당 소스를 응용하여 html/append/before/after/text 에대하여 이해하도록 해보자.
스크립트 소스부분
$(function(){
var tag = "<input type="checkbox"><br />변경후HTML";
//html함수 적용하여 htmltest태그내의 html 변경
$("#htmlbutton").click(function(){
$("#htmltest").html(tag);
});
//text함수를 적용하여 html함수를 사용했던 같은 내용의 문자열을 표출해본다.
$("#textbutton").click(function(){
$("#texttest").text(tag);
})
})
HTML 소스부분
<div id="htmltest" style="border-width: 1px; border-style: solid;"> <input type="text" value="test"/> <br/> 변경전HTML <br/> </div> <br/> <div id="texttest" style="border-width: 1px; border-style: solid;"></div> <input type="button" value="html 태그변경" id="htmlbutton"/> <input type="button" value="태그를 text로 출력" id="textbutton"/>
도움이 되셨다면 손가락↓ 클릭! 궁금하신점은 댓글!!
'자바스크립트이야기 > jQuery' 카테고리의 다른 글
| [jQuery 14장] 비동기 Ajax 통신을 해보자!! - HTML방식 (6) | 2014.06.16 |
|---|---|
| [jQuery 13장] 동적으로 생성된 태그에 이벤트를 주자! (24) | 2014.06.16 |
| [jQuery 11장] 태그속성값 가져오기 attr / prop (0) | 2014.06.10 |
| [jQuery 10장]스크립트로 지정 태그에 클래스 적용하기 (0) | 2014.06.09 |
| jQuery / 프로토타입 동시사용시 ... (0) | 2014.06.09 |