[JS]ajax : 비동기 통신기법

✨ UI/💛 JS

[JS]ajax : 비동기 통신기법

뉴이 NUEY 2024. 12. 29. 03:08

ajax
Asynchronous Javascript And Xml

우리가..구글이나 네이버에서 뭔가를 검색하면 검색결과창이 나오잖아요.
에이젝스는 창이 바뀌지 않고 위처럼 데이터를 가져올 수 있습니다.
이를 비동기 통신 기법이라고 합니다.

API Docs
https://api.jquery.com/jQuery.ajax/

json 표현 기법을 사용합니다.

2024.12.28 - [✨ UI/💛 JS] - [JS]JSON

url : 통신할 서버나 파일 주소.
method : get / post 중 선택.
async : default: true (false는 동기식).
dataType : 통신이 성공하면 리턴받을 data의 type (text, xml, json, ...)
success : (위 네개를 올바르게 적어) 통신 성공했을 때 실행할 코드를 적어줍니다.
- 여기서 function(data) : data는 서버에서 전달받은 데이터입니다.
error : 에러 시 실행.

🌟 ajax는 통신 실패는 에러가 아니라, 실패 이유를 알 수 없습니다.
만약 통신 실패 시 url, method, async, dataType 이 네가지만 다시 확인하면 됩니다.

전달받은 데이터

전체코드

<!DOCTYPE html>
<html lang="ko">
<head>
    <meta charset="UTF-8">
    <title>에이젝스</title>
    <script type="text/javascript" src="/Java_Study_001/src/main/webapp/common/js/lib/jquery-3.7.1.min.js"></script>
    <script type="text/javascript">
        $(function(){
            $("#emp_search").click(function(){
                let empid = $("input[name=empid]").val();
                
                if (!isNaN(empid) && empid.length > 2){
                    $.ajax({
                        url: "./emplist.xml",   // 통신할 서버 or 페이지
                        method: "get",					
                        async: true,            // 비동기 여부 (false는 동기식)
                        dataType: "xml",        // 리턴받을 데이터 타입
                        success: function(data){			
                                    let empInfo = $(data).find("EMPLOYEE_ID:Contains("+empid+")").parent();
                                    
                                    if (empInfo.is("ROW")){
                                        $("table input").each(function(i){
                                            $(this).val($(empInfo).children().eq(i).text());
                                        });
                                }
                        },
                        error: function(request, error){	
                            alert("code: " + request.status+"\n" +
                                "message: " + request.responseText + "\n" +
                                "error: " + error);
                        }
                    });
                } 
                // if문 입력값 미충족이 뜰 경고창
                else {
                    alert("사원번호를 다시한번 확인해 주세요!");
                }
            });
        });
    </script>
</head>
<body>
    <h1>데이터 가져오기(비동기)</h1>
	
	<fieldset>
		<legend>사원정보 조회</legend>
		<input type="text" name="empid" />
		<input type="button" id="emp_search" value="조회" />
	</fieldset>
	
	<table>
		<tr>
			<th>사원번호</th>
			<td><input type="text" name=""  /></td>
		</tr>
		<tr>
			<th>이름</th>
			<td><input type="text" name=""  /></td>
		</tr>
		<tr>
			<th>이메일</th>
			<td><input type="text" name=""  /></td>
		</tr>
		<tr>
			<th>전화번호</th>
			<td><input type="text" name=""  /></td>
		</tr>
		<tr>
			<th>입사일</th>
			<td><input type="text" name=""  /></td>
		</tr>
    </table>
</body>
</html>

저작자표시 비영리 변경금지

'✨ UI > 💛 JS' 카테고리의 다른 글

[JS][jQuery] $ 제이쿼리란? 적용/사용법 (0)	2024.12.28
[JS]JSON (0)	2024.12.28
[JS]Window 대화형 함수 (0)	2024.12.27
[JS]html 추가/수정하기(+버튼 비활성화, 속성변경) (1)	2024.12.27
[JS]함수의 종류(익명/화살표/클로저) (0)	2024.12.26

현재글[JS]ajax : 비동기 통신기법

분류 전체보기 (470)

🍃 Spring (29)

☕ JAVA (114)

🐍 Python (41)

✨ UI (33)

😼 Git (3)

☁ Network (10)

💬 프로그래밍 표현식 (2)

🕸 Algorithm (84)

📜 CleanCode (24)

🛠 도구 (53)

💾 Data Base (1)

[ERROR] (5)

📑 개발 사전 (35)

🏙 취직 & 업무 (5)

♥ Life (20)

❔ (1)

Nuey.log

[JS]ajax : 비동기 통신기법

'✨ UI > 💛 JS' 카테고리의 다른 글

'✨ UI/💛 JS'의 다른글

티스토리툴바

[JS]ajax : 비동기 통신기법

'✨ UI > 💛 JS' 카테고리의 다른 글

'✨ UI/💛 JS'의 다른글

관련글

티스토리툴바