AJAX의 워크플로우는 무엇입니까? Ajax 워크플로 소개(예제 포함)

이 글에서는 주로 ajax의 작업 흐름과 ajax의 원리, 일반적으로 사용되는 몇 가지 속성에 대해 설명합니다. 이제 이 글을 함께 살펴보겠습니다.

AJAX는 "Asynchronous JavaScript and"를 의미합니다. XML"(비동기 JavaScript 및 XML).

은 대화형 웹 애플리케이션을 만들기 위한 웹 개발 기술입니다.
XHTML+CSS를 사용하여 정보를 표현합니다.
JavaScript를 사용하여 동적 표시 및 상호 작용을 위해 DOM(문서 개체 모델)을 작동합니다.
데이터 교환 및 관련 작업에 XML 및 XSLT를 사용합니다. 🎜 🎜# 웹 서버와의 비동기 데이터 교환을 위해 XMLHttpRequest 개체를 사용합니다.
JavaScript를 사용하여 모든 것을 하나로 묶습니다.

AJAX 원리: AJAX는 단일 기술을 의미하는 것이 아니라 일련의 관련 기술을 유기적으로 활용하는 것입니다. 그 핵심은 JavaScript 개체 XmlHttpRequest입니다. 이를 통해 JavaScript를 사용하여 사용자를 차단하지 않고 서버에 요청하고 응답을 처리할 수 있습니다. AJAX는 사용자와 서버 사이에 중개자를 도입하는 비동기식 상호 작용 프로세스를 사용하므로 네트워크 상호 작용 프로세스의 처리-대기-처리-대기 단점을 제거합니다. 사용자의 브라우저는 작업을 수행할 때 AJAX 엔진을 로드합니다. AJAX 엔진은 JavaScript로 작성되며 일반적으로 숨겨진 프레임에 숨겨져 있습니다. 사용자 인터페이스를 컴파일하고 서버와 상호 작용하는 일을 담당합니다. AJAX 엔진을 사용하면 사용자와 응용 프로그램 소프트웨어 간의 상호 작용 프로세스가 사용자와 네트워크 서버 간의 통신과 관계없이 비동기적으로 진행될 수 있습니다. 이제 HTTP 사용자 작업을 생성하는 대신 Javascript를 사용하여 AJAX 엔진을 호출할 수 있습니다. 전체 페이지를 다시 로드할 필요가 없는 인메모리 데이터 편집, 페이지 탐색 및 데이터 확인을 AJAX를 사용하여 실행할 수 있습니다. JSP, 개발자 및 최종 사용자에게 눈에 띄는 편리함을 제공할 수 있습니다.

Ajax의 핵심은 XmlHttpRequest 객체이므로 이를 도입해야 합니다.
Common 속성: Onreadystatechange는 다음을 지정합니다. ReadyState 속성 변경 시 이벤트 핸들러 기능. Ajax 요청의 현재 상태를 나타내려면
readyState를 작성하면 됩니다. 읽기 전용 해당 값은 숫자로 표시됩니다.
0은 초기화되지 않았음을 의미합니다. open 메소드가 아직 호출되지 않았습니다
              1은 로드를 의미합니다. open 메소드가 호출되었지만 send 메소드가 아직 호출되지 않았습니다.
