UI Laboratory

UI 개발을 위한 레퍼런스

INDEX

자바스크립트 함수와 객체


매개 변수와 인자

함수를 정의할 때 한개 이상의 매개변수를 선언할 수 있다.

			//degrees, mode, duration이라는 매개변수를 선언
			function cook(degrees, mode, duration){
				...
			}
		

함수를 호출할 때 인자와 함께 함수를 호출할 수 있다.

			/실수, 문자열, 정수, 이렇게 3개의 인자로 함수를 호출
			cook(425.0, "비스킷", 45);
			cook(350.0, "불고기", 10);
		

즉, 매개변수는 단 한번만 정의할 수 있지만, 많은 인자를 넘겨 함수를 호출할 수 있다.

매개변수로 함수를 선언하고, 인자로 함수를 호출한다.

HTML로 위치 찾기 - 지오로케이션


위치 가져오기

1. 지오로케이션 코드를 작성할 경우 '브라우저 지원 여부'를 알기 위해 브라우저가 navigation 객체의 geolocation 속성을 갖고 있는지 확인하는 것이다. 지오로케이션을 지원할 경우에만 이 속성을 갖고 있다. navigator.geolocation 속성은 지오로케이션 API 전체를 포함하는 객체이다.

			function getMyLocation() {
				if (navigator.geolocation) {
					navigator.geolocation.getCurrentPosition(displayLocation, displayError);
				} else {
					alert("지오로케이션이 지원되지 않습니다.");
				}
			}
		

2. getCurrentPosition은 브라우저의 위치를 가져오는 API 메서드이다.

			getCurrentPosition(successHandler, errorHandler, options);
		

errorHandler, options는 선택적으로 사용할 수 있는 매개변수이다.

3. 브라우저가 위치를 성공적으로 결정하면 성공 핸들러인 displayLocation 함수를 호출한다.

			if (navigator.geolocation) {
				navigator.geolocation.getCurrentPosition(displayLocation, displayError);
			}
		

성공 핸들러인 displayLocation이 호출될 때 지오로케이션 API는 위도와 경도를 갖고 있는 coordinates 객체를 포함해서 브라우저 위치에 관한 정보를 갖고 있는 position 객체를 전달한다.

			function displayLocation(position) {
				var latitude = position.coords.latitude;
				var longitude = position.coords.longitude;
				
				var div = document.getElementById("location");
				div.innerHTML = '당신은 위도: ' + latitude + ', 경도: ' + longitude + '에 있습니다.';

			}
		

position객체는 coords라는 속성을 갖고 있는데, 여기에는 coordinates 객체에 대한 참조가 포함되어 있다.

4. 지오로케이션이 위치를 찾는데 실패하면 호출되는 함수인 displayError 핸들러에 지오로케이션이 error 객체를 전달한다. error 객체에는 code란 속성이 있는데 0~3까지의 값을 가지고 있으며 브라우저가 위치를 결정하지 못하는 원인을 갖고 있는 숫자 코드이다.

			function displayError(error){
				var errorTypes = {
					0: "알려지지 않은 에러",
					1: "사용자가 권한 거부",
					2: "위치를 찾을 수 없음",
					3: "요청 응답 시간 초과"
				};

				var errorMessage = errorTypes[error.code];

				if(error.code==0||error.code==2){
					errorMessage = errorMessage + " " + error.message;
				}

				var div = document.getElementById("location");
				div.innerHTML = errorMessage;
			}
		

위에서 0번과 2번 에러가 발생하면 error.message란 속성에 추가 정보가 담겨 errorMessage 문자열에 추가하고 있다.

아래는 전체 소스이다.

			<!doctype html>
			<html>
			 <head>
			  <title> New Document 
			  <meta charset="utf-8" />
			  <script type="text/javascript">
				window.onload = getMyLocation;

				function getMyLocation() {
					if (navigator.geolocation) {
						navigator.geolocation.getCurrentPosition(displayLocation, displayError);
					} else {
						alert("지오로케이션이 지원되지 않습니다.");
					}
				}

				function displayLocation(position) {
					var latitude = position.coords.latitude;
					var longitude = position.coords.longitude;
					
					var div = document.getElementById("location");
					div.innerHTML = '당신은 위도: ' + latitude + ', 경도: ' + longitude + '에 있습니다.';

				}
				
				function displayError(error){
					var errorTypes = {
						0: "알려지지 않은 에러",
						1: "사용자가 권한 거부",
						2: "위치를 찾을 수 없음",
						3: "요청 응답 시간 초과"
					};

					var errorMessage = errorTypes[error.code];

					if(error.code==0||error.code==2){
						errorMessage = errorMessage + " " + error.message;
					}

					var div = document.getElementById("location");
					div.innerHTML = errorMessage;
				}
			 </script>
			 </head>
			 <body>
			  
				<div id="location"></div>​

			 </body>
			</html>
		

거리 계산을 위한 코드 작성하기

두 지점간의 거리를 계산하기 위한 함수는 아래와 같다.

			// 이 함수는 출발지와 목적지, 두개의 좌표를 받아서 두 지점간의 거리를 킬로미터로 환산해서 반환한다.
			function computeDistance(startCoords, destCoords) {
				var startLatRads = degreesToRadians(startCoords.latitude);
				var startLongRads = degreesToRadians(startCoords.longitude);
				var destLatRads = degreesToRadians(destCoords.latitude);
				var destLongRads = degreesToRadians(destCoords.longitude);

				var Radius = 6371; // 지구의 반경(km)
				var distance = Math.acos(Math.sin(startLatRads) * Math.sin(destLatRads) + 
								Math.cos(startLatRads) * Math.cos(destLatRads) *
								Math.cos(startLongRads - destLongRads)) * Radius;

				return distance;
			}

			function degreesToRadians(degrees) {
				radians = (degrees * Math.PI)/180;
				return radians;
			}
		

위 함수를 이용하여 현재의 위치에서 AB마트 까지의 거리를 계산하기 위해 AB마트의 위치를 리터럴 객체로 정의하고 computeDistance 함수에 현재의 위치와 AB마트의 위치를 좌표로 넘겨준다.

			var abCoords =  {
				latitude: 47.624851,
				longitude: -122.52099
			};

			function displayLocation(position) {
				...
				var km = computeDistance(position.coords, abCoords);
				var distance = document.getElementById("distance");
				distance.innerHTML = "당신은 AB마트와 " + km + " km 떨어져 있습니다.";
			}

		

위치 보여주기

구글지도를 사용하여 위치를 보여주려면 문서의 head 부분에 아래 문장을 추가한다.

			<script src="http://maps.google.com/maps/api/js?sensor=true"></script>
		

| 페이지에 구글 지도 추가하기

구글지도를 생성하려면 위도와 경도, 그리고 지도를 어떤 식으로 생성할지 명시하는 일련의 옵션이 필요하다. 구글 API는 구글에서 만든 객체를 사용하고 있으며, 구글에서 제공하는 생성자를 사용해서 이러한 객체들 중 하나를 생성할 수 있다.

			var googleLatAndLong = new google.maps.LatLng(latitude, longitude);
		

구글은 어떤식으로 지도를 만들 것인지 조정할 수 있는 몇가지 옵션을 제공한다.

			var mapOptions = {
				zoom: 10,	//zoom 옵션 값으로 0에서 21까지 설정할 수 있는데, 숫자가 클수록 더 자세히 보인다. 일반적으로10으로 설정한다.
				center: googleLatAndLong,   //지도의 중심으로 설정한다. 
				mapTypeId: google.map.MapTypeId.ROADMAP		//어떤 종류의 지도를 사용할지 설정한다.
			}
		

| 지도 보여주기

showMap 이라는 함수를 정의한다. 이 함수는 좌표를 가져다가 페이지에 있는 지도에 해당 위치를 보여준다.

			//map이라는 전역변수를 선언하는데, 생성한 구글 지도가 이 변수에 담긴다.
			var map;
			
			function showMap(coords) {
				//coords 객체의 위도와 경도를 가져와서 google.maps.LatLng 객체를 생성한다.
				var googleLatAndLong = new google.maps.LatLng(coords.latitude, 
															  coords.longitude);
				var mapOptions = {
					zoom: 10,
					center: googleLatAndLong,
					mapTypeId: google.maps.MapTypeId.ROADMAP
				};
				var mapDiv = document.getElementById("map");

				//마지막으로 DOM에서 map &div>를 읽어온뒤, mapOptions와 함께 이를 Map 생성자에 전달해서 google.maps.Map 객체를 만들어 페이지 상에 지도를 만든다.
				map = new google.maps.Map(mapDiv, mapOptions);
			}
		

