AJAX의 작동 방식과 장점 및 단점에 대한 자세한 설명

이 글에서는 Ajax의 작동 원리와 관련 내용을 설명합니다.

1.AJAX는 "Asynchronous JavaScript and XML"(Asynchronous JavaScript and XML)을 의미하며 대화형 웹 애플리케이션을 만들기 위한 웹 개발 기술입니다.

XHTML+CSS를 사용하여 프레젠테이션을 표준화합니다.

데이터 교환 및 관련 작업에 XML 및 XSLT를 사용합니다.

웹 서버와의 비동기 데이터 통신을 위해 XMLHttpRequest 개체를 사용합니다. 객체 모델 동적 표시 및 상호 작용을 수행합니다.

JavaScript를 사용하여 모든 데이터를 바인딩하고 처리합니다.

2. 기존 웹 애플리케이션 상호 작용에는 사용자가 서버에 대한 HTTP 요청을 트리거한 다음 서버가 클라이언트가 제출한 요청을 처리할 때마다 클라이언트에 새 HTHL 페이지를 반환하는 작업이 포함됩니다. 유휴 상태이고 작은 상호 작용이고 서버에서 간단한 데이터 조각만 가져오면 완전한 HTML 페이지가 반환되며 사용자는 매번 전체 페이지를 다시 읽으느라 시간과 대역폭을 낭비하게 됩니다. . 이 접근 방식은 각 응용 프로그램 상호 작용이 서버에 요청을 보내야 하기 때문에 많은 대역폭을 낭비하므로 응용 프로그램의 응답 시간은 서버의 응답 시간에 따라 달라집니다. 이로 인해 기본 앱보다 응답성이 훨씬 떨어지는 사용자 인터페이스가 생성됩니다.

이와 달리 AJAX 애플리케이션은 필요한 데이터만 서버에 보내고 검색할 수 있습니다. 이는 SOAP 또는 기타 XML 기반 웹 서비스 인터페이스를 사용하고 클라이언트에서 JavaScript를 사용하여 서버의 응답을 처리합니다. 서버와 브라우저 간에 교환되는 데이터가 훨씬 적기 때문에 결과적으로 더 반응성이 뛰어난 애플리케이션을 볼 수 있습니다. 동시에 요청을 수행하는 클라이언트 시스템에서 많은 처리 작업이 완료될 수 있으므로 웹 서버의 처리 시간도 단축됩니다.

3. AJAX의 작동 원리: Ajax의 작동 원리는 사용자와 서버 사이에 중간 계층(AJAX 엔진)을 추가하여 사용자 작업과 서버 응답을 비동기화하는 것과 같습니다. 모든 사용자 요청이 서버에 제출되는 것은 아닙니다. 일부 데이터 확인 및 데이터 처리는 Ajax 엔진 자체에 맡겨집니다. 서버에서 새 데이터를 읽어야 한다고 판단되는 경우에만 Ajax 엔진이 서버에 요청을 제출합니다. 그것을 대신하여.

Ajax의 핵심은 JavaScript, XMLHTTPRequest, DOM 개체로 구성됩니다. XmlHttpRequest 개체를 통해 서버에 비동기 요청을 보내고 서버에서 데이터를 얻은 다음 JavaScript를 사용하여 DOM을 작동하고 페이지를 업데이트합니다. 가장 중요한 단계는 서버에서 요청 데이터를 얻는 것입니다. 이러한 객체에 대해 알아봅시다.

(1).XMLHTTPRequest object

Ajax의 가장 큰 기능 중 하나는 페이지를 새로 고치지 않고(새로 고치지 않고 페이지를 업데이트라고도 함) 서버에 데이터를 전송하거나 읽고 쓸 수 있다는 것입니다. XMLHTTP 구성요소 XMLHTTPRequest 객체.

XMLHttpRequest 객체 메소드 설명:

abort(): 현재 요청을 중지합니다.

getAllResponseHeaders(): HTTP 요청의 모든 응답 헤더를 키/값 쌍으로 반환합니다.

