Ajax 프로그래밍 소개

1. Ajax를 사용하는 주된 이유

1. 적절한 Ajax 애플리케이션을 통해 더 나은 사용자 경험을 달성하기 위해

2. 이는 클라이언트의 유휴 처리 능력을 처리하는 데 도움이 되고 서버 및 대역폭에 대한 부담을 줄여 ISP의 공간 및 대역폭 임대 비용을 절약한다는 목적을 달성합니다.

2. 인용문

Ajax 개념의 최초 제안자인 Jesse James Garrett은 다음과 같이 믿습니다. Ajax는 Asynchronous javaScript와 xml의 약어입니다. Ajax는 실제로 공통 협업에서 각자의 역할을 수행하기 위해 특정 방식으로 결합된 여러 기술입니다.

·XHTML 및 CSS 표준화된 프레젠테이션 사용; 🎜>·동적 표시 및 상호 작용에 DOM 사용

·데이터 교환 및 처리에 XML 및 XSLT 사용

·비동기 데이터 읽기에 xmlhttpRequest 사용

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

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

3. 개요

Garrent가 Ajax 구성 기술을 7가지 나열하고 있지만 개인적으로 소위 Ajax의 핵심은 JavaScript, XMLHTTPRequest, DOM만을 사용한다고 생각합니다. XML인 경우 XML을 추가할 수도 있습니다(서버에서 Ajax가 반환하는 데이터는 XML 형식이거나 텍스트와 같은 다른 형식일 수 있음).

기존 상호작용 방식에서는 사용자가 서버에 HTTP 요청을 실행하면 서버가 이를 처리한 후 서버가 클라이언트가 제출한 요청을 처리할 때마다 새로운 HTHL 페이지를 클라이언트에 반환합니다. 클라이언트는 유휴 상태로만 기다릴 수 있으며, 비록 작은 상호 작용이고 서버에서 간단한 데이터 조각만 가져와야 하는 경우에도 완전한 HTML 페이지가 반환되어야 하며 사용자는 다시 읽으려면 시간과 대역폭을 낭비해야 합니다. 매번 전체 페이지를 가져옵니다.

Ajax를 사용하고 나면 사용자는 페이지 새로고침(흰색 화면)을 기다리지 않고 거의 모든 작업이 빠르게 응답한다는 느낌을 받습니다.

1. XMLHTTPRequest

Ajax의 가장 큰 특징 중 하나는 페이지를 새로 고치지 않고도(새로 고치지 않고 페이지를 업데이트라고도 함) 서버에 데이터를 전송하거나 읽고 쓸 수 있다는 것입니다. 이 기능은 주로 XMLHTTP 구성 요소 XMLHTTPRequest 개체로 인해 발생합니다. 이런 방식으로 데스크탑 애플리케이션은 매번 인터페이스를 새로 고치거나 매번 데이터 처리 작업을 서버에 제출할 필요 없이 서버와 데이터만 교환할 수 있습니다. 이는 서버의 부담을 줄일 뿐만 아니라 프로세스 속도도 향상시킵니다. 응답 속도가 빨라지고 사용자 대기 시간이 단축됩니다.

XMLHTTP의 최초 응용 프로그램은 Microsoft(IE5 이상)로 개발자가 웹 페이지 내에서 XMLHTTP ActiveX 구성 요소를 사용할 수 있도록 하여 기능을 확장했습니다. 웹 페이지. 서버 또는 서버에서 데이터를 가져옵니다. 이 기능은 상태 비저장 연결의 어려움을 줄이는 데 도움이 되고 중복 HTML을 다운로드할 필요가 없어 프로세스 속도가 향상되므로 중요합니다. Mozilla(Mozilla 1.0 이상 및 NetScape 7 이상)는 상속된 자체 XML 프록시 클래스인 XMLHttpRequest 클래스를 생성하여 응답했습니다. Konqueror(및 KHTML 기반 브라우저인 Safari v1.2)도 XMLHttpRequest 개체를 지원하며 Opera는 v7.6x+ 및 이후 버전에서도 XMLHttpRequest 개체를 지원합니다. 대부분의 경우 XMLHttpRequest 객체는 XMLHTTP 구성 요소와 매우 유사하며 소수의 속성이 지원되지 않는다는 점을 제외하면 메서드와 속성도 유사합니다.

XMLHttpRequest 적용:

·JS에서 XMLHttpRequest 객체 적용

var xmlhttp = new XMLHttpRequest();

