집 > 기사 > 웹 프론트엔드 > Ajax 기술원리 3점 요약_AJAX 관련

Ajax 기술원리 3점 요약_AJAX 관련

亚连원래의: 2018-05-25 15:14:241323검색

이 글은 주로 Ajax의 기술적 원리를 3가지로 요약한 내용을 소개합니다. 필요한 친구들은

ajax: Asynchronous Javascript and XML Asynchronous Javascript and XML을 참고하세요.

은 대화형 웹 애플리케이션을 만들기 위한 웹 개발 기술입니다.

1.0 장점:
1.1 비동기 모드를 통해 사용자 경험을 향상시킵니다.
1.2 브라우저와 서버 간의 전송을 최적화하여 불필요한 데이터 왕복 및 대역폭 사용량을 줄입니다. ㅋㅋㅋ 측면에서는 원래 서버가 부담했던 공유의 일부를 차지하므로 사용자 수가 많은 경우 서버 부하가 줄어듭니다.

2.0 작동 원리

Ajax의 핵심은 Javascript 개체 XmlHttpRequest입니다. 이 객체는 IE5에서 처음 참조되었으며 비동기 요청을 지원하는 기술입니다. XmlHttpRequest를 사용하면 사용자를 차단하는 대신 Javascript를 사용하여 서버에 요청하고 응답을 처리할 수 있으므로 새로 고침이 없는 효과를 얻을 수 있습니다.

브라우저 간의 차이로 인해 XmlHttpRequest 객체를 생성하는 방식에도 차이가 있습니다(주로 IE와 다른 브라우저 간의 차이점).
　2.1 비동기 요청을 생성하는 보다 일반적인 방법:

function CreateXmlHttp() {
//非IE浏览器创建XmlHttpRequest对象的方法
if (window.XmlHttpRequest) {
        xmlhttp = new XmlHttpRequest();
    }
//IE浏览器创建XmlHttpRequest对象的方法
if (window.ActiveXObject) {
try {
            xmlhttp = new ActiveXObject("Microsoft.XMLHTTP");
        }
catch (e) {
    try {
                xmlhttp = new ActiveXObject("msxml2.XMLHTTP");
             }
    catch (ex) 
            { }
        }
    }
}

　2.2 XmlHttpRequest 관련 속성:

　 onreadystatechange 상태가 변경될 때마다 트리거되는 이벤트에 대한 이벤트 핸들러입니다.

　 responseText 서버 프로세스에서 반환된 데이터의 문자열 형식입니다.

　 responseXML 서버 프로세스에서 반환된 DOM 호환 문서 데이터 개체입니다.服务 일반적인 404(찾을 수 없음) 및 200(준비)과 같이 서버에서 반환된 숫자 코드

상태 코드의 문자열 문자열 정보와 함께 제공되는 상태 텍스트

ReadyState 개체 상태

0(초기화되지 않음) 객체가 생성되었지만 아직 초기화되지 않았습니다 (open 메소드가 아직 호출되지 않았습니다)

　　　1 (초기화) 객체가 생성되었지만 아직 전송 메소드가 호출되지 않았습니다

　　2 (데이터 전송 중) 전송 메소드 호출했는데 현재 상태와 http 헤더를 알 수 없습니다

　　3 (데이터 전송 중) 응답 및 http 헤더가 불완전하므로 responseBody 및 http 헤더를 통해 데이터의 일부를 가져오면 오류가 발생합니다. responseText.

　　　4 (완료) 이때 responseXml 및 responseText를 통해 완전한 응답을 얻을 수 있습니다. 2.3 간단한 데모 예:

function SendAsyncRequest() {
var data = document.getElementById("XXId").value;
    CreateXmlHttp();  //创建XmlHttpRequest对象
if (!xmlhttp) {         //判断对象是否创建成功
       alert("创建xmlhttp对象异常！");
    return false;
    }
    xmlhttp.open("POST", url, false);   //开始发送异步请求
    xmlhttp.onreadystatechange = function () {
  if (xmlhttp.readyState == 4 && xmlhttp.status == 200 ) {
            document.getElementById("XXShowId").innerHTML = xmlhttp.ResponseText;   //数据接收完毕
        }
    }
    xmlhttp.send();   
}

3.0 단점:

1. 브라우저 뒤로 버튼의 정상적인 동작입니다. 페이지를 동적으로 업데이트한 후에는 이전 페이지 상태로 돌아갈 수 없습니다.

2. Ajax의 기본 엔진으로 Javascript를 사용하기 때문에 Javascript의 호환성이 그다지 좋지 않습니다. (물론 Jquery와 같은 널리 사용되는 JavaScript 라이브러리는 이러한 문제를 크게 개선했으며 Ajax 호출도 훨씬 더 편리해졌습니다. 이 기사에서는 Ajax의 기본 구현 원칙만 간략하게 설명합니다.)

위 내용은 제가 여러분을 위해 정리한 내용입니다. 앞으로 도움이 되길 바랍니다.

Ajax 기술원리 3점 요약_AJAX 관련

관련 기사