2는 로딩이 완료되었음을 의미합니다. 보내기가 호출되었습니다. 요청이 시작되었습니다
3은 상호작용이 진행 중임을 의미합니다. 서버가
응답을 보내고 있습니다.             4는 완료를 의미합니다. 응답이 전송됩니다
ReadyState 값이 변경될 때마다 ReadyStatechange 이벤트가 트리거됩니다.
responseText 응답 정보를 읽기 전용으로 반환합니다. 서버가 보내는 내용에 따라 HTML, XML 또는 일반 텍스트입니다. responseText 속성은 ReadyState 속성 값이 4가 되어 Ajax 요청이 종료되었음을 나타내는 경우에만 사용할 수 있습니다.
ResponseXML 응답 정보를 Xml 문서 개체로 형식화하고 읽기 전용으로 반환합니다. responseXML 속성은 서버가 올바른 헤더 정보와 함께 데이터를 보내는 경우에만 사용할 수 있습니다.
MIME 유형은 text/xml이어야 합니다 status 현재 요청의 http 상태 코드를 반환합니다. 읽기 전용
일반적인 상태 코드 및 의미:
404 페이지 찾을 수 없음( 찾을 수 없음)
403 Forbidden
500 내부 서비스 오류
200 모든 것이 정상입니다(ok)
            304 수정되지 않음(서버는 소스 파일이 수정되지 않았습니다)
XMLHttpRequest 객체에는 서버에서 보낸 상태 코드가 상태 속성에 저장됩니다. 이 값을 200 또는 304와 비교하면 서버가 성공적인 응답을 보냈는지
확인할 수 있습니다. (자세한 내용을 보려면 PHP 중국어 웹사이트 AJAX 개발 매뉴얼 열을 참조하세요. 배우다)

일반적인 방법:
새로운 http 요청을 생성하고 요청 방법, URL 및 확인 정보를 지정합니다.
보내기 http 서버에 요청을 보내고 응답을 받습니다.
SetRequestHeader 요청을 개별적으로 지정 특정 http 헤더
AJAX 작업 흐름:
1 개체 초기화

function   createXmlHttpRequest(){
   var xmlHttp;
   try{    //Firefox, Opera 8.0+, Safari
           xmlHttp=new XMLHttpRequest();
    }catch (e){
           try{    //Internet Explorer
                  xmlHttp=new ActiveXObject("Msxml2.XMLHTTP");
            }catch (e){
                  try{
                   xmlHttp=new ActiveXObject("Microsoft.XMLHTTP");
                  }catch (e){}  
           }
    }
   return xmlHttp;
 }

2 요청 보내기
XMLHttpRequest 개체의 open 및 send 메서드를 호출합니다. 순서대로 open 호출 후에 send 메서드가 호출됩니다. 완료되었습니다.

xmlHttp.open("get","../servlet/RegisterServlet?timeStamp="+new Date().getTime(),true)
xmlHttp.send(null);

send 매개변수가 Post 모드에서 전송되는 경우 서버에 전달하려는 모든 콘텐츠가 될 수 있지만 먼저 setRequestHeader 메소드를 호출하고 MIME 카테고리를 수정해야 합니다.
xmlHttp.setRequestHeader( "Content-Type"," application/x-www-form-urlencoded")
3 서버는 처리된 데이터를 수신하여 반환하고, 반환된 정보를 처리할 이벤트 핸들러를 지정합니다.
ReadyState 속성이 변경될 때마다 XMLHttpRequest 객체에 해당 처리 함수 이름을 할당하기만 하면 됩니다. onreadystatechange 속성을 사용하세요

 xmlHttp.onreadystatechange = function(){            if (xmlHttp.readystate == 4) { 
  if (xmlHttp.status == 200 || xmlHttp.status == 304) {//XMLHttpRequest对成功返回的信息有两种处理方式：//responseText：
  将传回的信息当字符串使用；//responseXML：将传回的信息当XML文档使用，可以用DOM处理。 
        }            }        };

4 클라이언트 수신
5 클라이언트 페이지 콘텐츠 수정

이 글은 여기에서 끝납니다. 자세한 내용을 보려면 PHP 중국어 웹사이트AJAX 사용자 매뉴얼 열에서 알아보기)를 방문하세요. 궁금한 사항이 있으면 아래에 메시지를 남겨주세요.

위 내용은 AJAX의 워크플로우는 무엇입니까? Ajax 워크플로 소개(예제 포함)의 상세 내용입니다. 자세한 내용은 PHP 중국어 웹사이트의 기타 관련 기사를 참조하세요!