·Microsoft의 XMLHTTP 구성 요소 JS

var xmlhttp = new ActiveXObject(Microsoft.XMLHTTP);

var xmlhttp = new ActiveXObject(Msxml2.XMLHTTP);

XMLHttpRequest 개체 메서드

/**

* 크로스 브라우저 XMLHttpRequest 인스턴스화.

*/

if (XMLHttpRequest 유형 == '정의되지 않음') {

XMLHttpRequest = function () {

var msxmls = [ 'MSXML3' , 'MSXML2', 'Microsoft']

for (var i=0; i < msxmls.length; i++) {

　시도 {

새 ActiveXObject 반환( msxmls[i]+'.XMLHTTP')

　} catch (e) { }

}

throw new Error("XML 구성 요소가 설치되지 않았습니다!" )

　}

}

function createXMLHttpRequest() {

　try {

// "Mozilla 방식"으로 생성해 보세요

if (window.XMLHttpRequest) {

return new XMLHttpRequest();

}

// 추측컨대 - 이제 IE 방식입니다

if (window.ActiveXObject) {

　return new ActiveXObject(getXMLPrefix() + ".XmlHttp");

}

　}

　catch( 예) {}

return false;

};

XMLHttpRequest 객체 메서드

메서드 설명
abort() 현재 요청을 중지합니다.
getAllResponseHeaders() 전체 헤더를 문자열로 반환합니다.
getResponseHeader("headerLabel") 단일 헤더 레이블을 문자열로 반환합니다.
open (" method","URL"[,asyncFlag[,"userName"[, "passWord"]]]) 보류 중인 요청의 대상 URL, 메서드 및 기타 매개변수를 설정합니다.
send(content) 요청 보내기
setRequestHeader("label", "value") 헤더를 설정하고 요청

XMLHttpRequest 객체 속성

속성 설명
상태 변경에 대한 onreadystatechange 이벤트 트리거
readyState 객체 상태(정수):

0 = 초기화되지 않음

1 = 읽기

2 = 읽기

3 = 상호작용

4 = 완료
responseText 서버 프로세스가 반환한 데이터의 텍스트 버전
responseXML 서버 프로세스가 반환한 데이터의 DOM 호환 XML 문서 객체
status 서버가 반환한 상태 코드, 예: 404 = " 파일을 찾을 수 없음", 200 = "성공"
statusText 서버에서 반환한 상태 텍스트 정보

2. JavaScript

JavaScript는 프로그래밍 언어입니다. 브라우저에서 널리 사용되는 이 언어는 나쁜 언어(실제로 사용하기 지루함)로 무시되어 왔으며, 과시용 장치 및 장난 또는 지루한 양식 확인에 자주 사용됩니다. 그러나 사실은 이것이 실제 프로그래밍 언어이고 자체 표준을 갖고 있으며 다양한 브라우저에서 널리 지원된다는 것입니다.

3. DOM

문서 객체 모델.

DOM은 HTML 및 XML 파일용 API 세트입니다. 파일의 구조적 표현을 제공하여 내용과 가시성을 변경할 수 있습니다. 그 본질은 웹 페이지와 스크립트 또는 프로그래밍 언어 사이에 다리를 구축하는 것입니다.

웹 개발자가 조작하고 파일을 생성할 수 있는 모든 속성, 메서드 및 이벤트는 객체로 표현됩니다(예를 들어 document는 "파일 자체" 객체를 나타내고, table 객체는 HTML 테이블 객체를 나타냅니다. 등). 이러한 개체는 오늘날 대부분의 브라우저에서 스크립트를 통해 액세스할 수 있습니다.

HTML 또는 지원으로 구축된 웹페이지입니다.

4. XML

Extensible Markup Language(확장 가능 마크업 언어)는 개방형, 확장 가능, 자기 설명적 언어 구조를 가지며 이는 온라인 데이터 및 문서 전송 표준의 중요한 부분이 되었습니다. 이름처럼 데이터 구조를 설명하는 데 사용되는 언어입니다. 이를 통해 특정 구조화된 데이터를 더 쉽게 정의하고 이를 통해 다른 애플리케이션과 데이터를 교환할 수 있습니다.
5. 종합 5. Ajax의 장점

Jesse James Garrett이 언급한 Ajax 엔진은 실제로 사용자 요청 처리, 서버 읽기 및 쓰기, DOM 콘텐츠 변경에 사용되는 비교적 복잡한 JavaScript 애플리케이션입니다.

