04.HTML5 & JavaScript III

(1)

신한대학교 컴퓨터정보계열 고덕윤 [email protected]

Client Server Programming 2

(2)

요청 처리하기.

01

• 웹에서 요청(request)를 보내보자. • 웹서비스에서 데이터를 가져와서 HTML5로 표현하자. • 자바 스크립트로 JSON을 주고 받아보자. [가능한 과제] • 트위터를 이용하여, 나만의 명언 집을 만들어보자.

(3)

요청/응답 복습

02

• 요청(Request) : 브라우저는 서버에게 특정 정보를 요청한다. • 요청 방식, 서버 주소 등이 포함된다. • 응답(Response) : 서버는 사용자가 요청한 데이터/서비스를 제공한다. • 컨텐츠 타입, 컨텐츠 데이터 등이 포함된다.

(4)

Request in JavaScript

1. url 설정

2. 요청 객체 생성

3. 요청 실행

4. 응답 수신

5. (필요 시) 서버로 응답 보내기

03

var url = "http://someserver.com/data.json";

var request = new XMLHttpRequest();

request.open("GET",url);

request.onload=function(){ if(request.status == 200){ alert(request.responseText); } } request.send(null);

(5)

실습 4

http://jsonplaceholder.typicode.com/users 으로 부터 결과를 받아서,

웹 브라우저에 띄어보시오.

• Explorer 에서 실행 해보세요.

(6)

JSON 사용하기

05

1. 먼저 객체를 생성한다. 2. 객체를 JSON으로 변경하는 방법 3. JSON을 객체로 변경하는 방법 new Movie("의정부","베테랑",["2시","3시","5시"]);

var jsonString = JSON.stringify(m);

alert(jsonString);

var mObj = JSON.parse(jsonString);

(7)

Json 배열 다루는 방법

06

function updateSales(responseText) {

var salesDiv = document.getElementById("sales");

var sales = JSON.parse(responseText);

for (var i = 0; i < sales.length; i++) {

var sale = sales[i];

var div = document.createElement("div"); div.setAttribute("class", "saleItem");

div.innerHTML = sale.name + " sold " + sale.sales + " gumballs"; salesDiv.appendChild(div);

} }

(8)

결정적 결함

07

서비스 도메인 데이터 도메인 서비스 요청 자료 요청 • 요청을 중계하는 경우 데이터 도메인의 자료 가 서비스를 해킹하는데 이용할 수 있다. • XMLHttpRequest 는 다른 도메인의 자료를 갖고 오는 것을 막는다. • Chrome 는 XMLHttpRequest의 호출을 막고 있다.

(9)

JSONP(JSon with Padding) 의 사용

• <script> 태그를 통해서 자료를 얻는 방법.

• 자동으로 파싱된 JSON 데이터가 넘어옴.

• 비동기 호출을 기본으로 채택함.

08

(10)

코드 변경!

09

function readJson(){

var url = "http://gumball.wickedlysmart.com/";

var request = new XMLHttpRequest();

request.onload= function(){

if(request.status == 200){

updateSales(request.responseText); }

else{

alert("ERROR:"+request.status); }

}

request.open("GET",url); request.send(null);

}

호출 이후 처리될 function

function updateSales(responseText) {

var salesDiv = document.getElementById("sales"); var sales = JSON.parse(responseText);

for (var i = 0; i < sales.length; i++) { var sale = sales[i];

var div = document.createElement("div");

div.innerHTML = sale.name + ":" + sale.sales; salesDiv.appendChild(div);

} }

(11)

실습 5

10 • 실습 1에서 얻은 JSON을 파싱하여 아래와 같이 구글맵에 마커를 추

가하시오.

(12)

힌트 코드

11

var myLatlng = new google.maps.LatLng(lati, long);

<script

src="http://jsonplaceholder.typicode.com/users?callback=updateMarker">< /script>

<script

src="https://maps.googleapis.com/maps/api/js?key=KEY&callback=showMap"