아약스를 어떻게 사용하나요? Ajax 작업 단계-JS 튜토리얼-php.cn

아약스를 어떻게 사용하나요? Ajax 작업 단계

青灯夜游

풀어 주다： 2018-11-08 14:46:26

원래의

2771명이 탐색했습니다.

Ajax를 어떻게 사용하나요? 이 기사에서는 Ajax 작업을 소개하고 Ajax 작업 단계를 이해할 수 있도록 돕습니다. 도움이 필요한 친구들이 참고할 수 있기를 바랍니다.

먼저 Ajax의 동작 단계를 요약하고, 각 단계가 어떻게 수행되는지 자세히 소개하겠습니다.

1. 클라이언트 이벤트 호출

2. XMLHttpRequest 객체 생성

3. XMLHttpRequest 객체를 구성합니다.

4. XMLHttpRequest 개체는 웹 서버에 비동기 요청을 보냅니다.

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

6. XMLHttpRequest 객체는 callback() 함수를 호출하고 결과를 처리합니다.

7. HTML DOM을 업데이트하세요.

Ajax 작업을 구현하기 위해 이러한 단계를 단계별로 구현해 보겠습니다.

Call Client Events

JavaScript 함수는 이벤트의 결과로 호출됩니다.

예:

<input type =“text”size =“20”id =“userid”name =“id”onkeyup =“validateUserId（）;”>

로그인 후 복사

설명:

JavaScript 함수인 verifyUserId()는 ID가 "userid"로 설정된 입력 양식 필드의 onkeyup 이벤트에 대한 이벤트 핸들러로 매핑됩니다.

XMLHttpRequest 객체 생성

var ajaxRequest;  // 使Ajax成为可能的变量！
function ajaxFunction() {
   try {
      // Opera 8.0+, Firefox, Safari
      ajaxRequest = new XMLHttpRequest();
   } catch (e) {
   
      // Internet Explorer浏览器
      try {
         ajaxRequest = new ActiveXObject("Msxml2.XMLHTTP");
      } catch (e) {
      
         try {
            ajaxRequest = new ActiveXObject("Microsoft.XMLHTTP");
         } catch (e) {
      
            alert("Your browser broke!");
            return false;
         }
      }
   }}

로그인 후 복사

XMLHttpRequest 객체 구성

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

function validateUserId() {
   ajaxFunction();
   
   // 这里的processRequest（）是回调函数。
   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();
   
   // 这里的processRequest（）是回调函数。
   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 문서가 포함된 결과를 반환합니다.

서버 측 스크립트는 모든 언어로 구현될 수 있지만 해당 논리는 아래와 같습니다.

1. 클라이언트로부터 요청을 받습니다.

2. 클라이언트의 입력을 구문 분석합니다.

3. 처리가 필요합니다.

4. 출력을 클라이언트로 보냅니다.

서블릿을 작성한다고 가정한다면 이것은 코드 조각입니다.

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 객체는 XMLHttpRequest 객체의 ReadyState 상태가 변경될 때 processRequest() 함수를 호출하도록 구성됩니다. 이제 이 함수는 서버로부터 결과를 수신하고 필요한 처리를 수행합니다. 다음 예제와 같이 웹 서버의 반환 값에 따라 message 변수를 true 또는 false로 설정합니다.

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

로그인 후 복사

HTML DOM 업데이트

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

1. JavaScript는 DOM API를 사용하여 페이지의 모든 요소에 대한 참조를 얻습니다.

2. 참조할 요소를 얻는 데 권장되는 방법은 전화입니다.

document.getElementById("userIdMessage"),

로그인 후 복사

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

예를 들어보세요:

js code:

   <!--
   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 (userMessageElement.childNodes[0]) {
         userMessageElement.replaceChild(messageBody, userMessageElement.childNodes[0]);
      } else {
         userMessageElement.appendChild(messageBody);
      }
   }
   -->

로그인 후 복사

html code: