본문 바로가기
Java, Spring/14일

14일차 7 - Ajax test 계속

Caprica Six 2012. 9. 20. 09:42

테스트 위한 브라우저 몇개 더 받자.

Opera : http://www.opera.com
Chrome : www.google.com/chrome
Safari : http://www.apple.com/kr/safari/

 

Ajax Test 3

Ajax로 이름을 넘겨주면 메시지 띄워주는거 만들어보자

 

<!DOCTYPE html PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN" 
		"http://www.w3.org/TR/html4/loose.dtd">
<html>
<head>
<meta http-equiv="Content-Type" content="text/html; charset=UTF-8">
<title>Insert title here</title>
<script type="text/javascript" src="httpRequest.js"></script>
<script type="text/javascript">
	function helloToServer() {
		var params = "name="+encodeURIComponent(document.f.name.value);
		sendRequest("hello.jsp", params, helloFromServer, "GET");		
	}
	
	function helloFromServer(){
		if(httpRequest.readyState == 4)	{
			if(httpRequest.status==200){
				alert("서버응답:"+httpRequest.responseText);
			}
		}
	}
</script>
</head>
<body>
<form name="f">
<input type="text" name="name" />
<input type="button" value="입력" onclick="javascript:helloToServer();" />
</form>
</body>
</html>


var httpRequest = null;

function getXMLHttpRequest() {
	//XMLHttpRequest객체 생성을 위한 크로스 브라우징
	if (window.ActiveXObject) {	//explorer 5.0 이후버전
		try {
			//최신버전
			return new ActiveXObject("Msxml2.XMLHTTP");	
		} catch(e) {
			//이전버전
			return new ActiveXObject("Microsoft.XMLHTTP");
		}
	} else if (window.XMLHttpRequest) {	//그외 브라우저
		return new XMLHttpRequest();
	} else {
		return null;
	}	
}

function sendRequest(url, params, callback, method) {
	httpRequest = getXMLHttpRequest();
	
	//Method확인
	var httpMethod = method ? method : 'GET';	//default가 GET이라고
	if (httpMethod != 'GET' && httpMethod != 'POST') {
		httpMethod = 'GET';
	}
	
	//parameter
	var httpParams = (params == null || params == '') ? null : params;
	
	//URL
	var httpUrl = url;	
	if (httpMethod == 'GET' && httpParams != null) {
		httpUrl = httpUrl + "?" + httpParams;		
	}
	
	httpRequest.open(httpMethod, httpUrl, true); 
				//true : 비동기방식
	
	httpRequest.setRequestHeader(
			'Content-Type', 'application/x-www-form-urlencoded');
				//넘어가는 값의 Content-Type을 걸어놓은거야
	
	httpRequest.onreadystatechange = callback;	
			//onreadystatechange : 
			//	readystate 바뀔때마다 callback이라고 받은 함수가 동작되게함
	
	httpRequest.send(httpMethod == 'POST' ? httpParams : null);
				//POST방식일때는 body를 보내고 GET방식이면 null.
}

 

<%@ page language="java" contentType="text/plain; charset=UTF-8"%>
<%
	request.setCharacterEncoding("utf-8");
	String name = request.getParameter("name");
%>
그래, 난 <%= name%>, 절대로 포기하지 않는 남자지!

 

 

 

Ajax Test 4 (제시어)

 

<!DOCTYPE html PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN" 
		"http://www.w3.org/TR/html4/loose.dtd">
