728x90
반응형
<!DOCTYPE html>
<html>
<head>
<meta charset="UTF-8">
<title>helloAjax.html</title>
<script type="text/javascript">
var xhr;
function two() {
xhr = first();
var b = document.myform.title.value;
var url = "hello.jsp?title="+b;
xhr.onreadystatechange = display;
xhr.open("GET" ,url , true);
xhr.send(null);
}
function first(){
return XMLHttpRequest();
}
function display(){
if(xhr.readyState==4){
if( xhr.status==200){
var str = xhr.responseText;
document.getElementById("msg").innerHTML= str;
}
}
}
</script>
</head>
<body>
<div id="msg">
<form name="myform" method="get">
<b>아이디:</b>
<input type="text" name="title" id="title" value="hb">
<input type="button" onclick="two()" value="Ajax전송">
</form>
<br>
<img src="images/a3.png">
</div>
</body>
</html>
<%@ page language="java" contentType="text/html; charset=UTF-8" pageEncoding="UTF-8"%>
<!DOCTYPE html>
<html>
<head>
<meta charset="UTF-8">
<title> [hello.jsp ] </title>
<style type="text/css">
* { font-size:24pt; }
</style>
</head>
<body>
<%
String data = request.getParameter("title");
if( data=="hb" || data.equals("hb")){
%>
<font size=6 color=blue >
<b>
<%=data%> 로그인 성공!
</b>
</font>
<img src="images/bt_login.gif">
<%
}else{
response.sendRedirect("index.jsp");
}
%>
</body>
</html>
onclick ? 버튼이 눌리면 실행되는 two()
first 를 호출한다
first 에서는 XMLHttpRequest() 를 반환해준다.
반환 받아 xhr 에 저장해두자
입력 창에 있는 값을 가지고 와서 b에 저장
입력 받은 값을 title 에 저장해서 hello.jsp 문서에 보낸다.
display 를 호출
var code = xhr.readyState;
0 : uninitialize
1 : loading
2 : loaded
3 : interactive
4 : complete
var status = xhr.srarus;
200 : complete
404 : Not Found
500 : Syntax Error
상태가 정상이라면
getElementById ("msg") 에 담아둔다?
"msg" 는 div 의 id 를 뜻하는데
open 을 이용해서 실행한다.
첫번째 매개인자 get 은 get 방식을 사용하겠다는 의미이고
두번째 매개인자는 주소를 입력.
세번째는 비동기 방식을 할 것인지 여부를 입력한다.
보낼 값은 없기 떄문에 send 는 null 로 설정.
그러면 hello.jsp 를 호출하게 되는데
시작할 때 주소 값이
이동한 뒤에도 같다.
잠깐 데리고 오는 느낌인거 같다.
이렇게 이해하면 될꺼 같다.
onreadystatechange = 언제든지 시작 할 수 있도록 준비된 상태!
728x90
반응형
'개발중 > JavaScript' 카테고리의 다른 글
| 실시간 뉴스 (이미지) (0) | 2020.08.18 |
|---|---|
| AJAX 응용 (0) | 2020.08.14 |
| ER 방식으로 IF 문(SELECT) (0) | 2020.08.12 |
| ER 방식으로 값 전달 ( 연산 ) (0) | 2020.08.12 |
| parameter error check (0) | 2020.08.12 |