Ajax는 전통적인 WEB 애플리케이션을 변형한 것입니다. 과거에는 매번 서버가 HTML 페이지를 생성하여 클라이언트(브라우저)에 반환했습니다. 대부분의 웹사이트에서는 구조, 형식, 머리글, 바닥글, 광고 등과 같은 많은 페이지의 최소 90%가 동일합니다. 유일한 차이점은 콘텐츠의 작은 부분이지만 서버가 모든 반환을 생성할 때마다 클라이언트에게 페이지는 사용자의 시간이든, 대역폭이든, CPU 소비이든, ISP가 높은 가격에 임대한 대역폭과 공간이든 눈에 보이지 않는 낭비입니다. 페이지 단위로 계산하면 몇 K, 수십 K만 있어도 별로 인상적이지 않을 수 있지만, 매일 수백만 페이지를 생성하는 SINA 같은 대형 ISP의 경우 엄청난 손실이라고 할 수 있다. AJAX는 클라이언트와 서버 사이의 중간 계층 역할을 하여 클라이언트의 요청을 처리하고 필요에 따라 서버에 요청을 보낼 수 있으므로 사용량과 사용량을 알 수 있으므로 중복성 및 데이터 낭비가 없습니다. ., 다운로드되는 전체 데이터 양이 줄어들고, 페이지를 업데이트할 때 전체 콘텐츠를 다시 로드할 필요가 없습니다. 업데이트가 필요한 부분만 업데이트할 수 있습니다. 표준화되고 널리 지원되는 기술을 기반으로 하며, 플러그인이나 다운로드된 애플릿이 필요하지 않아 시간이 단축되고 리소스 낭비가 최소화되므로 Ajax는 사용자와 ISP 모두에게 win-win입니다.

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

4. 애플리케이션

Ajax 개념의 출현으로 페이지를 새로고침하지 않고 업데이트하는 시대의 서막이 열렸으며, 기존의 양식(form) 제출 방식을 대체하는 경향이 있습니다. 웹페이지 업데이트를 위한 웹 개발은 하나의 이정표로 간주될 수 있습니다. 그러나 Ajax는 모든 곳에 적용 가능한 것은 아니며, 특성에 따라 적용 범위가 결정됩니다.

애플리케이션의 예로 계단식 메뉴를 위한 Ajax 애플리케이션이 있습니다.

기존 캐스케이딩 메뉴 처리는 다음과 같았습니다.

메뉴의 각 작업으로 인해 페이지가 다시 로드되는 것을 방지하기 위해 매번 배경을 호출하는 방식을 사용하지 않았으며, 그러나 계단식 메뉴의 모든 데이터를 한 번에 읽고 배열에 쓴 다음 JavaScript를 사용하여 사용자 작업에 따라 항목의 하위 집합 표시를 제어합니다. 이렇게 하면 작업 응답 속도 문제가 해결되고 다시 로드되지 않습니다. 서버가 자주 요청을 보내지만 사용자가 메뉴를 조작하지 않거나 메뉴의 일부만 조작하는 경우 읽은 데이터 중 일부는 중복된 데이터가 되어 사용자 리소스를 낭비하게 됩니다. 특히 메뉴에서는 더욱 그렇습니다. 데이터 양이 많은 복잡한 상황(예: 메뉴에 여러 레벨이 있고 각 레벨에 수백 개의 항목이 있음)에서는 이러한 단점이 더욱 두드러집니다.

이 경우 Ajax를 적용하면 결과가 향상됩니다.

페이지 초기화 시 첫 번째 레벨의 데이터만 모두 읽어서 사용자가 표시합니다. 1단계 메뉴의 항목을 선택하면, 2단계 항목을 계속 요청하면 현재 1단계 항목이 속한 2단계 하위 메뉴의 모든 데이터가 Ajax를 통해 백그라운드로 요청됩니다. 제시된 레벨 메뉴의 경우, 2단계 메뉴 항목에 해당하는 모든 3단계 메뉴의 모든 데이터 등을 뒤에서부터 요청하게 됩니다. 이렇게 하면 원하는 것을 얻을 수 있습니다. 데이터 중복 및 낭비가 없으며, 전체 데이터 다운로드량이 줄어들며, 페이지 업데이트 시 전체 콘텐츠를 다시 로드할 필요 없이 필요한 부분만 업데이트됩니다. 업데이트할 내용을 백그라운드 처리 및 다시 로드하는 방식에 비해 사용자의 대기 시간이 단축되고, 리소스 낭비도 최소화됩니다.