getResponseHeader("header"): 문자열을 반환합니다. 지정된 헤더 값

open("method","URL",[asyncFlag],["userName"],["password"]): 서버에 대한 호출을 설정합니다. 메소드 매개변수는 GET, POST 또는 PUT일 수 있습니다. url 매개변수는 상대 URL 또는 절대 URL일 수 있습니다. 이 메소드에는 비동기 여부, 사용자 이름, 비밀번호 등 3가지 선택적 매개변수도 포함됩니다.

send(content): 서버에 요청 보내기

setRequestHeader("header", "value"): 지정된 헤더를 제공된 값으로 설정 . 헤더를 설정하기 전에 open()을 호출해야 합니다. 헤더를 설정하고 요청과 함께 보냅니다('post' 메소드가 필요함)

XMLHttpRequest 객체 속성 설명:

onreadystatechange: 상태 변경을 위한 이벤트 트리거 일반적으로 상태가 변경될 때마다 트리거됩니다. JavaScript 함수

readyState: 요청 상태. 가능한 값은 5가지입니다. 0 = 초기화되지 않음, 객체가 생성되었지만 초기화되지 않음(open 메서드가 호출되지 않음), 1 = 로드 중, 객체가 생성되었으며 send 메서드가 호출되지 않음 , 2 = 로드됨, 전송 메소드가 호출되었지만 현재 상태 및 http 헤더를 알 수 없음 3 = 상호 작용 중에 일부 데이터가 수신되었습니다. 응답 및 http 헤더가 불완전하므로 일부 데이터를 가져올 때 오류가 발생합니다. data through responseBody and responseText. 4 = Completed, 데이터 수신이 완료되고 responseXml 및 responseText를 통해 완전한 응답 데이터를 얻을 수 있습니다.

responseText: 서버의 응답, 반환된 데이터의 텍스트입니다.

responseXML: 서버의 응답은 DOM 호환 XML 문서 개체를 반환합니다. 이 개체는 DOM 개체로 구문 분석될 수 있습니다.

responseBody: 서버에서 반환된 제목(텍스트가 아닌 형식)

responseStream: 서버에서 반환된 데이터 스트림

status: 서버의 HTTP 상태 코드(예: 404 = "파일을 찾을 수 없음") , 200 = "성공" 등)

statusText: 서버가 반환한 상태 텍스트 정보, HTTP 상태 코드의 해당 텍스트(OK 또는 찾을 수 없음(찾을 수 없음) 등)

Ajax 엔진은 실제로 사용자 요청을 처리하고, 서버를 읽고 쓰고, DOM 콘텐츠를 변경하는 데 사용되는 비교적 복잡한 JavaScript 애플리케이션입니다. JavaScript의 Ajax 엔진은 정보를 읽고 대화식으로 DOM을 다시 작성합니다. 이를 통해 웹 페이지를 원활하게 재구성할 수 있습니다. 즉, 페이지가 다운로드된 후 페이지 내용을 변경할 수 있습니다. 그러나 웹 페이지를 정말로 동적으로 만들려면 내부 상호 작용뿐만 아니라 외부로부터의 데이터 수집도 필요합니다. 과거에는 사용자가 DOM을 통해 데이터를 입력하고 웹 페이지의 내용을 변경할 수 있었지만 이제는 XMLHTTPRequest가 허용됩니다. 페이지를 다시 로드하지 않고도 서버에서 데이터를 읽고 쓸 수 있어 사용자 입력이 최소화됩니다.

Ajax는 WEB에서 인터페이스와 애플리케이션을 분리합니다(데이터와 프리젠테이션을 분리했다고도 할 수 있음). 과거에는 둘 사이에 명확한 경계가 없었습니다. 데이터와 프리젠테이션의 분리는 업무 분업에 유리합니다. 직원의 페이지 수정으로 인한 WEB 응용 오류를 제거하고 효율성을 향상시키며 현재 출판 시스템에 더 적합합니다. 또한 서버가 부담한 이전 작업 중 일부를 클라이언트로 전송할 수도 있는데, 이는 클라이언트의 유휴 처리 능력에 도움이 됩니다.