<html>
<head>
<meta http-equiv="Content-Type" content="text/html; charset=UTF-8">
<title>제시어 Test</title>
<script type="text/javascript" src="httpRequest.js"></script>
<script type="text/javascript">
	var checkFirst = false;	//처음글자와 바뀌었는지
	var lastKeyword = '';
	var loopSendKeyword = false;
	
	function startSuggest() {
		if (checkFirst == false) {
			setTimeout("sendKeyword();", 500);		
				//sendKeyword 0.5초에 한번씩 호출..
				//(onkeydown이 처음 눌렀을 때만 동작하고 잘 동작안하는 브라우저 때문에)
				
			loopSendKeyword = true;
		}
		checkFirst = true;
	}
	
	function sendKeyword() {
		if (loopSendKeyword == false) return;
		
		var keyword = document.search.keyword.value;
			//현재 문서 form('search')안에 input('keyword')의 값을 읽어와
		if (keyword == '') {
			lastKeyword = '';
			hide('suggest');			
		} else if (keyword != lastKeyword) { //새로운 값일 경우
			lastKeyword = keyword;
			
			if (keyword != '') {
				var params = "keyword="+encodeURIComponent(keyword);
				sendRequest("suggest.jsp", params, displayResult, 'POST');
			} else {
				hide('suggest');
			}
		}
		setTimeout("sendKeyword();", 500);	
	}
	
	function displayResult() {
		
		if (httpRequest.readyState == 4) {
			if(httpRequest.status == 200) {				
				var resultText = httpRequest.responseText;
					// 3|java,java beans,javajava 이런식으로 붙여서 보낼거야...
				var result = resultText.split('|');
				
				var count = parseInt(result[0]);	//앞의 갯수 파싱
				var keywordList = null;	
				if (count > 0) {
					keywordList = result[1].split(',');
					var html = '';
					for ( var i = 0; i < keywordList.length; i++){
						html += "<a href=\"javascript:select('"+
				        keywordList[i]+"')\">"+
				        keywordList[i]+"</a><br/>";
					}
					var listView = document.getElementById('suggestList');
					listView.innerHTML = html;
					
					show('suggest');
				} else {
					hide('suggest');
				}
			} else {
				alert("에러 발생:" + httpRequest.status);
			}			
		}
	}
	
	function select(selectedKeyword) {
		document.search.keyword.value = selectedKeyword;
		loopSendKeyword = false;
		checkFirst = false;
		hide('suggest');
	}
	
	function show(elementId) {
		var element = document.getElementById(elementId);
		if (element){
			element.style.display = '';
		}
	}

	function hide(elementId) {
		var element = document.getElementById(elementId);
		if (element){
			element.style.display = 'none';
		}
	}	
</script>
</head>
<body>
<form name="search">
<input type="text" name="keyword" id="keyword" onkeydown="javascript:startSuggest();" />
<input type="button" value="검색" />
<div id="suggest" style="display:; position: absolute; left: 0px; top: 30px;">
	<div id="suggestList"></div>
</div>
</form>
</body>
</html> 


var httpRequest = null;

function getXMLHttpRequest() {
	if (window.ActiveXObject) {	
		try {
			return new ActiveXObject("Msxml2.XMLHTTP");	
		} catch(e) {
			return new ActiveXObject("Microsoft.XMLHTTP");
		}
	} else if (window.XMLHttpRequest) {
		return new XMLHttpRequest();
	} else {
		return null;
	}	
}

function sendRequest(url, params, callback, method) {
	httpRequest = getXMLHttpRequest();
	
	var httpMethod = method ? method : 'GET';
	if (httpMethod != 'GET' && httpMethod != 'POST') {
		httpMethod = 'GET';
	}
	
	var httpParams = (params == null || params == '') ? null : params;
	
	var httpUrl = url;	
	if (httpMethod == 'GET' && httpParams != null) {
		httpUrl = httpUrl + "?" + httpParams;		
	}
	
	httpRequest.open(httpMethod, httpUrl, true); 
	httpRequest.setRequestHeader(
			'Content-Type', 'application/x-www-form-urlencoded');
	httpRequest.onreadystatechange = callback;	
	httpRequest.send(httpMethod == 'POST' ? httpParams : null);
}

 

<%@ page language="java" contentType="text/plain; charset=UTF-8" %>
<%@ page import="java.util.List" %>
<%! //<%! - jsp내부에서 method 선언하는 방법. 이제 자바로 만들어서 호출하니까 잘 안써..
	String[] keywords = {
		"AJAX",
		"AJAX 실전 프로그래밍",
		"자바바라",
		"자바 프로그래밍",
		"자바 서버 페이지",
		"자바스터뒤",
		"자바서버",
		"자바캔"	
	}; 
	
	public List search(String keyword) {
		if (keyword == null || keyword.equals(""))
			return java.util.Collections.EMPTY_LIST; //공백리턴
		keyword = keyword.toUpperCase();
		List result = new java.util.ArrayList(); 
		for ( int i=0; i<keywords.length; i++) {
			if (((String)keywords[i]).startsWith(keyword)) {
				result.add(keywords[i]);
			}
		}
		return result;
	}
%>
<%
request.setCharacterEncoding("utf-8");
String keyword = request.getParameter("keyword");
List keywordList = search(keyword);

//plain타입이니까 출력(out.print)하면 데이터값으로 넘어가
out.print(keywordList.size());
out.print("|");
for (int i = 0 ; i < keywordList.size() ; i++) {
	String key = (String)keywordList.get(i);
	out.print(key);
	if (i < keywordList.size() - 1) {
		out.print(",");
	}
}
%>

'Java, Spring > 14일' 카테고리의 다른 글

14일차 4 - Spring, STS(SpringSouce Tool Suite) Download  (0) 2012.09.20
14일차 5 - Ajax (Naver 지도 Open API 사용해보기)  (0) 2012.09.20
14일차 6 - Ajax test2  (0) 2012.09.20

'Java, Spring/14일' Related Articles

티스토리툴바