지도를 보여주기 위해 displayLocation 함수에서 showMap 함수를 호출한다.

			function displayLocation(position) {
				var latitude = position.coords.latitude;
				var longitude = position.coords.longitude;

				var div = document.getElementById("location");
				div.innerHTML = "You are at Latitude: " + latitude + ", Longitude: " + longitude;

				var km = computeDistance(position.coords, ourCoords);
				var distance = document.getElementById("distance");
				distance.innerHTML = "You are " + km + " km from the WickedlySmart HQ";
				
				//페이지에 있는 다른 &div>들을 갱신한 후 displayLocation에서 showMap을 호출한다.
				showMap(position.coords);
			}		
		

예제) http://wickedlysmart.com/hfhtml5/chapter5/map/myLoc.html>

| 옵션을 설정하는 방법

높은 정확도를 원하고 위치의 최대 수명값을 60초(60,000 밀리세컨드)로 설정한다고 하면 다음과 같이 옵셩을 설정하면 된다.

			var options = {enableHighAccuracy:true, maximumAge: 60000};
		

그리고 나서 이 옵션을 getCurrentPosition이나 watchPosition에 전달한다.

			navigator.geolocation.getCurrentPosition(displayLocation, displayError, options);
		
			navigator.geolocation.getCurrentPosition(displayLocation, displayError, {enableHighAccuracy:true, maximumAge: 60000});
		

위치 정보를 가져오는데 아무 반응이 없다면 아마도 timeout 값이 무한대로 설정되어 있어 위치를 수집하기 위해 계속 기다린 것이다. timeout값을 설정함으로써 명시된 timeout 시간 범위내에 위치를 가져오지 못하면 에러핸들러를 호출할 것이다.

			//timeout값을 5000밀리세컨드로 설정하면 브라우저가 계속해서 위치를 얻어 오려하는 것을 막을 수 있다.
			function getMyLocation() {
				watchId = navigator.geolocation.watcgPosition(displayLocation, displayError, {timeout:5000});
			}
		

웹서비스와의 대화


웹서비스에 대한 요청

브라우저는 서버로 HTTP 요청을 만들고, 서버는 브라우저만 볼수 있는 여러 메타데이터와 함께 페이지를 돌려준다. 요청은 우리가 원하는 데이터(리소스)가 무엇인지 서버에 알려준다. 반면 응답은, 이상이 없는 경우, 메타데이터와 함께 데이터를 포함하고 있다.

자바스크립트로 요청을 생성하는 방법

  1. ① 먼저 URL이 있어야 한다. 원하는 데이터를 얻어 올 곳을 브라우저에게 알려 줘야 한다.

    					var url = "http://someserver.com/data.json";
    				
  2. ② 요청 객체를 만든다.

    					//XMLHTTPRequest 생성자를 사용해서 새로운 요청객체를 생성한다.
    					var request = new XMLHTTPRequest();
    				
  3. ③ open 메서드를 사용해서 URL을 가지고 요청을 설정하고, 요청 객체에 사용하려는 요청의 종류를 말해준다.

    					//HTTP GET방식을 사용해서 요청을 설정하고 있는데, 이 방식은 HTTP 데이터를 가져오는 표준 방법이다.
    					//url변수에 담겨 있던 URL을 사용해서 요청 객체를 설정한다. 
    					request.open("GET", url);
    				
  4. ④ 데이터를 회수해 달라고 XMLHTTPRequest 객체에 요청을 할 때 이 객체는 즉시 데이터를 받아 온다. 그리고 브라우저가 원격 웹서버로 부터 응답을 받으면 아래 함수를 호출한다. 즉, 데이터가 도착할 때 호출되는 핸들러를 작성한다.

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

    HTTP GET방식으로 받은 데이터는 request 객체의 responseText 속성에 들어 있다.

  5. ⑤ 요청객체를 서버로 보낸다. 원격 서비스로 데이터를 보내지 않을 거라면 null을 전달한다.

    					request.send(null);
    				

