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 객체를 더 자세히 살펴 보겠습니다.