첫 하이브리드 앱(Ajax JSONP을 이용한 비동기 서버 호출)
첫 하이브리드 앱(Ajax JSONP을 이용한 비동기 서버 호출)
Mac 환경설정 > Mac cordova설치 및 Eclipse 연동에서 작성한 helloworld Project를 이용하여 로그인 페이지를 작성하겠습니다.
흐름은 아래 그림과 같으며 서버는 로컬에서 Eclipse로 구동하여 테스트 했습니다.
소스코드는 cordova3.0.5을 이용하여 생성했습니다.
Project Folder
Xcode
안드로이드(Eclipse)
1.login.html페이지 작성.
화면
소스코드
<!doctype html>
<html>
<head>
<meta charset="UTF-8">
<title>Untitled Document</title>
<link rel="stylesheet" href="./css/jquery.mobile-1.3.2.min.css" />
<script src="./js/jquery-1.9.1.js"></script>
<script src="./js/jquery.mobile-1.3.2.js"></script>
<script src="./js/common.js"></script>
<script type="text/javascript">
$(document).on( 'click', '#checkLogin', function(){
checkLogin($('#name').val(),$('#password').val());
});
function checkLogin(id,pass) {
var params = {ID:id
,PASS:pass
,AUTOLOGIN:'N'
};
$.ajax({
type: 'GET',
url: "http://172.16.1.50:8080/myweb/cb.jsp",
data : params,
contentType: "Content-Type: application/javascript",
dataType: "jsonp",
jsonp : "callback",
jsonpCallback: "jsonpCallback",
error: function (xhr, ajaxOptions, thrownError) {
alert("Error: " + xhr.status + "\n" +
"Message: " + xhr.statusText + "\n" +
"Response: " + xhr.responseText + "\n" + thrownError);
}
});
}
function jsonpCallback(data){
// alert('jsonpCallback1:___'+JSON.stringify(data));
if(data.RESULT=='2'){
$.mobile.changePage('./main.html');
}else{
alert('not user... please retry..');
}
}
</script>
</head>
<body>
<div id="test-page" data-role="page">
<div data-role="header">
<h1><a data-ajax="false" href="/">Login</a></h1>
</div>
<div data-role="content">
<div data-role="fieldcontain">
<label for="name">Name:</label>
<input id="name" type="email" name="name" />
</div>
<div data-role="fieldcontain">
<label for="password">Password:</label>
<input id="password" type="password" name="password" />
</div>
</div>
<button type="button" id="checkLogin" name="checkLogin" >LOGIN</button>
</div>
</body>
</html>
2.main.html 페이지 작성.
<!DOCTYPE html>
<html>
<head>
<meta charset="UTF-8">
<title>Insert title here</title>
</head>
<body>
Main page....
</body>
</html>
3.Server Module 작성
Menu Bar > File > New > Dynamic Web Project 을 선택하여 새로운 web프로젝트를 생성합니다.
그리고 WebContent하위에 cb.jsp파일을 생성하고 아래와 같이코딩을 합니다.
<%@ page language="java" contentType="text/html; charset=UTF-8" pageEncoding="UTF-8"%>
<%
String cb = request.getParameter("callback");
String id = request.getParameter("ID");
String pass = request.getParameter("PASS");
String auto = request.getParameter("AUTOLOGIN");
/*
login check..
if login OK return '2'
else '1'
*/
String result = "2";
%>
<%=cb %>({'RESULT':'<%=result %>'})
마지막으로config.xml의 access 설정을 변경합니다.
프로젝트의 config.xml을 열어서 <access origin="172.0.0.1*" />이부분을
<access origin="*" />로 변경하여 모든 접속을 허용하도록 합니다.
위치는 Xcode는 프로젝트/config.xml(프로젝트/www/config.xml이 아님)
android Eclipse는 프로젝트/res/xml/config.xml 찾아서
을 변경합니다.
이제 Xcode에서 프로젝트 실행을 클릭하고 로그인하여 정상적으로 되는지 확인하자
이렇게 메인 페이지까지 나오면 정상적으로 된것이다 ..
이제 안드로이드도 확인을 해봅시다.
프로젝트 > Debug As > Android Application을 선택 합니다.
테스용디바이스를 선택 합니다.
이미 구동중인 device가 있으면 아래와 같이 화면에 보이고 아니면 아래의 "Launch a new Android Virtual Device"에서 선택하여 실행합니다.
안드로이드도 정상적으로 로그인되는것을 확인 합니다.
'5.하이브리드 앱 > 개발' 카테고리의 다른 글
| IOS iphone cordova phonegap status bar(폰갭 코드바 제목과 겹치는 문제 해결) (0) | 2013.12.17 |
|---|---|
| Text 입력시 키보드 위로 텍스트 박스 올리기 설정 (0) | 2013.10.29 |
| Google Cloud Messaging 서비스를 이용한 Push 정리 (0) | 2013.10.07 |
| IOS Simulator에 사진 넣기 (0) | 2013.09.22 |
| PhoneGap(cordova) api로 하드웨어 접근하기 (0) | 2013.09.10 |