지금까지 XMLHTTPRequest 객체를 생성해서, URL과 HTTP 요청타입, 핸들러와 함께 이를 추가하고 나서 요청을 보내고 도착하면 핸들러가 호출하는 방법이다.

JSON 개요

JSON은 사람이 읽기 쉬운 형식이며, 자바스크립트 객체와 값으로 빠르고 쉽게 파싱될 수 있다.

다음은 JSON의 작동 방식이다.

  1. ① 교환하거나, 저장하려는 자바스크립트 객체를 확보한 다음에 JSON.stringify 메서드를 호출해서 이 객체를 인자로 전달한다.
  2. 반환되는 것은 객체를 나타내는 문자열이다. 이 문자열을 저장해서 함수로 전달하고 네트워크를 통해 전송할 수 있다.
  3. ③ 이 문자열을 객체로 변환할 준비가 되면, 이를 JSON.parse 메서드로 전달한다.
  4. ④ 결과로 반환되는 것은 원본 객체의 복사본이다.

| JSON을 사용한 간단한 예제

  1. ① 다음은 객체를 JSON 문자열 형식으로 변환하는 간단한 예제이다. 숫자, 문자열, 배열같은 모든 기본 데이터 유형들은 변환이 가능하다.
    					function Movie(title, genre, rating, showtimes) {
    						this.title = title;
    						this.genre = genre;
    						this.rating = rating;
    						this.showtimes = showtimes;
    						this.getNextShowing = function() {
    							var now = new Date().getTime();
    							for (var i = 0; i < this.showtimes.length; i++) {
    								var showtime = getTimeFromString(this.showtimes[i]);
    								if ((showtime - now) > 0) {
    									return "Next showing of " + this.title + " is " + this.showtimes[i];
    								}
    							}
    							return null;
    						};
    					}
    
    					var plan9Movie = new Movie("외계 행성 9호", "고전 컬트", 2, ["3:00pm", "7:00pm", "11:00pm"]);
    				
  2. ② 일단 객체를 만들었으면 JSON.stringify 메서드를 사용해서 JSON 문자열 형식으로 변환할 수 있다.
    					var jsonString = JSON.stringify(plan9Movie);
    					alert(jsonString);
    				
  3. ③ 다시 문자열을 JSON.parse 메서드로 전달해서 객체로 만들 수 있다.
    					var jsonMovieObject = JSON.parse(jsonString);
    					alert("JSON 무비는" + jsonMovieObject.title + "입니다");
    				

| JSON을 사용한 간단한 예제-2

다음은 서버로 부터 JSON 문자열 데이터를 얻기 위해 HTTP 요청을 보낸 후 &div>에 이 데이터를 넣기만 했다.

			<!doctype html>
			<html lang="ko">
			<head>
			<meta charset="utf-8">
			<title>Where am I?</title>
			<link rel="stylesheet" href="mightygumball.css">
			<script>
				window.onload=function(){
					var url = "http://mylko72.maru.net/jquerylab/html5/sales.json";

					var request = new XMLHttpRequest();
					request.open("GET",url);
					request.onload=function(){
						if(request.status==200){
							updateSales(request.responseText);
						}
					};
					request.send(null);
				}

				function updateSales(responseText){
					var salesDiv = document.getElementById("sales");
					salesDiv.innerHTML = responseText;
				}
			</script>
			</head>
			<body>

			<h1>마이티 검블 판매</h1>

			<div id="sales"></div>

			</body>
			</html>
		

실행화면) http://mylko72.maru.net/jquerylab/html5/myGumble.html

| JSON 문자열을 객체로 변환한 후 DOM 조작하기

  1. ① 먼저 XMLHttpRequest 객체에서 받은 데이터(순수한 JSON 문자열 데이터)를 가져다가 자바스크립트 객체로 변환한다.
    					function updateSales(responseText){
    						var salesDiv = document.getElementById("sales");
    						var sales = JSON.parse(responseText);
    					}
    				
  2. ② 이제 이를 배열로 만들어서 DOM의 새로운 요소로 추가할 수 있다.
    					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 + "에서 검블을" + sale.sales + " 개 팔았습니다."
    							salesDiv.appendChild(div);
    						}
    					}
    				

    실행화면) http://mylko72.maru.net/jquerylab/html5/myGumble2.html

