AJAX-액션

이 장에서는 AJAX 작업의 정확한 단계에 대한 명확한 그림을 제공합니다.

AJAX 작업 단계

클라이언트 이벤트가 발생합니다.
XMLHttpRequest 객체가 생성됩니다.
XMLHttpRequest 객체가 구성됩니다.
XMLHttpRequest 객체는 웹 서버에 비동기 요청을합니다.
웹 서버는 XML 문서가 포함 된 결과를 반환합니다.
XMLHttpRequest 객체는 callback () 함수를 호출하고 결과를 처리합니다.
HTML DOM이 업데이트됩니다.

이 단계를 하나씩 수행해 보겠습니다.

클라이언트 이벤트 발생

이벤트의 결과로 JavaScript 함수가 호출됩니다.
예 : validateUserId () JavaScript 함수는 ID가 "userid"로 설정된 입력 양식 필드의 onkeyup 이벤트에 이벤트 핸들러로 매핑됩니다.
<입력 유형 = "텍스트"크기 = "20"id = "userid"이름 = "id"onkeyup = "validateUserId ();">.

XMLHttpRequest 객체가 생성됨

var ajaxRequest;  // The variable that makes Ajax possible!
function ajaxFunction() {
   try {
      // Opera 8.0+, Firefox, Safari
      ajaxRequest = new XMLHttpRequest();
   } catch (e) {
   
      // Internet Explorer Browsers
      try {
         ajaxRequest = new ActiveXObject("Msxml2.XMLHTTP");
      } catch (e) {
      
         try {
            ajaxRequest = new ActiveXObject("Microsoft.XMLHTTP");
         } catch (e) {
      
            // Something went wrong
            alert("Your browser broke!");
            return false;
         }
      }
   }
}

XMLHttpRequest 개체가 구성됨

이 단계에서는 클라이언트 이벤트에 의해 트리거되는 함수를 작성하고 콜백 함수 processRequest ()가 등록됩니다.

function validateUserId() {
   ajaxFunction();
   
   // Here processRequest() is the callback function.
   ajaxRequest.onreadystatechange = processRequest;
   
   if (!target) target = document.getElementById("userid");
   var url = "validate?id=" + escape(target.value);
   
   ajaxRequest.open("GET", url, true);
   ajaxRequest.send(null);
}

웹 서버에 비동기 요청 만들기

소스 코드는 위의 코드에서 사용할 수 있습니다. 굵은 서체로 작성된 코드는 웹 서버에 요청을합니다. 이것은 모두 XMLHttpRequest 객체 ajaxRequest를 사용하여 수행됩니다 .

function validateUserId() {
   ajaxFunction();
   
   // Here processRequest() is the callback function.
   ajaxRequest.onreadystatechange = processRequest;
   
   if (!target) target = document.getElementById("userid");
   var url = "validate?id = " + escape(target.value);
   
   ajaxRequest.open("GET", url, true);
   ajaxRequest.send(null);
}

사용자 ID 상자에 Zara를 입력하고 위의 요청에서 URL이 "validate? id = Zara"로 설정되어 있다고 가정합니다.

웹 서버가 XML 문서를 포함하는 결과를 반환합니다.

모든 언어로 서버 측 스크립트를 구현할 수 있지만 논리는 다음과 같아야합니다.

클라이언트로부터 요청을받습니다.
클라이언트의 입력을 구문 분석하십시오.
필요한 처리를하십시오.
클라이언트에 출력을 보냅니다.

서블릿을 작성할 것이라고 가정하면 여기에 코드가 있습니다.

public void doGet(HttpServletRequest request,
   HttpServletResponse response) throws IOException, ServletException {
   String targetId = request.getParameter("id");
   
   if ((targetId != null) && !accounts.containsKey(targetId.trim())) {
      response.setContentType("text/xml");
      response.setHeader("Cache-Control", "no-cache");
      response.getWriter().write("<valid>true</valid>");
   } else {
      response.setContentType("text/xml");
      response.setHeader("Cache-Control", "no-cache");
      response.getWriter().write("<valid>false</valid>");
   }
}

콜백 함수 processRequest ()가 호출됩니다.

는 XMLHttpRequest 객체는로 상태 변화가있을 때 processRequest라는 () 함수를 호출하도록 구성 readyState가 의 XMLHttpRequest의 개체. 이제이 함수는 서버에서 결과를 수신하고 필요한 처리를 수행합니다. 다음 예제와 같이 웹 서버에서 반환 된 값에 따라 변수 메시지를 true 또는 false로 설정합니다.

function processRequest() {
   if (req.readyState == 4) {
      if (req.status == 200) {
         var message = ...;
...
}

HTML DOM이 업데이트되었습니다.

이것이 마지막 단계이며이 단계에서는 HTML 페이지가 업데이트됩니다. 다음과 같은 방식으로 발생합니다.

JavaScript는 DOM API를 사용하여 페이지의 모든 요소에 대한 참조를 가져옵니다.
요소에 대한 참조를 얻는 데 권장되는 방법은 호출하는 것입니다.

document.getElementById("userIdMessage"), 
// where "userIdMessage" is the ID attribute 
// of an element appearing in the HTML document

이제 JavaScript를 사용하여 요소의 속성을 수정할 수 있습니다. 요소의 스타일 속성을 수정합니다. 또는 하위 요소를 추가, 제거 또는 수정합니다. 여기에 예가 있습니다-

<script type = "text/javascript">
   <!--
   function setMessageUsingDOM(message) {
      var userMessageElement = document.getElementById("userIdMessage");
      var messageText;
      
      if (message == "false") {
         userMessageElement.style.color = "red";
         messageText = "Invalid User Id";
      } else {
         userMessageElement.style.color = "green";
         messageText = "Valid User Id";
      }
      
      var messageBody = document.createTextNode(messageText);
      
      // if the messageBody element has been created simple 
      // replace it otherwise append the new element
      if (userMessageElement.childNodes[0]) {
         userMessageElement.replaceChild(messageBody, userMessageElement.childNodes[0]);
      } else {
         userMessageElement.appendChild(messageBody);
      }
   }
   -->
</script>

<body>
   <div id = "userIdMessage"><div>
</body>

위에서 언급 한 7 단계를 이해했다면 AJAX는 거의 다 끝났습니다. 다음 장에서는 XMLHttpRequest 객체를 더 자세히 살펴 보겠습니다.