4. AJAX의 장점

<1>. 데이터 업데이트가 필요하지 않습니다.

AJAX의 가장 큰 장점은 전체 페이지를 새로 고치지 않고도 서버와 통신하여 데이터를 유지할 수 있다는 것입니다. 이를 통해 웹 애플리케이션은 사용자 상호 작용에 더 빠르게 응답하고 네트워크를 통해 변경되지 않은 정보를 전송하지 않으므로 사용자 대기 시간이 줄어들고 매우 우수한 사용자 경험을 제공할 수 있습니다.

<2>. 서버와 비동기식으로 통신합니다.

AJAX는 비동기 방식을 사용하여 사용자의 작업을 방해하지 않고 서버와 통신하며 더 빠른 응답 기능을 제공합니다. 브라우저와 서버 간의 통신을 최적화하여 불필요한 데이터 전송, 네트워크의 시간 및 데이터 트래픽을 줄입니다.

<3>. 프런트엔드 및 백엔드 로드 밸런싱.

AJAX는 클라이언트의 유휴 용량을 활용하여 이전에 서버에서 부담했던 작업 중 일부를 클라이언트로 전송하여 처리할 수 있어 서버와 대역폭의 부담을 줄이고 공간 및 광대역 임대 비용을 절약할 수 있습니다. 그리고 서버의 부담을 줄이기 위해 AJAX의 원칙은 "요청 시 데이터 가져오기"로, 중복된 요청과 응답으로 인해 발생하는 서버의 부담을 최소화하고 사이트 성능을 향상시킬 수 있습니다.

<4>. 표준에 따라 폭넓게 지원됩니다.

AJAX는 표준화되고 널리 지원되는 기술을 기반으로 하며 브라우저 플러그인이나 애플릿을 다운로드할 필요는 없지만 고객이 브라우저에서 JavaScript를 실행할 수 있도록 허용해야 합니다. Ajax가 성숙해짐에 따라 Ajax 사용을 단순화하는 일부 프로그램 라이브러리도 나왔습니다. 마찬가지로, JavaScript를 지원하지 않는 사용자에게 대체 기능을 제공하기 위해 또 다른 보조 프로그래밍 기술이 등장했습니다.

<5>. 인터페이스와 애플리케이션을 분리하세요.

Ajax는 WEB에서 인터페이스와 애플리케이션을 분리(데이터와 프리젠테이션을 분리한다고도 할 수 있음)하여 분업과 협력에 유리하고, 비기술 인력의 페이지 수정으로 인해 발생하는 WEB 애플리케이션 오류를 줄이고, 효율성이 뛰어나며 오늘날의 출판 시스템에 더 적합합니다.

5. ajax의 단점

<1>.AJAX는 브라우저 메커니즘을 파괴하는 뒤로 및 기록 기능을 종료합니다.

동적으로 업데이트되는 페이지의 경우 브라우저는 기록에서 정적 페이지만 기억할 수 있기 때문에 사용자는 이전 페이지 상태로 돌아갈 수 없습니다. 완전히 읽힌 페이지와 동적으로 수정된 페이지 사이의 차이는 매우 미미합니다. 사용자는 뒤로 버튼을 클릭하면 이전 작업이 취소될 것이라고 기대하는 경우가 많지만 Ajax 애플리케이션에서는 이것이 불가능합니다.

