jquery,jsonp 크로스브라우징 처리(2012-06-12업뎃)
JSONP를 이용한 크로스브라우징처리!
호출페이지
<!DOCTYPE html>
<html>
<head>
<meta charset="euc-kr">
<title>Insert title here</title>
<link rel="stylesheet" href="http://code.jquery.com/mobile/1.1.0-rc.1/jquery.mobile-1.1.0-rc.1.min.css" />
<script src="http://code.jquery.com/jquery-1.7.1.min.js"></script>
<script src="http://code.jquery.com/mobile/1.1.0-rc.1/jquery.mobile-1.1.0-rc.1.min.js"></script>
<script>
$(document).ready(function(){
$("#btn").bind("click", function(){
disp();
});
});
str="";
function disp(){
$.ajax({
url: "http://dev.hohoho.co.kr/default.asp?callback=?",
type: "post",
data:{
vc_mode:'select_fran',
vc_user_x:'37.566535',
vc_user_y:'126.977969' // 뒤에 따라오는 파라미터는 이런식으로 따로 구분해서 붙여줄 수 있다.
},
dataType: 'jsonp', //데이터타입을 jsonp로 규정
jsonp : 'callback', //콜백을 이용한다고 선언
success: function(data) {
var str = "<table><tr><th>코드</th><th>패밀리레스토랑명</th><th>지점코드</th><th>지점명</th><th>거리</th><th>기타</th></tr>";
$.each(data, function(index, entry){
str += "<tr>";
str += "<td>" + entry["a"] + "</td>";
str += "<td>" + entry["b"] + "</td>";
str += "<td>" + entry["c"] + "</td>";
str += "<td>" + entry["d"] + "</td>";
str += "<td>" + entry["e"] + "km</td>";
str += "<td>" + entry["f"] + "</td>";
});
str +="</tr></table>";
$("#disp").append(str);
},
error: function(data) {
alert("fai:"+data);
}
});
}
</head>
<body>
<section data-role="page" data-theme="b">
<header data-role="header">
<h1>Ajax 처리</h1>
</header>
<div data-role="content">
<h2>상품 처리</h2>
<div data-role="controlgroup" data-type="horizontal">
<a href="#" id="btn" data-role="button">JSON-getJSONP</a>
</div>
<div id="disp"></div>
</div>
</section>
</body>
</html>
//데이터소스페이지
중요한것은 데이터 소스페이지!!
데이터 소스페이지에 형식이 중요함!!
<%=request("callback")%>([{"bi_idx":1000,"nv_fran_name":"\uC5D0\uC290\uB9AC","cnt":3},{"bi_idx":1001,"nv_fran_name":"\uBE55\uC2A4","cnt":3}])
소괄호로 대괄호와 중괄호로 만들어진 통신문을 감싸주는게 중요함!!
일반적으로 소괄호가 대괄호를 제외한 중괄호만 이용해서 jsonp 결과페이지를 구성하는데!! 그렇게하면 다중반목문에선 문제가 생긴다!
반드시 ([{a:a,b:a,c:a,d:a,e:a,f:a},{a:a,b:a,c:a,d:a,e:a,f:a} ]) 이런형식임!!!!
//아래 구문은 하나의 레코드를 사용하는 간단한 경우에 사용하기엔 부족함이 없지만!
두개이상의 레코드에서는 이상이 발생하였음.
때문에 새로 업데이트함.
크로스브라우징 처리를 위해서는
URL에 파라미터를 추가로 붙여준다.
//정보가져 불러올 페이지
$.ajaxSetup({cache:false});
var url = http://www.daum.net/;
url += "callback=?" ;
$.getJSON(
url ,
function(data, textStatus) {
if (textStatus=="success" ){
alert("성공");
}
//정보가 있는 원본페이지
<%response.write request("callback")&"({""NO_RESULT"":""0"",""NO_CNT"":""0""})"%>
콜백파라미터를 붙이지 않더라도 보통의 제이슨이 작동한다. 하지만 도메인이 다른 주소의 값을 불러올 때에는 에러가 발생하게 되는데 이럴때는 콜백파라미터를 붙여서 보내주고, 데이터를 주는 결과페이지에서도 결과값의 앞부분에 콜백파라미터로 보내준 값을 붙여준다.
이경우에는 "?"를 사용하였지만 이건 편한대로 사용하면 된다.
추가로 결과페이지의 변수명과 결과값 모두를 쌍따옴표로 감싸줘야한다.
그냥 습관적으로 콜백파라미터를 붙어서 JSON을 이용하는 것이 편리할 것이다.