브라우저 보안 정책

브라우저는 XMLHttpRequest가 페이지의 원래 도메인과는 다른 도메인에서 데이터를 가져오는 것을 막고 있다.

| 자바스크립트 코드로 할 수 없는 것

  1. ① 브라우저는 GoodDomain.com에 있는 페이지를 요청을 하면 서버는 요청받은 html페이지, css, 자바스크립트 파일을 제공한다.
  2. ② 이번에는 BadDomain.com에 있는 데이터를 받기 위해 페이지는 XMLHttpRequest를 사용해서 BadDomain.com에 있는 데이터를 요청한다.
  3. ③ 브라우저는 이 요청을 페이지와 다른 도메인으로 생각하여 차단하고 요청을 거부한다.
  4. ④ BadDomain.com 서버는 이 요청을 절대 보지 못한다. 브라우저의 보안 정책이 이를 차단하기 때문이다.

JSONP 개요

JSONP는 <script> 태그를 사용해서 JSON 객체를 회수하는 하나의 방법이며 또한 XMLHttpRequest로 발생하는 동일 근원 보안 문제를 회피하면서 데이터(JSON 객체 형식의 데이터)를 회수하는 방법이다.

| JSONP의 작동방식

			<script type="text/javascript" src="http://gumball.wickedlysmart.com/?callback=updateSales"></script>
		
  1. ① 이 스크립트의 원천은 JSON 데이터를 공급할 웹 서비스의 URL이다.
  2. ② 브라우저가 페이지에서 <script> 요소를 만나면 src에 명기된 URL에 HTTP 요청을 전송한다.
  3. ③ 다른 HTTP 요청과 동일하게 서버는 이 요청을 처리하고 응답으로 JSON을 돌려 보내는데 서버가 JSON 문자열을 되돌려 보내기 전에 updateSales를 호출하듯이, 이를 함수 호출로 감싼다.
  4. ④ JSON 응답을 파싱하고 해석할 때 함수 호출이 감싼다. 따라서 이 함수가 호출되면 JSON 문자열로 만든 객체가 전달된다.
웹서비스는 콜백 함수를 명시하도록 한다.

일반적으로 웹 서비스는 호출되길 원하는 함수를 명시하는 것을 허용하고 있다. URL을 명시할 때 다음과 같이 맨 끝에 매개변수 하나를 추가한다.

			<script type="text/javascript" src="http://gumball.wickedlysmart.com/?callback=updateSales"></script>
		

위에서 callback이란 URL 매개변수를 추가했는데, 자바스크립트가 생성될 때 updateSales 함수를 사용하라는 의미이다.

웹서비스는 데이터를 돌려주기 전에 객체 형태의 JSON을 품고 있는 updateSales를 사용한다. 일반적으로 웹서비스는 이 매개변수를 콜백(callback)이라고 부른다.

JSONP를 사용해서 위 예제를 다음과 같이 수정할 수 있다.

  1. ① XMLHttpRequest 코드 부분을 제거한다.
  2. ② updateSales 함수가 문자열이 아닌 객체를 받도록 해야 한다.
    					//<script> 요소를 통해서 회수되는 JSON은 더 이상 문자열 형태가 아닌 자바스크립트 객체이다. 
    					//그러므로 매개변수를 responseText 대신 sales로 바꾼다.
    					function updateSales(sales){
    						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 + "에서 검블을" + sale.sales + " 개 팔았습니다."
    							salesDiv.appendChild(div);
    						}
    					}
    				
  3. ③ 실제 데이터를 회수하도록 <script>를 추가한다.
    					...
    					<h1>마이티 검블 판매</h1>
    
    					<div id="sales"></div>
    
    					<script type="text/javascript" src="http://gumball.wickedlysmart.com/?callback=updateSales"></script>
    					//callback 매개변수에 updateSales 함수를 명시해서 updateSales 함수 호출로 JSON을 감싼다.
    
    					</body>
    				

    실행화면) http://mylko72.maru.net/jquerylab/html5/myGumble3.html

| 동적으로 JSONP 만들기