뒤로 버튼은 표준 웹사이트의 중요한 기능이지만 js에서는 잘 작동하지 않습니다. 이는 Ajax로 인해 발생하는 심각한 문제입니다. 사용자가 이전 작업으로 돌아가서 취소하려는 경우가 많기 때문입니다. 그렇다면 이 문제에 대한 해결책은 없을까? 대답은 '예'입니다. Gmail에서 사용되는 Ajax 기술이 이 문제를 해결한다는 것을 알고 있습니다. 하지만 Ajax의 메커니즘은 바뀌지 않습니다. 이를 수행하는 방법은 사용자가 기록에 액세스하기 위해 뒤로 버튼을 클릭할 때 숨겨진 IFRAME을 생성하거나 사용하여 페이지의 변경 사항을 재현하는 것입니다. (예를 들어 사용자가 Google Maps에서 다시 클릭하면 숨겨진 IFRAME에서 검색한 다음 검색 결과를 Ajax 요소에 반영하여 애플리케이션 상태를 당시의 상태로 복원합니다.)

그러나 이 문제는 문제를 해결할 수는 있지만 이로 인해 발생하는 개발 비용은 매우 높으며 Ajax 프레임워크에서 요구하는 신속한 개발에 어긋납니다. 이는 Ajax로 인해 발생하는 매우 심각한 문제입니다.

