AJAX 소개

1. Ajax 개요

Ajax의 정식 명칭은 Asynchronous JavaScript and XML이며 중국어로 "Asynchronous JavaScript and XML"이라고 정의됩니다. .0 기술과 다양한 기술의 조합으로 구성됩니다. Ajax 기술을 사용하면 전체 페이지를 새로 고칠 필요가 없고 페이지의 일부만 업데이트하므로 네트워크 대역폭을 절약하고 웹 페이지 로딩 속도를 높일 수 있으므로 사용자 대기 시간이 단축되고 사용자 경험이 향상됩니다. Ajax 기술에는 주로 클라이언트 측 스크립팅 언어 JavaScript, 비동기 데이터 수집 기술 XMLHttpRequest, 데이터 교환 및 운영 기술 XML 및 XSLT, 동적 디스플레이 및 상호 작용 기술 DOM, 표준 기반 프레젠테이션 기술 XHTML 및 CSS 등이 포함됩니다. Ajax는 웹 브라우저의 잠재력을 크게 탐구하고 많은 가능성을 열어 사용자 경험을 효과적으로 향상시켰습니다.

기존 웹 애플리케이션을 사용하면 사용자가 양식을 작성할 수 있으며 양식이 제출되면 요청이 웹 서버로 전송됩니다. 서버는 들어오는 양식을 수신하고 처리한 다음 새 웹 페이지를 반환합니다. 이 접근 방식은 두 페이지의 HTML 코드 대부분이 동일한 경우가 많기 때문에 대역폭을 많이 낭비합니다. 각 애플리케이션 상호 작용에는 서버에 요청을 보내야 하므로 애플리케이션의 응답 시간은 서버의 응답 시간에 따라 달라집니다. 이로 인해 기본 앱보다 응답성이 훨씬 떨어지는 사용자 인터페이스가 생성됩니다.

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

2. Ajax 작동 방식

Ajax의 핵심은 JavaScript 객체인 XmlHttpRequest입니다. 이 개체는 Internet Explorer 5에서 처음 도입되었으며 비동기 요청을 지원하는 기술입니다. 간단히 말해서 XmlHttpRequest를 사용하면 JavaScript를 사용하여 서버에 요청하고 사용자를 차단하지 않고 응답을 처리할 수 있습니다.

AJAX는 인터넷 표준을 기반으로 합니다.

AJAX는 인터넷 표준을 기반으로 하며 다음 기술 조합을 사용합니다.

· XMLHttpRequest 객체 (서버와 비동기적으로 상호작용) 데이터)

· JavaScript/DOM(정보 표시/검색)

· CSS(데이터 스타일 설정)

· XML(형식) 일반적으로 데이터 전송에 사용됨)

AJAX 애플리케이션은 브라우저 및 플랫폼에 구애받지 않습니다!

클라이언트 측에서 화면 업데이트를 수행하면 웹 사이트를 만들 때 사용자에게 많은 유연성이 제공됩니다. Ajax를 사용하여 수행할 수 있는 기능은 다음과 같습니다.

사용자가 업데이트를 클릭하고 서버가 전체 페이지를 다시 보낼 때까지 기다릴 필요 없이 장바구니에 있는 총 항목 수를 동적으로 업데이트합니다.

서버에서 다운로드되는 데이터의 양을 줄여 사이트 성능을 향상합니다. 예를 들어, Taobao의 장바구니 페이지에서 장바구니에 있는 품목의 수량이 업데이트되면 전체 페이지가 다시 로드되며, 이를 위해서는 32K의 데이터를 다운로드해야 합니다. Ajax를 사용하여 새 총계를 계산하면 서버는 단순히 새 총계 값을 반환하므로 필요한 대역폭은 원본의 1%에 불과합니다.

사용자가 입력할 때마다 페이지 새로 고침을 제거합니다. 예를 들어, Ajax에서 사용자가 페이지가 매겨진 목록에서 다음을 클릭하면 서버 데이터는 전체 페이지가 아닌 목록만 새로 고치게 됩니다.

사용자가 데이터를 편집하기 위해 새 페이지로 이동하도록 요구하는 대신 테이블 데이터를 직접 편집합니다. Ajax를 사용하면 사용자가 편집을 클릭하면 정적 테이블이 편집 가능한 콘텐츠가 포함된 테이블로 새로 고쳐질 수 있습니다. 사용자가 완료를 클릭한 후 Ajax 요청을 발행하여 서버를 업데이트하고 테이블을 새로 고쳐 정적 읽기 전용 데이터를 포함할 수 있습니다.