Ajax는 "Asynchronous JavaScript and XML"의 약자로 대화형 웹 애플리케이션을 만들기 위한 웹 개발 기술을 말합니다. Ajax 기술은 현재 JavaScript 스크립트를 통해 브라우저에서 사용할 수 있는 모든 기술의 모음입니다. Ajax는 이러한 모든 기술을 새로운 방식으로 사용하여 웹 개발의 기존 B/S 스타일을 활성화합니다.
Ajax 기술 중 핵심 기술은 XMLHttpRequest이다. 원래 명칭은 XMLHTTP이다. 이는 마이크로소프트가 개발자의 요구를 충족시키기 위해 1999년 IE5.0 브라우저에서 처음 출시한 것이다. 나중에 이 기술은 위 사양에 따라 XMLHttpRequest로 명명되었습니다. 이것이 Ajax 기술을 독특하게 만드는 이유입니다. 간단히 말해서, XMLHttpRequest는 브라우저에서 실행되는 JavaScript 스크립트가 페이지 내의 서버와 통신할 수 있는 수단을 제공합니다. 페이지 내의 JavaScript는 페이지를 새로 고치지 않고도 서버에서 데이터를 얻거나 서버에 데이터를 제출할 수 있습니다. XMLHttpRequest의 출현은 웹 개발에 새로운 가능성을 제공하고 심지어 웹 애플리케이션이 무엇으로 구성되어 있는지에 대한 사람들의 관점을 완전히 바꿔 놓았습니다. 이를 통해 우리는 완전히 새로운 방식으로 웹 개발을 수행하고 사용자에게 더 나은 대화형 경험을 제공할 수 있습니다.
전통적인 웹 개발과 달리 Ajax는 웹 애플리케이션을 정적 페이지 기반 방식으로 보지 않습니다. Ajax 관점에서 웹 애플리케이션은 소수의 페이지로 구성되어야 하며 각 페이지는 실제로 더 작은 Ajax 애플리케이션입니다. 각 페이지에는 JavaScript를 사용하여 개발된 일부 Ajax 구성 요소가 포함되어 있습니다. 이러한 구성 요소는 XMLHttpRequest 개체를 사용하여 서버와 비동기식으로 통신합니다. 서버에서 필요한 데이터를 얻은 후 DOM API를 사용하여 페이지 콘텐츠의 일부를 업데이트합니다. 따라서 Ajax 애플리케이션과 기존 웹 애플리케이션 사이에는 세 가지 주요 차이점이 있습니다.
1. 전체 페이지를 새로 고치지 않고 페이지 내에서 서버와 통신합니다.
2. 비동기 모드를 사용하여 사용자 작업을 중단하지 않고 서버와 통신하고 더 빠른 응답 기능을 갖습니다.
3. 신청서는 단 몇 페이지로 구성됩니다. 대부분의 상호 작용은 페이지 내에서 완료되므로 전체 페이지를 전환할 필요가 없습니다.
Ajax는 웹 애플리케이션을 더욱 동적으로 만들고, 더 높은 지능을 제공하며, 풍부한 표현 기능을 갖춘 Ajax UI 구성 요소를 제공한다는 것을 알 수 있습니다. 이러한 새로운 유형의 웹 애플리케이션을 RIA(Rich Internet Application) 애플리케이션이라고 합니다.
앞부분은 AJAX 기술을 모르는 독자들이 AJAX 기술을 빨리 이해할 수 있도록 인터넷에서 찾은 AJAX 소개에 대한 정보입니다. 다음으로 제가 그동안 사용해왔던 AJAX 기술과 기법을 소개하겠습니다. 실제 개발 과정 .
AJAX 기술을 사용할 때 가장 중요한 것은 XMLHttpRequest 객체를 생성하는 것입니다. 제가 가장 일반적으로 사용하는 방법 중 하나는 이 객체를 생성하는 방법에 대한 많은 정보입니다.
함수 createXMLHttpRequest() {
var xmlhttp;
노력하다 {
xmlhttp = new ActiveXObject('Msxml2.XMLHTTP');
} 잡기(e) {
노력하다 {
xmlhttp = new ActiveXObject('Microsoft.XMLHTTP');
} 잡기(e) {
노력하다 {
xmlhttp = 새로운 XMLHttpRequest();
} 잡기(e) {
Alert("XMLHttpRequest 객체 생성에 실패했습니다!");
}
}
}
xmlhttp를 반환;
}
아래에는 몇 가지 예와 이러한 예를 통해 배울 수 있는 내용이 나열되어 있습니다.
다음 코드는 특정 항목을 추가할 때 해당 항목이 데이터베이스에 이미 존재하는지 확인하는 방법의 예입니다.
<input type="text" style="width:100%" class="noEmptyInput" name="segment10" value="<%=segment10%>" maxlength="16" onblur="do_verify();">
함수 do_verify() {
var 세그먼트10 = document.mainFrm.segment10.value;
var InventoryItemId = document.mainFrm.inventoryItemId.value;
// 경고(세그먼트10)
xmlHttp = createXMLHttpRequest();
var url = "/servlet/com.sino.ies.inv.maintenance.servlet.ItemMaintainServlet?forward=doVerify&segment10=" + 세그먼트10 + "&inventoryItemId=" + InventoryItemId;
xmlHttp.onreadystatechange = handlerReadyStateChange;
xmlHttp.open("post", url, true); //데이터를 전송하는 방법에는 GET과 POST가 있는데, POST인 경우에는 다음 문장을 작성해야 합니다.
xmlHttp.setRequestHeader('Content-type', 'application/x-www-form-urlencoded');
xmlHttp.send(null);
}
함수 handlerReadyStateChange() {
if (xmlHttp.readyState == 4) {
if (xmlHttp.status == 200) {
if (xmlHttp.responseText == 'Y') {
document.mainFrm.isExist.value = 'Y';
document.getElementById("flag").style.display = "차단"
document.mainFrm.segment10.focus();
} 또 다른 {
document.mainFrm.isExist.value = 'N';
document.getElementById("flag").style.display = "없음"
}
} 또 다른 {
경고(xmlHttp.status);
}
}
}
배경 코드는 다음과 같습니다.
boolean Success = itemDAO.doVerifyItem(); //doVerifyItem은 지정된 항목이 데이터베이스에 이미 존재하는지 확인하는 기본 메서드입니다. 이 메서드는 TRUE를 반환합니다.
PrintWriter out = res.getWriter();
만약 (성공) {
out.print("Y");
}
out.flush();
종료.닫기();
}