관련 요점은 동적 페이지 업데이트를 사용하면 사용자가 특정 상태를 즐겨찾기에 저장하기 어렵다는 것입니다. 이 문제에 대한 솔루션도 등장했습니다. 대부분은 URL 조각 식별자(종종 앵커라고 함, URL에서 # 다음 부분)를 사용하여 추적을 유지하고 사용자가 지정된 애플리케이션 상태로 돌아갈 수 있도록 합니다. (많은 브라우저에서는 JavaScript가 앵커를 동적으로 업데이트할 수 있도록 허용하므로 Ajax 애플리케이션이 표시된 콘텐츠를 업데이트하는 동안 앵커를 업데이트할 수 있습니다.) 이러한 솔루션은 뒤로 버튼을 지원하지 않는 것과 관련된 많은 논쟁도 해결합니다.

<2>.AJAX 보안 문제.

AJAX 기술은 사용자에게 좋은 사용자 경험을 제공할 뿐만 아니라 IT 기업에 새로운 보안 위협을 가져옵니다. Ajax 기술은 기업 데이터에 대한 직접적인 채널을 구축하는 것과 같습니다. 이를 통해 개발자는 이전보다 더 많은 데이터와 서버 로직을 실수로 노출할 수 있습니다. Ajax 로직은 클라이언트 측 보안 스캐닝 기술에서 숨겨질 수 있으므로 해커가 원격 서버에서 새로운 공격을 생성할 수 있습니다. 또한 Ajax는 크로스 사이트 스크립팅 공격, SQL 주입 공격, 자격 증명 기반 보안 취약점과 같은 일부 알려진 보안 약점을 피하기가 어렵습니다.

<3>. 검색 엔진에 대한 지원이 약합니다.

검색 엔진에 대한 지원이 상대적으로 약합니다. 부적절하게 사용하면 AJAX는 네트워크 데이터 트래픽을 증가시켜 전체 시스템 성능을 저하시킵니다.

<4>. 프로그램의 예외 처리 메커니즘을 제거합니다.

적어도 현재 관점에서 볼 때 Ajax.dll 및 Ajaxpro.dll과 같은 Ajax 프레임워크는 프로그램의 예외 메커니즘을 파괴합니다. 이 문제에 대해서는 개발 과정에서 접한 적이 있는데, 확인해보니 인터넷상에 관련 소개가 거의 없는 것 같습니다. 나중에 우리는 실험을 수행하고 Ajax와 전통적인 양식 제출 모드를 사용하여 데이터 조각을 삭제했는데... 이는 디버깅에 큰 어려움을 가져왔습니다.

<5>. URL 및 리소스 위치 지정의 원래 의도에 어긋납니다.

예를 들어, 제가 URL 주소를 알려준다면, Ajax 기술이 사용된다면 URL 주소 아래에 보이는 것과 이 URL 주소 아래에 보이는 것이 다를 수도 있습니다. 이는 자원 포지셔닝의 원래 의도에 어긋납니다.

<6>.AJAX는 모바일 기기를 잘 지원하지 않습니다.

일부 휴대용 장치(예: 휴대폰, PDA 등)는 현재 Ajax를 잘 지원하지 않습니다. 예를 들어 모바일 브라우저에서 Ajax 기술을 사용하여 웹 사이트를 열면 현재 지원하지 않습니다.

<7>. 클라이언트가 너무 뚱뚱하고 클라이언트 코드가 너무 많으면 개발 비용이 발생합니다.

작성이 복잡하고 오류가 발생하기 쉽습니다. 중복된 코드가 많습니다(레이어에 js 파일을 포함하는 것은 AJAX의 일반적인 문제이며 과거에는 많은 서버측 코드가 현재 클라이언트에 배치되어 있습니다). 웹의 원래 표준을 파괴합니다.

6. AJAX 참고 사항 및 적용 가능 및 적용 불가능 시나리오

(1) 참고 사항

Ajax를 개발할 때 네트워크 지연, 즉 사용자가 요청하고 서버가 응답을 보내는 사이의 간격이 필요합니다. 신중하게 고려되어야 합니다. 사용자에게 명확한 응답을 제공하지 않거나, 데이터를 제대로 미리 읽지 않거나, XMLHttpRequest를 부적절하게 처리하면 사용자는 보고 싶지 않고 이해할 수 없는 지연을 경험하게 됩니다. 일반적인 솔루션은 시각적 구성 요소를 사용하여 시스템이 백그라운드 작업을 수행하고 데이터와 콘텐츠를 읽고 있음을 사용자에게 알리는 것입니다.

(2). Ajax 적용 시나리오

<1>. 양식 기반 상호작용

<2>. 심층 트리 탐색

<3> 4>. 투표, 예/아니요 등의 중요하지 않은 시나리오

<5>. 관련 데이터 필터링 및 조작 시나리오

<6>. 일반 텍스트 입력 프롬프트 및 자동 완성 시나리오

(3) . Ajax는

<1>. 일부 간단한 형식

<3>. 많은 양의 텍스트를 바꿉니다. ;5>.프레젠테이션 조작

7.ajax에 포함된 기술

Ajax가 새로운 기술이 아니라 여러 가지 원천기술의 조합이라는 것은 누구나 알고 있는 사실입니다. 이는 다음과 같은 기술로 구성됩니다.

4. 자바스크립트를 사용하여 바인딩하고 호출하세요.

위 기술 중 XmlHttpRequest 객체를 제외한 다른 모든 기술은 웹 표준을 기반으로 하며 널리 사용됩니다. 비록 XMLHttpRequest는 아직 W3C에서 채택되지 않았지만 이미 거의 모든 주요 브라우저에서 표준이 되었기 때문입니다. 현재는 지원합니다.

function    CreateXmlHttp() {
//非IE浏览器创建XmlHttpRequest对象
if(window.XmlHttpRequest) {
xmlhttp =newXmlHttpRequest();
}
//IE浏览器创建XmlHttpRequest对象
if(window.ActiveXObject) {
try{
xmlhttp =newActiveXObject("Microsoft.XMLHTTP");
}
catch(e) {
try{
xmlhttp =newActiveXObject("msxml2.XMLHTTP");
}
catch(ex) { }
}
}
}
functionUstbwuyi() {
vardata = document.getElementById("username").value;
CreateXmlHttp();
if(!xmlhttp) {
alert("创建xmlhttp对象异常！");
returnfalse;
}
xmlhttp.open("POST", url,false);
xmlhttp.onreadystatechange =function() {
if(xmlhttp.readyState == 4) {
document.getElementById("user1").innerHTML = "数据正在加载...";
if(xmlhttp.status == 200) {
document.write(xmlhttp.responseText);
}
}
}
xmlhttp.send();
}

DOM 요소의 JavaScript 전체 요약

jquery 지연 로딩 구현 및 맨 위로 돌아가기

위 내용은 AJAX의 작동 방식과 장점 및 단점에 대한 자세한 설명의 상세 내용입니다. 자세한 내용은 PHP 중국어 웹사이트의 기타 관련 기사를 참조하세요!