> 웹 프론트엔드 > JS 튜토리얼 > AJAX의 장점과 단점

AJAX의 장점과 단점

零下一度
풀어 주다: 2018-05-28 17:19:31
원래의
2893명이 탐색했습니다.

1. AJAX란 무엇입니까

2005년에 Adaptive Path Company의 Jesse James Garrett은 자신이 출판한 기사 "웹 애플리케이션에 대한 새로운 접근 방식"에서 Ajax에 대한 명확한 정의를 제시했습니다. 페이지 콘텐츠를 비동기적으로 처리합니다. 페이지 클릭 이벤트를 통해 지속적으로 서버에 요청이 전달되고, 서버는 실시간으로 최신 데이터를 반환하는 것이 AJAX의 기능입니다.

여러 아이디어와 기술의 융합으로 세분화하면 비동기 JavaScript 및 XML, 비동기 JavaScript 및 XML이라는 키워드입니다. AJAX를 사용하는 과정에서 우리는 XHTML 및 CSS 표준 기반 표현 기술 사용, 동적 표시 및 상호 작용을 위한 DOM 사용, 데이터 교환 및 처리를 위한 XML 및 XSLT 사용, XML HttpRequest 사용과 같은 기술을 사용하는 데 있어 반드시 필요합니다. 비동기 데이터 처리를 위해 JavaScript를 검색하고 사용하여 위의 기술을 결합합니다. 그 중 Ajax의 핵심 기술은 XHR이라고 불리는 XMLHttpRequest이다.

2. 개발 전망

Gmail은 이메일을 주고받을 때 Outlook Express와 거의 동일한 기능을 갖고 있으며, 클라이언트 프로그램 설치가 필요하지 않습니다. 기존 브라우저 중 어느 것도 PhotoShop과 같은 데스크톱 프로그램처럼 복잡한 이미지를 처리할 수 없습니다. 그러나 우리는 그 영향력과 영향을 무시할 수 없습니다.

3. 장점(사용자 경험 향상)

사용자 경험 예를 들어, 귀하의 집이 위치한 지역 사회가 어떤 사정으로 인해 단수에 직면한 경우 관련 부서에서는 두 가지 계획을 발표했습니다. 8시간 동안 물 공급이 중단되면, 이 8시간 동안 물 공급이 완전히 중단되며, 8시간 후에는 정상으로 돌아옵니다. 두 번째는 10시간 동안 물을 완전히 차단하지 않는 것입니다. 이 10시간 동안 물이 완전히 차단되지는 않지만 10시간 후에는 유속이 훨씬 줄어들어 정상적인 유속으로 돌아옵니다. 당신이라면 어떤 방법을 선택하시겠습니까? 분명히 후자인 것 같습니다.

비동기 전송은 문자 중심 전송이며 단위는 문자이고 동기 전송은 비트 중심 전송이며 전송 시 수신자와 발신자의 클럭은 다음과 같습니다. 일관성이 필요합니다.

비동기식 일반적으로 각 그룹은 8비트 문자입니다. 각 그룹의 헤드와 테일에는 시작 비트정지 비트가 있습니다. 전송 과정에서 수신자와 발신자의 시계가 필요하지 않습니다. . 일관성, 즉 비동기 발신자는 수신자가 언제 도착하는지 알지 않고도 언제든지 이러한 그룹을 보낼 수 있습니다.

각 비동기 전송 정보는 시작 비트로 시작합니다. 이 비트는 수신자에게 데이터가 도착했음을 알리고, 수신자가 전송이 끝날 때 데이터 비트를 응답, 수신 및 캐시할 시간을 제공합니다. 는 정보 전송이 종료되었음을 나타냅니다. 정지 비트는 신호를 다시 1로 변경하여 다음 시작 비트가 도착할 때까지 유지됩니다.

동시에 전송되는 비트 패킷은 훨씬 더 큽니다. 각각 고유한 시작 비트와 정지 비트를 사용하여 각 문자를 독립적으로 보내는 대신 이를 결합하여 함께 보냅니다. 우리는 이러한 조합을 데이터 프레임 또는 간단히 프레임이라고 부릅니다. 송신측과 수신측이 동기화되도록 수신기의 샘플링 속도가 비트 도착 속도와 일치하는지 확인하십시오.

동기화에는 이점도 있습니다. 동기 전송은 일반적으로 비동기 전송보다 훨씬 빠릅니다. 수신자는 각 문자를 시작하고 중지할 필요가 없습니다. 프레임 동기화 문자가 감지되면 다음 데이터가 도착할 때 이를 수신합니다. 또한 동기 전송의 오버헤드도 상대적으로 작습니다.

단점: 데이터 비트가 길수록 데이터를 캐시하는 데 필요한 버퍼가 커져 프레임 크기가 제한됩니다. 또한 프레임이 클수록 전송 매체를 차지하는 연속 시간이 길어집니다. 극단적인 경우에는 다른 사용자가 너무 오래 기다리게 만들 수 있습니다.

4. 작동 원리 및 기본 기술

XmlHttpRequest 개체를 사용하여 서버에 비동기 요청을 보내고 서버에서 데이터를 얻은 다음 javascript를 사용하여 DOM을 작동하고 페이지를 업데이트합니다.