또한 Ajax는 외부 데이터를 호출할 수 있기 때문에 지난 3월 Microsoft가 최근 출시한 온라인 RSS 리더의 베타 버전과 같이 데이터 집계 기능(물론 해당 권한 부여 포함)도 구현할 수 있습니다. 15; 그것은 또한 촉진할 수 있습니다. 우리는 일부 공개 데이터를 개발했으며 Amazon 데이터를 사용하는 일부 새로운 도서 검색 애플리케이션과 같은 일부 자체 애플리케이션을 개발했습니다.

간단히 말하면 Ajax는 상호작용이 많고, 데이터를 자주 읽고, 데이터 분류가 잘 되는 WEB 애플리케이션에 적합합니다.

1. 서버의 부하를 줄입니다. Ajax의 기본 개념은 "요청 시 데이터 가져오기"이기 때문에 중복 요청으로 인한 부담과 서버에 미치는 영향을 최대한 줄일 수 있습니다.

2. 페이지를 새로 고치지 않고 업데이트하여 실제 작업을 줄입니다.

우선, "데이터 온 디맨드" 모드는 매우 생생한 비유를 들자면, 원점으로 돌아가는 방식으로 데이터를 읽는 양이 줄어듭니다. 한 끝점에서 다른 끝점으로 끝점이 있으면 Ajax는 한 끝점을 기준점으로 사용하여 다른 끝점에 도달합니다.

둘째, 상대적으로 큰 데이터를 읽고 싶어도 RELOAD처럼 흰색 화면이 필요하지 않습니다. Ajax는 서버 응답 데이터를 얻기 위해 XMLHTTP를 사용하여 요청을 보내기 때문에 전체 페이지를 다시 로드하지 않고도 Javascript를 사용할 수 있습니다. DOM을 조작하면 궁극적으로 페이지가 업데이트되므로 데이터를 읽는 과정에서 사용자는 흰색 화면이 아닌 원래 페이지 상태(또는 LOADING 프롬프트 상자를 추가하여 사용자가 데이터 읽기 상태를 이해할 수 있음)를 볼 수 있습니다. ), 데이터를 모두 수신한 경우에만 내용의 해당 부분이 업데이트되는데, 이 업데이트 역시 순간적으로 이루어지기 때문에 사용자는 거의 느낄 수 없습니다. 한마디로 사용자는 매우 예민한 존재이기 때문에 즉각적인 결과를 얻을 수는 없지만 사용자의 마음속에는 웹사이트에 대한 의존도가 조금씩 쌓이게 됩니다.

3. 더 나은 사용자 경험;

4. 서버에서 부담하는 이전 작업 중 일부를 클라이언트로 전송할 수도 있습니다. 이는 클라이언트의 유휴 처리 능력을 줄여줍니다. 서버 및 대역폭 부담, 공간 절약 및 대역폭 임대 비용

5. Ajax는 표준화되고 널리 지원되는 기술을 기반으로 하며 플러그인이 필요하지 않습니다. 또는 미니 프로그램 다운로드

7. Ajax는 웹에서 인터페이스와 애플리케이션을 분리합니다(데이터와 프리젠테이션을 분리한다고도 할 수 있음).

8. 사용자와 ISP를 위한 것입니다.

6. Ajax 문제

1. 일부 휴대기기(휴대폰, PDA 등)는 아직 Ajax를 잘 지원하지 않습니다.

2. JavaScript Ajax 엔진, JavaScript 호환성 및 DeBug는 모두 골칫거리입니다.

3. Ajax의 새로 고침이 아닌 새로 고침은 새로 고침 새로 고침만큼 명확하지 않기 때문에 사용자에게 문제를 일으키기 쉽습니다. 사용자는 현재 데이터가 새로운 것인지 또는 업데이트되었는지 확신할 수 없습니다. 기존 솔루션에는 관련 위치에 메시지 표시, 데이터 업데이트 영역을 보다 명확하게 설계, 데이터 업데이트 후 사용자에게 메시지 제공 등이 포함됩니다.

4. 스트리밍 미디어에 대한 지원은 FLASH 및 Java Applet만큼 좋지 않습니다.

위는 Ajax 프로그램

디자인입니다.

더 많은 관련 기사를 보려면 비용을 지불하세요. PHP 중국어 웹사이트(www.php .cn)에 주목하세요!