AJAX 정리

2016. 11. 23. 10:50ㆍProgramming/JavaScript


AJAX(Asynchronous JavaScript and XML)란 '비동기식 웹 통신'을 말함

웹브라우저와 웹서버가 내부적으로 데이터 통신을 하기 때문에,

서비스 요청시 페이지 일부만 로딩 가능



<AJAX 처리 과정>


1) 이벤트 발생(ex. 버튼 클릭)



2) XMLHttpRequest가 생성됨


1
2
3
var xhttp; //HttpRequest 객체 담을 변수
    if(window.XMLHttpRequest){
        xhttp = new XMLHttpRequest();
cs


3) XMLHttpRequest가 웹서버에 요청 보냄


1
2
xhttp.open("GET","books.xml",true); //접속할 파일 설정
xhttp.send(); //접속, 성공시 onreadystatechange에 선언된 함수가 실행됨
cs


4) 서버가 요청 처리

*통신 성공시 익명 function이 실행됨


1
2
3
4
5
xhttp.onreadystatechange = function(){
     if(this.readyState == 4 && this.status == 200){
        //readyState가 4이면 통신 완료, status가 200이면 통신 성공임
        var xml = this.responseXML; //<=>responseText(response를 String으로 받음)
        test(xml);
cs


5) 서버가 처리된 내용을 웹페이지에 response



<예제 들어가기 전에... AJAX 구성 순서>


1) 출력할 HTML 부분에 ID 붙이기

<tbody class="list"></tbody>


2) ID를 검색해서 변수에 담기

 var tableList = document.querySelector("#memList .list");


3) htmlList에 내용을 담은(function 처리) 후 HTML화

tableList.innerHTML = htmlList; 


4) http(XMLHttpRequest 객체) 구현해 URL에 접속하도록

if(window.XMLHttpRequest){
        http=new XMLHttpRequest();

http.open("GET",url,true);
    http.send();


5) 접속 성공시 실행할 메소드 정리

http.onreadystatechange=function(){
        if(this.readyState==4 && this.status==200){ //접속 성공 여부 확인
            실행할 메소드 넣기


<AJAX 예제 1: ID 중복 검사>



1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
32
33
34
35
36
37
38
39
<%@ page language="java" contentType="text/html; charset=EUC-KR"
    pageEncoding="EUC-KR"%>
<!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=EUC-KR">
<title>아이디 중복체크(AJAX)</title>
</head>
<body>
<h1>AJAX로 checkId.do를 호출해서 db에서 id가 있는지 중복 체크하자.</h1>
<form name="checkIdForm"><!-- form name은 id와 같은 역할(HTML의 유일한 값) -->
    <input type="text" name="userId" value="ichi">
    <button type="button" onclick="checkId(this.form.userId.value)">중복검사</button>
</form>
<div id="checkId"></div>
<script>
    function checkId(userId){
        var http = new XMLHttpRequest();
        var url = "checkId.do?userId="+userId;
        http.onreadystatechange = function(){
            if(this.readyState==4 && this.status==200){
                var checkId = JSON.parse(this.responseText);
                var msg;
                if(checkId['checkId']){
                    msg = '사용중인 아이디입니다.';
                }else{
                    msg = '사용 가능한 아이디입니다.';
                }
                document.getElementById("checkId").innerHTML=msg;
            }
        }
        http.open("GET",url,true);
        http.send();
    }
</script>
</body>
</html>
cs


<AJAX 예제2: MemberList 출력>



1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
32
33
34
35
36
37
38
39
40
41
42
43
44
45
46
47
48
49
50
51
52
53
54
55
56
57
58
59
60
61
<!DOCTYPE html>
<html>
<head>
<meta charset="EUC-KR">
<title>Insert title here</title>
</head>
<body>
<h1>AJAX로 MEMBER List를 불러오자</h1>
<button onclick="loadDoc()">list load()</button>
    <table border="1" id="memList">
    <tbody class="title">
        <tr>
        <th>num</th><th>id</th><th>pwd</th><th>name</th>
        <th>email</th><th>phone</th><th>indate</th><th>admin</th>
        <th>삭제</th>
        </tr>
    </tbody>
    <tbody class="list"></tbody>
</table>
<script>
var loadDoc = function(){
    var http;
    if(window.XMLHttpRequest){
        http=new XMLHttpRequest();
    }else if(window.ActiveXObject){
        http=new ActiveXObject(); //ie6,ie5 or 이클립스 브라우저
    }
    var url = "memList.jdo";
    http.onreadystatechange=function(){
        //보통 this는 window지만 객체 함수 내부에서는 XMLhttpRequest 의미
        if(this.readyState==4 && this.status==200){
            var memList = JSON.parse(this.responseText);
            memListHtml(memList);
        }
    }
    http.open("GET",url,true);
    http.send();
}
var memListHtml = function(memList){
    var tableList = document.querySelector("#memList .list");
    var htmlList = "";
    var length = memList.length;
    for(var i=0;i<length;i++){
        htmlList+="<tr>";
        htmlList+="<td>"+memList[i]["num"]+"</td>";
        htmlList+="<td>"+memList[i]["id"]+"</td>";
        htmlList+="<td>"+memList[i]["name"]+"</td>";
        htmlList+="<td>"+memList[i]["pwd"]+"</td>";
        htmlList+="<td>"+memList[i]["email"]+"</td>";
        htmlList+="<td>"+memList[i]["phone"]+"</td>";
        htmlList+="<td>"+memList[i]["indate"]+"</td>";
        htmlList+="<td>"+memList[i]["admin"]+"</td>";
        htmlList+="<td><a>삭제</a></td>";
        htmlList+="</tr>";
    }
    tableList.innerHTML = htmlList;
}
</script>
</body>
</html>
cs


'Programming > JavaScript' 카테고리의 다른 글

Object Model(자바스크립트 개요), BOM, DOM  (0) 2016.11.28
상속(prototype)  (0) 2016.11.27
JSON 정리  (0) 2016.11.23
함수(Function)  (0) 2016.11.23
문자열, 배열 처리  (0) 2016.11.22

관련글

티스토리툴바