데이타가 지속적으로 갱신된 화면을 보고 싶다면 setInterval 메서드를 사용해서 특정 시간마다 함수 핸들러를 호출하는 타이머를 설정하고 자바스크립트 코드를 사용해서 새 &script> 요소를 생성하여 DOM에 추가하면 더 많은 데이터를 회수 할 수 있다.

1단계 : script 요소 처리

일단 HTML에 있는 <script> 요소를 제거한다.

<script type="text/javascript" src="http://gumball.wickedlysmart.com/?callback=updateSales"></script>

2단계 : 타이머를 설정한다.

지속적으로 갱신된 화면을 보고 싶다면 3초마다 JSONP를 사용해서 데이터를 다시 가져오는 핸들러를 호출해야 한다.

			window.onload=function(){
				setInterval(handleRefresh, 3000);
			}

			function handleRefresh(){

			}
		
3단계 : JSONP 재구축

페이지가 로드된 후가 아닌 핸들러가 호출될때마다 JSONP를 사용해서 데이터를 가져와야 한다. 이를 위해 &scipt> 요소를 DOM에 동적으로 새로 추가해야 한다.

- 먼저 JSON URL을 설정한다.
			function handleRefresh(){
				var url = "http://gumball.wickedlysmart.com/?callback=updateSales"
			}
		
- 다음으로 새로운 script 요소를 생성한다.
			function handleRefresh(){
				var url = "http://gumball.wickedlysmart.com/?callback=updateSales"
				var newScript = document.createElement("script");
				newScript.setAttribute("src", url);
				newScript.setAttribute("id", "jsonp");
			}
		
- 새로운 script 요소를 DOM에 추가한다.

브라우저는 새로 추가된 script 요소를 보고 JSONP 요청을 만든다.

맨 처음만 제외하고는 handleRefresh가 호출되면 DOM에는 이미 'jsonp'<script>요소가 있다. 이 경우에도 다시 head 요소의 참조를 가져온다. 그리고 이번에는 새로운 script 요소를 추가하는 대신에 기존의 것을 새 것으로 대체한다.

			function handleRefresh(){
				var url = "http://gumball.wickedlysmart.com/?callback=updateSales"
				var newScript = document.createElement("script");
				newScript.setAttribute("src", url);
				newScript.setAttribute("id", "jsonp");

				var oldScript = document.getElementById("jsonp");	//<script> 요소에 대한 참조를 가져온다.
				var head = document.getElementsByTagName("head")[0]; //<head> 요소에 대한 참조를 가져온다.
				if(oldScript==null){
					head.appendChild(newScript);	//head에 <script> 요소가 있는지 체크하고 존재하지 않으면(참조값이 null이면) 새로운 <script>를 head에 추가한다.
				}else{
					head.replaceChild(newScript,oldScript);  //head에 <script> 요소가 이미 존재한다면 replaceChild 메서드를 사용해서 이전것을 새로운 script로 대체한다.
				}
			}
		
replaceChild
특정요소에 있는 자식 요소를 대체한다. 이전과 신규 자식 요소에 대한 참조가 매개변수로 들어온다.
						head.replaceChild(newElement,oldElement);
						//newElement는 새로운 요소
						//oldElement는 이미 존재하는 요소
					

<script> 요소 전체 대신 src에 새로운 URL만 대체한다면 브라우저는 이를 새로운 script로 보지 않으며, 따라서 JSONP를 가져오는 요청을 만들지 않는다. 브라우저가 강제로 요청을 만들게 하려면 새로운 script를 생성해야 한다. 이 기법을 '스크립트 인젝션'이라고 한다.

4단계 : 브라우저 캐시 처리하기

동일한 URL에서 재차 데이터를 가져오면 브라우저는 효율적인 측면에서 이를 캐시에 저장해 놓고, 동일한 캐시 파일을 반복해서 가져온다. 이를 해결하는 방법은 URL의 끝에 무작위 숫자를 추가하는 것이다. 그렇게 하면 브라우저는 새로운 URL로 인식한다.

			function handleRefresh(){
				var url = "http://gumball.wickedlysmart.com/?callback=updateSales" + "&random=" + (new Date()).getTime();
				...
			}
		

실행화면) http://mylko72.maru.net/jquerylab/html5/myGumble4.html