XMLHttpRequest 객체의 속성.

그것의

properties는 다음과 같습니다:

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

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

responseXML 서버 프로세스에서 반환된 DOM 호환 문서 데이터 개체입니다.

status status 일반적인 404(찾을 수 없음) 및 200(준비) 등 서버에서 반환된 숫자 코드

status 상태 코드에 수반되는 텍스트 문자열 정보

ReadyState 개체 상태 값

0(초기화되지 않음) 개체 설정되었지만 아직 초기화되지 않았습니다(아직 공개 메소드가 호출되지 않음)

   1(초기화) 객체가 생성되었으나 아직 전송 메소드가 호출되지 않음

  2(데이터 전송) 전송 메소드가 호출되었으나 현재 상태 및 http 헤더를 알 수 없음

  3(데이터 전송 중) 전송됨) 응답 및 http 헤더가 불완전하여 데이터의 일부가 수신되었습니다. 이때 responseBody 및 responseText를 통해 데이터의 일부를 가져오면 오류가 발생합니다. 시간이 지나면 responseXml 및 responseText를 통해 완전한 응답 데이터를 얻을 수 있습니다.

5. 단점

ajax 단점

이제 우리 대부분은 ajax가 제공하는 이점에 주목하기 때문에 ajax의 단점에 집중하겠습니다. 사용자 경험 개선 등을 위해 당사에 제공합니다. Ajax로 인한 단점은 무시되었습니다.

 아래에서 설명하는 ajax의 결함은 모두 이로 인한 것입니다.

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

그러나 이 문제가 있음에도 불구하고 문제를 해결할 수는 있지만 이로 인해 발생하는 개발 비용은 매우 높으며 이는 Ajax 프레임워크에서 요구하는 빠른 개발에 반합니다. 이는 ajax로 인한 매우 심각한 문제입니다.

2. 보안 문제

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

3. 검색 엔진에 대한 지원이 상대적으로 약합니다.

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

5. 이 외에도 URL의 원래 의도와 리소스 위치를 위반하는 등의 몇 가지 다른 문제가 있습니다. 예를 들어, 제가 여러분에게 URL 주소를 제공한다면, Ajax 기술이 사용된다면 URL 주소 아래에 보이는 것과 이 URL 주소 아래에 보이는 것이 다를 수도 있습니다. 이는 자원 포지셔닝의 원래 의도에 어긋납니다.

6. 일부 휴대용 장치(예: 휴대폰, PDA 등)는 아직 Ajax를 잘 지원하지 않습니다. 예를 들어 모바일 브라우저에서 Ajax 기술을 사용하여 웹 사이트를 열면 현재 지원되지 않습니다. 물론, 이 문제는 우리와는 아무 관련이 없습니다.

6.
ajax의 여러 프레임워크

현재 우리가 주로 사용하는 ajax 프레임워크에는 ajax.dll, ajaxpro.dll, Magicajax.dll 및 Microsoft의 아틀라스 프레임워크가 포함됩니다. 두 프레임워크 Ajax.dll과 Ajaxpro.dll 사이에는 큰 차이가 없지만, Magicajax.dll은 캡슐화 측면에서 더 강력합니다. 예를 들어 앞서 말했듯이 ajax는 모든 문자열을 반환합니다. .magicajax는 그것을 캡슐화합니다. 하지만 이 기능은 우리에게 큰 편리함을 가져다 줄 수 있습니다. 예를 들어, 페이지에 목록이 있고 목록의 데이터가 지속적으로 변경되는 경우 Magicajax를 사용하여 이를 처리할 수 있습니다. 업데이트된 목록 컨트롤은 Magicajax 컨트롤 내에 배치되고 업데이트 간격은 페이지 로드에서 정의됩니다. atlas의 원리는 Magicajax의 원리와 유사합니다. 그러나 주의가 필요한 점은 이러한 프레임워크가 IE만 지원하고 브라우저 호환성을 다루지 않는다는 것입니다. 디컴파일 도구를 사용하여 코드를 살펴보면 이를 알 수 있습니다.

이러한 프레임워크 외에도 가장 일반적으로 사용되는 방법은 xmlHttpRequest 객체를 직접 생성하는 것입니다. 이 방법은 이전 프레임워크보다 더 유연합니다. 또한 여기서는 aspnet2.0과 함께 제공되는 비동기 콜백 인터페이스에 대해서도 언급하고 싶습니다. ajax와 마찬가지로 로컬 새로 고침을 수행할 수도 있지만 해당 구현은 실제로 xmlhttprequest 개체를 기반으로 합니다. 물론 이것은 Microsoft의 경쟁 전략입니다.

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

관련 라벨:
원천:php.cn
본 웹사이트의 성명
본 글의 내용은 네티즌들의 자발적인 기여로 작성되었으며, 저작권은 원저작자에게 있습니다. 본 사이트는 이에 상응하는 법적 책임을 지지 않습니다. 표절이나 침해가 의심되는 콘텐츠를 발견한 경우 admin@php.cn으로 문의하세요.
최신 이슈
인기 튜토리얼
더>
최신 다운로드
더>
웹 효과
웹사이트 소스 코드
웹사이트 자료
프론트엔드 템플릿