자신의 Ajax 웹 응용 프로그램을 구축하십시오-JS 튜토리얼-php.cn

자신의 Ajax 웹 응용 프로그램을 구축하십시오 그래서 여기, 당신은 Ajax라는이 일에 대해 배울 준비가되어 있습니다. 그러나 정확히 무엇입니까? Ajax라는 용어는 역동적이고 대화식 웹 컨텐츠를 만드는 데 사용되는 느슨한 기술 그룹을 나타냅니다. 그의 에세이 Ajax에서 적응 경로의 Jesse James Garrett이 원래 만들어진 Ajax라는 용어는 웹 응용 프로그램에 대한 새로운 접근 방식은“비동기 JavaScript 및 XML”의 약어입니다. 그것은 약간의 입이지만, JavaScript를 사용하여 전체 페이지를 다시로드하지 않고 웹 서버에서 페이지 내용을 새로 고치는 기술을 설명하는 것입니다. 이는 웹 페이지를 업데이트하는 기존 방법과 다릅니다.이 웹 페이지는 콘텐츠의 변경 사항을 표시하기 위해 브라우저가 전체 페이지를 새로 고치는 것이 필요합니다. 비슷한 기술은 한동안 어떤 형태로도 (일부 영리한 해킹의 도움으로) 꽤 오랫동안 주변에있었습니다. 그러나 브라우저에서 XMLHTTPREQUEST 클래스의 가용성, Ajax라는 용어의 코닝 및 Google지도, Gmail, Backpack 및 Flickr와 같은 여러 가지 유명한 예제의 도덕은 이러한 종류의 높은 대화식 웹 애플리케이션이 개발 세계에서 트랙션을 얻기 시작할 수있게 해주었습니다. ajax라는 용어가 더 널리 퍼져 있기 때문에, 그 정의는 구식 웹 앱보다 훨씬 더 동적으로 행동하는 브라우저 기반 응용 프로그램을보다 일반적으로 언급하도록 확장되었습니다. 이 새로운 Ajax 웹 애플리케이션은 편집 텍스트, 드래그 앤 드롭 및 CSS 애니메이션 또는 전환과 같은 상호 작용 기술을보다 광범위하게 사용하여 사용자 인터페이스 내의 변경에 영향을 미칩니다. 이 튜토리얼은 이러한 기술을 설명하고 자신의 Ajax 웹 애플리케이션을 개발하는 방법을 보여줍니다. 이 튜토리얼은 내 새 책인

자신의 Ajax 웹 애플리케이션을 작성하여 발췌 한 것입니다. 여기에 제시된 세 장에서는 Ajax의 기본 사항에 대해 논의하고 XMLHTTPREQUEST의 멋진 세계를 탐구하기 전에 어떻게 진드기를 알 수 있습니다. 우리가 그것을 가지고 놀았고, 내부 작업을 탐색하고, 요청을하고, 응용 프로그램 페이지를 비동기로 업데이트 한 후, 우리는 첫 번째 True Ajax 응용 프로그램을 개발하기 시작합니다. 그것은 꽤 타고 갈 것입니다. 그래서 당신은 모험을 준비하기를 바랍니다! 이 장을 오프라인으로 읽으려면 .pdf 버전을 다운로드하십시오. 그러나 이제 Ajax에서 견고한 접지를 받으십시오 1 장. Ajax : 개요

그는 탈출하고있다, 바보! 파견 전쟁 로켓 Ajax! 그의 몸을 되 찾으려고!

- Kala 장군, Flash Gordon

ajax 웹 응용 프로그램 ajax는 많은 웹 개발 프로젝트에 훌륭한 솔루션이 될 수 있습니다. 웹 앱이 이전에 데스크탑 애플리케이션에 의해 거의 독점적으로 점유 된 많은 근거를 강화하고 인수 할 수 있습니다. 모두 똑같이, Ajax는 앱에 뿌려서 시원하게 만들 수있는 일종의 마법 요정 먼지가 아니라는 점을 명심해야합니다. 다른 새로운 개발 기술과 마찬가지로 Ajax는 잘못 사용하기가 어렵지 않으며 끔찍하고 멍청한 구식 웹 앱보다 더 나쁜 것은 끔찍하고 실행되지 않은 Ajax 웹 앱입니다. 웹 애플리케이션의 올바른 부분에 적용하면 올바른 방법으로 Ajax는 사용자의 응용 프로그램 경험을 크게 향상시킬 수 있습니다. Ajax는 앱의 상호 작용과 속도를 향상시켜 궁극적으로 해당 애플리케이션이 더 쉽고 재미 있고 사용하기에 직관적입니다. 종종 Ajax 응용 프로그램은 "브라우저의 데스크탑 응용 프로그램과 같은"것으로 설명됩니다. 이것은 상당히 정확한 설명입니다. Ajax 웹 앱은 기존의 구식 웹 응용 프로그램보다 훨씬 더 반응이 좋으며 데스크탑 응용 프로그램과 유사한 상호 작용 수준을 제공 할 수 있습니다.

. 그러나 Ajax 웹 앱은 여전히 원격 애플리케이션이며 로컬 스토리지에 액세스 할 수있는 데스크탑 응용 프로그램과 다르게 작동합니다. Ajax 개발자로서의 업무의 일부는 앱과 먼 서버 사이에 발생 해야하는 통신에도 불구하고 반응이 좋고 사용하기 쉬운 응용 프로그램을 제작하는 것입니다. 다행히도 Ajax 도구 상자는 정확히 달성하기위한 여러 가지 훌륭한 기술을 제공합니다.

나쁜 옛날

간단하고 정적 HTML 페이지를 제공하는 것 이상으로 이동 한 최초의 웹 개발 작업 중 하나는 백엔드 데이터 저장소의 데이터를 사용하여 웹 서버에서 동적으로 페이지를 구축하는 기술입니다. 웹 개발의 "나쁜 옛날"으로 돌아가서이 동적 데이터베이스 중심 콘텐츠를 생성하는 유일한 방법은 CGI 스크립트 (PERL로 작성된) 또는 스크립팅 언어 (예 : Microsoft의 활성 서버 페이지와 같은)를 사용하여 서버 측의 전체 페이지를 구성하는 것입니다. 해당 페이지의 단일 변경조차도 브라우저에서 서버로의 왕복 여행이 필요했습니다. 그러면 새 콘텐츠를 사용자에게 제시 할 수있었습니다. 그 당시 웹 애플리케이션 사용자 인터페이스의 일반 모델은 사용자가 작성하여 서버에 제출하는 웹 양식이었습니다. 서버는 제출 된 양식을 처리하고 결과적으로 디스플레이를 위해 완전히 새 페이지를 브라우저로 다시 보냅니다. 예를 들어, 멀티 스텝 웹 기반 "마법사"가 완료되면 사용자가 양식을 제출해야합니다. 따라서 각 단계마다 브라우저와 서버 간의 왕복을 유발할 수 있습니다. 는 정적 웹 페이지에서 큰 발전 이었지만 여전히 최종 사용자에게 진정한“응용 프로그램”경험을 제시하는 것과는 거리가 멀었습니다. 선사 시대 ajax

초기 웹 개발자는 즉시 반응이 좋고 대화식 인 웹 애플리케이션을 만들기 위해 간단한 양식 기반 모델의 기능을 확장하는 트릭을 즉시 찾기 시작했습니다. 이 해킹은 상당히 임시적이고 조잡하지만 웹 개발자들이 오늘날의 AJAX 응용 프로그램에서 볼 수있는 상호 작용의 종류를 향한 첫 번째 단계였습니다. 그러나 이러한 트릭과 해결 방법은 종종 서비스 가능하고 작동하는 솔루션을 제공했지만 결과 코드는 꽤 시력이 아니 었습니다.

중첩 프레임 세트 컨텐츠에 대한 가장 작은 변경조차 표시하기 위해 전체 페이지를 다시로드 해야하는 문제를 해결하는 한 가지 방법은 다른 프레임 세트 내에서 둥지 프레임 세트의 끔찍한 해킹, 종종 여러 레벨의 깊이였습니다. 이 기술은 개발자가 화면의 선택된 영역 만 업데이트 할 수 있었고, 화면의 한 부분에서 사용자가 다른 영역의 콘텐츠를 클릭하여 다른 영역에서 콘텐츠를 클릭하는 탭 스타일의 탐색 인터페이스의 동작을 모방 할 수있었습니다. 이 기술은 EmployeeEditWizardMiddlowerright.asp. 숨겨진 iframe Internet Explorer 4와 같은 브라우저에 iframe을 추가하면 훨씬 덜 고통 스럽습니다. iframe을 숨길 수있는 기능은 또 다른 깔끔한 해킹을 완전히 개발했습니다. 개발자는 숨겨진 iframe을 사용하여 HTTP 요청을 서버에 요청한 다음 JavaScript 및 DHTML을 사용하여 컨텐츠를 페이지에 삽입합니다. 이는 Page를 다시로드하지 않고 양식에서 데이터를 제출할 수있는 기능을 포함하여 최신 AJAX를 통해 사용할 수있는 동일한 기능을 제공했습니다. 결과는 서버에 의해 Iframe으로 반환되었으며, 페이지의 JavaScript에 액세스 할 수 있습니다. 이 접근법의 큰 단점은 (결국 해킹이라는 사실을 넘어서) 기본 문서와 iframe의 문서 사이를 앞뒤로 전달하는 성가신 부담이었다. 원격 스크립팅 일반적으로 원격 스크립팅이라고하는 또 다른 초기 Ajax와 같은 기술은 동적으로 생성 된 JavaScript를 포함하는 페이지를로드하기 위해 태그의 SRC 속성을 설정하는 것과 관련이 있습니다. 이것은 서버에서 생성 된 JavaScript가 기본 문서에 바로로드되므로 숨겨진 iframe 핵보다 훨씬 깨끗하다는 장점이있었습니다. 그러나이 기술을 사용하여 간단한 GET 요청 만 가능했습니다.

ajax를 시원하게 만드는 이유 이것은 Ajax 개발이 웹 개발을위한 엄청난 도약입니다. 단일의 거대한 질량으로 서버로 모든 것을 보내지 않고 서버가 렌더링을 위해 새 페이지를 다시 보낼 때까지 기다리는 대신 웹 개발자는 작은 청크에서 서버와 통신 할 수 있으며 서버의 요청에 따라 서버의 특정 영역을 선택적으로 업데이트 할 수 있습니다. 이것은 Ajax 약어의 비동기식이라는 단어가 시작된 곳입니다.

동기 시스템 인 반대를 고려하여 비동기 시스템의 아이디어를 이해하는 것이 가장 쉽습니다. 동기 시스템에서는 모든 것이 순서대로 발생합니다. 자동차 경주가 동기 시스템이라면 매우 둔한 일이 될 것입니다. 그리드에서 처음 시작한 자동차는 결승선을 가로 질러 첫 번째로, 두 번째로 시작된 차가 이어졌습니다. 추월은 없을 것이며, 자동차가 고장 나면 기계공이 수리를하는 동안 뒤의 교통량이 멈추고 기다려야합니다.

. ~~기존 웹 앱은 동기 시스템을 사용합니다. 그림 1.1과 같이 두 번째 페이지를 요청하기 전에 서버가 시스템의 첫 페이지를 보내려면 기다려야합니다.~~

<.> 그림 1.1. 전통적인 웹 앱은 동기 시스템

입니다 비동기 자동차 경주는 훨씬 더 흥미로울 것입니다. 기둥 위치의 차량은 첫 번째 모퉁이에서 추월 할 수 있으며 그리드 뒤에서 시작하는 자동차는 필드를 통해 길을 엮어 3 위로 결승선을 건너 갈 수 있습니다. HTTP는 AJAX 응용 프로그램의 브라우저에서 요청합니다. Ajax 개발을 시원하게 만드는 요구 기준으로 서버에 대한 작은 요청을 많이 할 수 있습니다. 그림 1.2는 웹 서버에 비동기 요청을하는 Ajax 응용 프로그램을 보여줍니다. 자신의 Ajax 웹 응용 프로그램을 구축하십시오
<.> 그림 1.2. Ajax 웹 앱은 비동기 시스템 입니다 최종 결과는 사용자가 프로세스 요청을 기다리는 데 시간이 훨씬 적으며 새로운 웹 페이지가 전선을 가로 질러 올 때까지 기다릴 필요가없고 결과를보기 전에 브라우저로 렌더링 할 필요가 없기 때문에 최종 결과는 훨씬 더 반응이 좋은 응용 프로그램입니다. . Ajax 기술 Ajax 웹 애플리케이션을 구축하는 데 사용되는 기술에는 여러 가지 프로그래밍 영역이 포함되므로 Ajax 개발은 정기적 인 응용 프로그램 개발만큼 간단하지 않으며 구식 웹 개발만큼 쉽지 않습니다.

반면에, Ajax 개발이 너무 많은 다양한 기술을 수용한다는 사실은 훨씬 더 흥미롭고 재미있게 만듭니다. 다음은 Ajax 웹 애플리케이션을 만들기 위해 함께 작동하는 기술에 대한 간단한 목록입니다.

xml

w3c dom 자신의 Ajax 웹 응용 프로그램을 구축하십시오 css xmlhttprequest
javaScript 이 장의 나머지 부분을 통해 이러한 각 기술을 충족하고 Ajax 웹 응용 프로그램에서 수행하는 역할에 대해 논의 할 것입니다. 데이터 교환 및 마크 업 : xml

xml (XML은 확장 가능한 마크 업 언어를 나타냅니다. 누구나 교과서 외부에서 그것을 부르는 사람은 아닙니다.) Ajax는 문자 "X"를 얻는 곳입니다. 기술 약어는“X”문자를 포함하면 자동으로 훨씬 더 시원한 것으로 간주되기 때문에 이것은 운이 좋다. (예, 농담입니다!)

데이터 교환 링구아 프랑카

XML은 종종 AJAX 애플리케이션에서 브라우저와 서버간에 통신하는 비동기 HTTP 요청에 사용되는 기본 데이터 형식 역할을합니다. 이 역할은 중립적이고 상당히 간단한 데이터 교환 형식으로서 XML의 강점에 영향을 미치며, 필요가 발생하면 컨텐츠를 재사용하거나 재구성하는 것이 비교적 쉽다는 것을 의미합니다. 물론 브라우저와 서버 (예 : CSV (Comma 분리 값), JSON (JavaScript 객체 표기법) 또는 단순히 일반 텍스트) 간의 쉽게 교환하기 위해 데이터를 형식화하는 다양한 방법이 있지만 XML은 가장 일반적인 것 중 하나입니다. xml as markup Ajax 응용 프로그램의 웹 페이지는 XHTML 마크 업으로 구성되며 실제로는 XML의 맛입니다. HTML의 후임자 인 XHTML은 그것과 매우 유사합니다. 구식 HTML에 익숙한 개발자가 쉽게 선택할 수 있지만 유효한 XML의 모든 이점을 자랑합니다. xhtml을 사용하는 데는 여러 가지 장점이 있습니다 :

XML을보고, 편집 및 검증하기위한 많은 표준 도구 및 스크립트 라이브러리를 제공합니다. 새로운 XML 호환 브라우저와 전달됩니다 는 HTML 문서 객체 모델 (DOM) 또는 XML Dom. 브라우저 비 에이전트에서보기에 더 쉽게 용도가 변경됩니다

개발 커뮤니티에있는 더 많은 사람들 중 일부는 사람들이 아직 XHTML을 사용해서는 안된다고 주장합니다. 그들은 XHTML이 실제 XML이기 때문에 적절한 HTTP 컨텐츠 유형의 응용 프로그램/XHTML XML (Text/XML 및 Application/XML은 설명 적이지만, 설명이 적음)와 함께 제공 될 수 없다면 전혀 사용해서는 안된다고 매우 강하게 믿는다. (Internet Explorer 6과 7은 전혀 지원하지 않습니다.)

실제로 모든 주류 브라우저가 텍스트/html로 사용되는 모든 XHTML 문서가 올바르게 렌더링되므로 컨텐츠 유형의 텍스트/html을 사용하여 브라우저에 XHTML을 제공 할 수 있습니다. 브라우저는 코드를 평범한 오래된 HTML로 취급하지만 다른 프로그램은 여전히 XML로 해석 할 수 있으므로 마크 업을 사용하여 "미래 방지"할 수있는 실질적인 이유는 없습니다. 나와 동의하지 않으면 구형 HTML 4.01 표준을 사용하여 개발하도록 선택할 수 있습니다. 이것은 여전히 실행 가능한 웹 표준이며 웹 애플리케이션을 개발할 때 완벽하게 합법적 인 선택입니다.

xhtml 및이 책 이 책의 대부분의 코드 예제는 XHTML 1.0 Strict를 사용합니다. iframe 요소는 엄격하게 사용할 수 없으므로 iframe을 사용하여 보여주는 몇 가지 코드 예제는 XHTML 1.0 전환입니다. <web> 월드 와이드 웹 컨소시엄은 HTML과 XHTML의 차이점에 대한 FAQ를 유지합니다. W3C 문서 객체 모델 <em> </em><model> 문서 개체 모델 (DOM)은 XML 및 HTML 문서의 객체 지향 표현이며 해당 문서의 내용, 구조 및 스타일을 변경하기위한 API를 제공합니다. <specific> 원래 Netscape Navigator 및 Internet Explorer와 같은 특정 브라우저는 JavaScript를 사용하여 HTML 문서를 조작하는 다른 독점적 인 방법을 제공했습니다. DOM은 W3C (World Wide Web Consortium)의 노력으로 인해 동일한 작업을 달성 할 수있는 플랫폼 및 브라우저 중립 방법을 제공했습니다. <ents> DOM은 XML 또는 HTML 문서의 구조를 객체 계층으로 나타내며 표준 XML 도구에 의한 구문 분석에 이상적입니다. <ulation ulation> DOM 조작 방법 <p> <cript cript> JavaScript는 문서를 구문 분석하고 조작하는 측면에서 이러한 DOM 구조를 다루기위한 큰 API를 제공합니다. 이것은 우리가 AJAX 응용 프로그램에서 볼 수있는 웹 페이지로의 작은 조각 변경을 달성하는 주요 방법 중 하나입니다. (또 다른 방법은 단순히 요소의 innerhtml 속성을 변경하는 것입니다.이 방법은 주류 브라우저에서 널리 지원되지만 어떤 표준에도 잘 문서화되어 있지 않습니다.) </cript></p>. <p> dom 이벤트 <function> DOM의 다른 중요한 기능은 JavaScript가 웹 페이지의 요소에 이벤트를 첨부하는 표준 수단을 제공한다는 것입니다. 이렇게하면 훨씬 더 풍부한 사용자 인터페이스가 가능합니다. 사용자가 간단한 링크 및 양식 요소를 넘어서 페이지와 상호 작용할 수있는 기회를 제공 할 수 있기 때문입니다. <of> 이것의 좋은 예는 드래그 앤 드롭 기능으로, 사용자가 화면의 페이지를 드래그하여 특정 기능을 트리거하기 위해 제자리로 떨어 뜨릴 수 있습니다. 이러한 종류의 기능은 데스크탑 애플리케이션에만 존재했지만 이제는 DOM 덕분에 브라우저에서도 잘 작동합니다. </of></function></p> 프레젠테이션 : CSS <p> CSS (Cascading Style Sheets)는 웹 응용 프로그램에서 사용자 인터페이스 요소의 모양을 제어하기위한 통합 된 방법을 제공합니다. CSS를 사용하여 페이지가 글꼴 크기, 색상 및 간격에서 요소의 위치에 이르기까지 페이지가 보이는 방식의 거의 모든 측면을 변경할 수 있습니다. <j> ajax 응용 프로그램에서 CSS를 잘 사용하는 것은 사용자 인터페이스 피드백 (CSS 중심 애니메이션 및 전환 포함)을 제공하거나 사용자가 상호 작용할 수있는 페이지의 일부를 나타내는 것입니다 (예 : 마우스 오버 오버에 의해 색상 또는 모양이 트리거 된). 예를 들어 CSS 전환을 사용하여 응용 프로그램의 일부가 서버에서 처리하는 HTTP 요청을 기다리고 있음을 나타냅니다. <man> CSS 조작은 Ajax라는 용어의 광범위한 정의-다양한 시각적 전환 및 효과뿐만 아니라 드래그 앤 드롭 및 편집 기능에서 크게 정의됩니다. </man></j></p> 커뮤니케이션 : XMLHTTPREQUEST <p> 사용하기 쉬운 인터페이스를 갖춘 JavaScript 클래스 인 <h> xmlhttprequest는 웹 서버를 오가는 HTTP 요청 및 응답을 보내고 수신합니다. xmlhttprequest 클래스는 진정한 Ajax 응용 프로그램 개발을 가능하게하는 것입니다. xmlhttprequest로 만든 HTTP 요청은 마치 브라우저가 페이지를로드하거나 양식을 제출하도록 정상적인 요청을하는 것처럼 작동하지만 사용자가 현재로드 된 웹 페이지를 떠나지 않아도됩니다. <first> Microsoft는 Windows 용 Internet Explorer 5에서 ActiveX 객체로 XMLHTTPREQUEST를 처음 구현했습니다. Mozilla 프로젝트는 버전 1.0에서 시작하여 Mozilla 브라우저에 호환 가능한 API가있는 JavaScript 네이티브 버전을 제공했습니다. (물론 Firefox에서도 구할 수 있습니다.) Apple은 버전 1.2 이후 Safari에 xmlhttprequest를 추가했습니다. <the> XML 문서 또는 일련의 텍스트 문자열 서버의 응답을 JavaScript로 전달할 수는 있지만 개발자가 적합하다는 것을 볼 수 있습니다. 종종 웹 응용 프로그램의 사용자 인터페이스의 일부를 업데이트합니다. 모든 것을합시다 : javaScript <p> <cript> JavaScript는 Ajax 응용 프로그램을 함께 보유하는 접착제입니다. Ajax 개발에서 여러 역할을 수행합니다 </cript></p> <p> <t> xmlhttprequest를 사용하여 작성된 http 요청 제어 <the> 사용 된 데이터 교환 형식에 따라 DOM 조작 방법, XSLT 또는 사용자 정의 메소드를 사용하여 서버에서 돌아온 결과를 구문 분석합니다. <res>는 DOM 조작 메소드를 사용하여 웹 페이지에 컨텐츠를 삽입하거나 요소의 InnerHTML 속성을 업데이트하거나 요소의 CSS 속성을 변경하여 사용자 인터페이스에서 결과 데이터를 제시합니다. </res></the></t></p> <long> 가벼운 웹 프로그래밍 (및 경험이없는 프로그래머의 손에)에서 사용의 오랜 역사로 인해, 많은 전통적인 애플리케이션 개발자들은“심각한 프로그래밍 언어”로 간주되지 않았으며, 실제로는 객체 지향적 프로그래밍 방법론을 지원할 수있는 완벽하고 동적 인 언어라는 사실에도 불구하고. <ception> Ajax 개발 기술이 브라우저 기반 애플리케이션의 전력과 기능을 확장함에 따라 "장난감 언어"로서의 JavaScript의 오해는 빠르게 변화하고 있습니다. Ajax의 출현의 결과로 JavaScript는 이제 르네상스의 무언가를 겪고있는 것으로 보이며, Ajax 개발에 사용할 수있는 JavaScript 툴킷 및 라이브러리의 폭발적인 성장은 사실의 증거입니다. <p>.</p> <h5> 요약 이 장에서는 Ajax와 기술을 간단히 만드는 기술에 대한 빠른 개요를 가졌습니다. 우리는 대화 형 UI와 유사한 무언가를 만들기 위해 개발자들이 나쁜 옛날에 견딜 수있는 끔찍한 코딩 연소를 보았고, Ajax가 어떻게 그러한 접근법에 대해 큰 개선을 제공하는지 보았습니다. Ajax - XML, Dom, CSS, XMLHTTPREQUEST 및 JavaScript의 제작 된 명령을 통해 동적이고 접근 가능한 AJAX 사이트를 구축하는 데 필요한 모든 것을 갖추고 있습니다. </h5> <basic> 2 장. 기본 XMLHTTPREQUEST <to> 나는이 새로운 경이로움을 공유하기를 기다릴 수 없다. 사람들은 모두 빛을보고, 그들 모두가 자신의 음악을 만들게 할 것이며, 제사장들은 오늘 밤에 내 이름을 찬양한다. <p>. </p> <discover> - 러쉬, 디스커버리 <p> <m> ajax의 진정한 힘을 제공하는 것은 xmlhttprequest입니다 : 브라우저에서 비동기 HTTP 요청을 만들고 작은 덩어리에서 컨텐츠를 끌어내는 능력. <have> 웹 개발자는 오랫동안이를 달성하기 위해 트릭과 해킹을 사용해 왔으며, 성가신 제한을 겪고 있습니다. 보이지 않는 Iframe Hack은 IFRAME의 부모 문서와 문서 사이에 데이터를 전달해야했으며 "원격 스크립팅"방법조차도 JavaScript가 포함 된 페이지에 대한 요청을 제한했습니다. <ax> xmlhttprequest를 사용하는 Modern Ajax 기술은 이러한 Kludgy 방법에 비해 크게 개선되어 앱이 페이지를 완전히 다시로드하지 않고도 얻고 게시 할 수 있습니다. </ax></have></m></p>. 이 장에서는 웹 서버의 페이지를 시간이 정한 일정으로 핑하는 간단한 사이트 모니터링 응용 프로그램 인 간단한 Ajax 웹 응용 프로그램을 바로 만들 것입니다. 그러나 서버를 폴링하기위한 비동기 HTTP 요청을 시작하기 전에 xmlhttprequest 객체가 단일 재사용 가능한 코드 라이브러리 내에서 xmlhtttprequest 객체와 같은 모든 작은 브라우저 불이행 능력을 관리함으로써 XMLHTTPREQUEST 클래스의 사용을 단순화해야합니다. <j> 간단한 ajax 라이브러리 <sim> xmlhttprequest 클래스의 사용을 단순화하기위한 한 가지 방법은 기존 코드 라이브러리를 사용하는 것입니다. Ajax 개발의 인기가 높아짐에 따라 문자 그대로 수십 개의 라이브러리, 툴킷 및 프레임 워크가있어 xmlhttprequest를 쉽게 사용할 수 있습니다. <the> 그러나 xmlhttprequest 클래스의 인스턴스를 생성하기위한 코드가 상당히 간단하고 사용하기위한 API는 이해하기 쉽습니다. 우리는 필요한 기본 사항을 처리하는 매우 간단한 JavaScript 라이브러리를 작성합니다. <h5>. <the> 자신의 라이브러리를 만드는 과정을 밟는 것은 XMLHTTPREQUEST 클래스가 어떻게 작동하는지 알 수 있도록하고, 사용하기로 결정할 때 다른 툴킷이나 라이브러리에서 더 많은 것을 얻을 수 있도록 도와줍니다. </the> </h5>. <q> ajax 클래스 시작 </q> <by> 우리는 ajax라는 기본 클래스를 만들어 xmlhttprequest 클래스의 기능을 랩핑합니다. 나는 JavaScript에서 객체 지향적 프로그래밍을 한 적이 없다 - 도움말! <p> 이 섹션에서는 JavaScript에서 클래스와 객체를 만들기 시작합니다. 전에이 일을 한 적이 없다면 걱정하지 마십시오. 객체 지향 프로그래밍의 기본 사항을 아는 한 매우 간단합니다. JavaScript에서는 Java, C 또는 .NET 언어 중 하나에서와 같이 복잡한 구문을 가진 클래스를 선언하지 않습니다. 우리는 단순히 클래스 인스턴스를 만들기 위해 생성자 함수를 작성합니다. 우리가해야 할 일은 <em>입니다 </em> </p> <uct> 생성자 함수 제공 -이 함수의 이름은 클래스의 이름입니다 <ies> 키워드를 사용하여 구성된 객체에 속성을 추가 한 다음, 기간과 속성의 이름 </ies></uct></by></the></sim></j></discover></to></basic></ception></long></the></first></h></p> <code> 다음은 helloorld라는 간단한 클래스를 만드는 코드입니다.

객체 지향 프로그래밍을위한 JavaScript의 프레임 워크는 매우 가볍지 만, 일단 교수형을 얻으면 놀랍게도 잘 작동합니다. 상속 및 다형성과 같은 고급 객체 지향 기능은 JavaScript에서 사용할 수 없지만 AJAX 응용 프로그램의 클라이언트 측에서는 거의 필요하지 않습니다. 이러한 기능이 유용한 복잡한 비즈니스 논리는 항상 웹 서버에 있어야하며 xmlhttprequest 클래스를 사용하여 액세스해야합니다. 이 예에서는 하나의 속성 (메시지)과 하나의 메소드 (saymessage)가있는 helloworld라는 클래스를 만듭니다. 이 클래스를 사용하려면 다음과 같이 제작자 함수를 호출합니다.

여기에서는 Helloworld (HW라고 함) 인스턴스를 만든 다음이 개체를 사용하여 두 메시지를 표시합니다. 우리가 처음으로 Saymessage라고 부르면 기본값 "안녕하세요, 세계!" 메시지가 표시됩니다. 그런 다음 객체의 메시지 속성을 "Goodbye"로 변경 한 후 Saymessage라고 부르며 "Goodbye"가 표시됩니다. 이것이 현재 너무 의미가 없다고 걱정하지 마십시오. 우리가 Ajax 수업의 건물을 통해 진행함에 따라 더 명확해질 것입니다.

Ajax 클래스의 생성자 기능의 시작은 다음과 같습니다.

이 코드는 xmlhttprequest 객체와 함께 작동하기 위해 ajax 클래스에서 필요한 속성을 정의합니다. 이제 우리의 객체에 몇 가지 방법을 추가해 봅시다. 우리는 xmlhttprequest 객체를 설정하고 우리에게 요청하는 방법을 알려주는 몇 가지 기능이 필요합니다.

xmlhttprequest 객체 생성

먼저, 우리는 init 메소드를 추가하여 xmlhttprequest 객체를 생성합니다. 불행히도, Xmlhttprequest는 Firefox에서 약간 다르게 구현됩니다 (이 책에서는 Firefox에서 무언가가 어떻게 작동하는지 설명 할 때마다 Firefox, Mozilla, Camino 및 Seamonkey 및 Safari, Safari 및 Opera가 인터넷 익스플로러에있는 것보다 Firefox, Mozilla, Camino 및 Seakonkey를 포함한 모든 Mozilla 기반 브라우저를 언급하고 있습니다. 향후 Ajax 개발을 단순화하면 특정 브라우저를 타겟팅하지 않으면 여러 가지 방법으로 객체를 인스턴스화해야합니다. Firefox 및 Safari는 xmlhttprequest라는 클래스를 사용하여 xmlhttprequest 객체를 만듭니다. 인터넷 익스플로러 버전 6과 이전에는 Microsoft의 스크립팅 엔진에 내장 된 ActiveXobject라는 특수 클래스를 사용합니다. 이 클래스는 생성자가 다르지만 같은 방식으로 행동합니다.

크로스 브라우저 코드 다행히도 대부분의 최신 브라우저 (Internet Explorer 6, Firefox 1.0, Safari 1.2 및 Opera 8 또는 이후 버전의 이러한 브라우저)는 전체적으로 웹 표준을 준수하므로 AJAX 코드에서 브라우저 별 분기를 많이 할 필요가 없습니다.

이것은 일반적으로 바탕 화면 애플리케이션보다 크로스 플랫폼을 개발하고 배포하기 위해 브라우저 기반 Ajax 응용 프로그램을 더 빨리 만들어줍니다. AJAX 응용 프로그램에 사용할 수있는 전원 및 기능이 증가함에 따라 데스크탑 응용 프로그램은 사용자 인터페이스 관점에서 더 적은 장점을 제공합니다. init 메소드는 다음과 같이 보입니다

init 메소드는 하나를 성공적으로 생성 할 때까지 xmlhttprequest 객체를 생성하는 가능한 각 방법을 통과합니다. 이 객체는 호출 함수로 반환됩니다 우아하게 저하

이전 브라우저와의 호환성 유지 ( "이전"에 의해 이전 메모에서 언급 한 "현대 브라우저"보다 오래된 것을 의미합니다)는 많은 추가 코드 작업이 필요하므로 응용 프로그램이 지원 해야하는 브라우저를 정의하는 것이 중요합니다.

신청서가 XMLHTMLRequest 클래스 (예 : Internet Explorer 4 이상, NetScape 4 이하)를 지원하지 않는 이전 브라우저를 통해 상당한 트래픽을 받는다는 것을 알고 있다면 완전히 남겨 두거나 코드를 작성하여 우아하게 저하되도록 코드를 작성해야합니다. 즉, 기능이 덜 형성 가능한 브라우저에서 단순히 사라지는 대신 해당 브라우저의 사용자가 덜 대화식이거나 사용하기 쉬운 형식으로 기능적으로 동등한 것을 받도록 코딩합니다.

. 웹 사이트가 JavaScript를 사용하지 않는 사용자를 유치 할 수도 있습니다. 이러한 사용자를 수용하려면 기본적으로 대안의 구식 인터페이스를 제공해야하며 최신 브라우저의 경우 즉석 (JavaScript)을 사용하여 즉시 수정할 수 있습니다. 요청을 보내

이제 xmlhttprequest를 생성하는 메소드가 있습니다. 요청을하는 데 사용하는 함수를 작성해 봅시다. 우리는 다음과 같은 doreq 메소드를 시작합니다 : Doreq의 첫 번째 부분은 init init를 호출하여 xmlhttprequest 클래스의 인스턴스를 생성하고 성공하지 못한 경우 빠른 경고를 표시합니다. 요청 설정 다음으로, 우리의 코드는 http 요청을 설정하기 위해 xmlhttprequest 클래스의 새로운 인스턴스 - 를 시작합니다.

열기 메소드는 세 가지 매개 변수를 취합니다 :

1. 방법 -이 매개 변수는 사용할 HTTP 요청 방법의 유형을 식별합니다. 가장 일반적으로 사용되는 방법은 Get and Post입니다

방법은 대소 문자에 민감합니다 HTTP 사양 (RFC 2616)에 따르면, 이러한 요청 방법의 이름은 사례에 민감합니다. 사양에 설명 된 방법은 모든 대문자로 정의되므로 항상 모든 대문자에 메소드를 입력해야합니다.

function HelloWorld() {  <br>
  this.message = 'Hello, world!';  <br>
  this.sayMessage = function() {  <br>
    window.alert(this.message);  <br>
  };  <br>
}

로그인 후 복사

2. URL -이 매개 변수는 요청중인 페이지를 식별합니다 (또는 메소드가 게시되는 경우에 게시 됨). 교차 도메인

일반 브라우저 보안 설정을 사용하면 HTTP 요청을 다른 도메인으로 보낼 수 없습니다. 예를 들어, ajax.net에서 제공되는 페이지는 사용자가 그러한 요청을 허용하지 않는 한 Remotescripting.com에 요청을 보낼 수 없습니다.

3. 비동기 플래그 -이 매개 변수가 true로 설정되면 요청에 대한 응답을 기다리는 동안 JavaScript가 정상적으로 계속 실행됩니다. 요청 상태가 변경됨에 따라 요청의 변경 상태를 처리 할 수 있도록 이벤트가 해고됩니다. 매개 변수를 False로 설정하면 응답이 서버에서 돌아올 때까지 JavaScript 실행이 중지됩니다. 이 접근법은 콜백 함수를 사용하는 것보다 조금 더 간단한 이점이 있습니다. 코드에서 요청을 보내고 나면 응답을 바로 처리 할 수 있지만 큰 단점은 서버에서 요청을 보내고 처리하는 동안 코드가 일시 중지되고 응답이 수신된다는 것입니다. 서버와 비동기 적으로 통신하는 능력이 Ajax 응용 프로그램의 요점이므로, 이는 true로 설정해야합니다.

. Ajax 클래스에서 메소드 및 비동기 속성은 합리적인 기본값 (get and true)으로 초기화되지만 항상 대상 URL을 설정해야합니다. OnreadyStateChange 이벤트 핸들러 설정 http 요청이 서버에서 처리되면 진행 상황은 ReadyState 속성에 대한 변경으로 표시됩니다. 이 속성은 요청 시작부터 마무리까지 순서대로 나열된 다음 상태 중 하나를 나타내는 정수입니다.

0 : 비 초기화 - 오픈은 아직 호출되지 않았습니다 1 :로드 - Send는 아직 호출되지 않았습니다. 2 :로드 - Send가 호출되었지만 응답은 아직 사용할 수 없습니다. 3 : 대화식 - 응답이 다운로드되고 응답 텍스트 속성은 부분 데이터를 보유합니다. 4 : 완료 - 응답이로드되고 요청이 완료되었습니다.

xmlhttprequest 객체는 ReadyStateChange 이벤트를 발사하여 각 상태 변경에 대해 알려줍니다. 이 이벤트의 핸들러에서 요청의 ReadyState를 확인하고 요청이 완료되면 (즉, ReadyState가 4로 변경 될 때) 서버의 응답을 처리 할 수 있습니다. Ajax 코드의 기본 개요는 다음과 같습니다.

우리는“응답을 처리하기 위해 일을하는 방법”을 조금만 논의 할 것입니다. 지금은 요청이 전송되기 전에이 이벤트 핸들러를 설정해야한다는 점을 명심하십시오. 요청을 보내 XMLHTTPREQUEST 클래스의 보내기 메소드를 사용하여 와 같이 http 요청을 시작하십시오.

보내기 메소드는 하나의 매개 변수를 취하며 게시물 데이터에 사용됩니다. 요청이 현재 요청과 같이 서버에 데이터를 전달하지 않는 간단한 GET 일 때이 매개 변수를 NULL로 설정합니다.

범위 손실과 이것

OnreadyStateChange가 이상한 변수 할당이 포함되어 있음을 알 수 있습니다.

이 새로운 변수 인 자체는 비동기 이벤트 처리기를 사용하는 JavaScript 개발자가 종종 경험하는 "스코프 손실"이라는 문제에 대한 솔루션입니다. 비동기 이벤트 핸들러는 일반적으로 xmlhttprequest와 함께 사용되며 settimeout 또는 setInterval과 같은 함수와 함께 사용됩니다. 이 키워드는 객체 지향 JavaScript 코드의 속기로 사용되어 "현재 객체"를 참조하십시오. 다음은 빠른 예입니다. Scopetest라는 클래스 :

이 코드는 Scopetest 클래스의 인스턴스를 생성 한 다음 해당 객체의 DOTEST 메소드를 호출하여 "Scopetest의 인사말!"메시지를 표시합니다. 단순 해요? 이제 Scopetest 클래스에 간단한 xmlhttprequest 코드를 추가해 봅시다. 웹 서버의 홈페이지에 대한 간단한 GET 요청을 보내고 응답이 접수되면 this.message and self.message의 내용을 표시합니다.

그렇다면 어떤 메시지가 표시됩니까? 답은 그림 2.1에 표시되어 있습니다 우리는 Self.message가 우리가 기대하는 인사말 메시지이지만, 이에 무슨 일이 있었는지 message? 키워드를 사용하여“이 코드를 실행하는 객체”를 참조하는 편리한 방법입니다. 그러나 이것은 하나의 작은 문제가 있습니다. 그 의미는 물체 외부에서 호출 될 때 변경됩니다. 이것은 실행 컨텍스트라고 불리는 결과입니다. 객체 내부의 모든 코드는 동일한 실행 컨텍스트에서 실행되지만 이벤트 처리기와 같은 다른 객체에서 실행되는 코드는 호출 객체의 실행 컨텍스트에서 실행됩니다. 이것이 의미하는 바는 객체 지향 JavaScript를 작성할 때이 키워드를 사용하여 이벤트 핸들러 코드의 객체를 참조 할 수 없다는 것입니다 (위의 OnreadyStateChange와 같이). 이 문제를 범위 손실이라고합니다 이 개념이 아직 100% 명확하지 않다면 너무 걱정하지 마십시오. 다음 장에서는이 문제에 대한 실제 시연이 보일 것입니다. 그 동안 코드 예제에서 변수 자체가 보이면 스코프 상실 문제를 처리하는 것이 포함되어 있음을 명심하십시오. .

<.> 그림 2.1. Scopetest 클래스로 표시된 메시지

응답 처리

이제 우리는 HTTP 요청에 대한 서버의 응답을 처리하기 위해 코드를 작성할 준비가되었습니다. 우리가 OnreadyStateChange 이벤트 핸들러에 남겨둔“응답을 처리하기위한 것”주석을 기억하십니까? 우리는 그 일을 할 코드를 썼을 때입니다! 함수는 세 가지 작업을 수행해야합니다. 자신의 Ajax 웹 응용 프로그램을 구축하십시오
응답이 오류인지 아닌지 알아냅니다.

원하는 형식으로 응답을 준비하십시오 원하는 핸들러 함수에 대한 응답을 전달하십시오

ajax 클래스의 내부 기능에 아래 코드를 포함시킵니다. 응답이 완료되면 xmlhttprequest 오브젝트의 상태 속성에서 요청이 성공했는지 여부를 나타내는 코드가 반환됩니다. 상태 속성에는 완료된 요청의 HTTP 상태 코드가 포함됩니다. 요청 된 페이지가 누락 된 경우 코드 404, 서버 측 스크립트에서 오류가 발생한 경우 500, 요청이 성공한 경우 200 등이 있습니다. 이 코드의 전체 목록은 HTTP 사양 (RFC 2616)에 제공됩니다. 숫자가 좋지 않습니까?

코드를 기억하는 데 어려움이있는 경우 걱정하지 마십시오. 오류에 대한 좀 더 자세한 내용을 알려주는 짧은 메시지가 포함 된 Statustext 속성을 사용할 수 있습니다 (예 : "찾을 수 없음", "내부 서버 오류", "OK").

. 우리의 ajax 클래스는 서버의 응답을 세 가지 형식으로 제공 할 수 있습니다. 정상적인 JavaScript 문자열, W3C XML dom을 통해 액세스 할 수있는 XML 문서 개체 및 요청을하는 데 사용 된 실제 XMLHTTPREQUEST 객체로서의 응답을 제공 할 수 있습니다. 이들은 텍스트, XML 또는 객체로 설정할 수있는 ajax 클래스의 응답 성분에 의해 제어됩니다. 응답 내용은 XMLHTTPREQUEST 객체의 두 속성을 통해 액세스 할 수 있습니다.

responeetext -이 속성에는 서버의 응답이 일반 문자열로 포함됩니다. 오류의 경우 웹 서버 오류 페이지 HTML이 포함됩니다. 응답이 반환되는 한 (즉, ReadyState가 4가됩니다),이 속성은 데이터가 포함되지만, 기대하는 것은 아닐 수도 있습니다. responsexml -이 속성에는 XML 문서 개체가 포함되어 있습니다. 응답이 XML이 아닌 경우이 속성은 비어 있습니다.

ajax 클래스는 응답 특성을 텍스트로 초기화하므로 기본적으로 응답 핸들러가 서버의 컨텐츠를 JavaScript 문자열로 전달됩니다. XML 컨텐츠로 작업하는 경우 ResponseFormat 속성을 XML로 변경하여 대신 XML 문서 개체를 꺼낼 수 있습니다. 정말 공상을 원할 경우 사용할 수있는 옵션이 하나 더 있습니다. 실제 XMLHTTPREQUEST 객체 자체를 핸들러 기능으로 반환 할 수 있습니다. 이를 통해 상태 및 Statustext 속성과 같은 것들에 직접 액세스 할 수 있으며 특정 클래스의 오류를 다르게 처리하려는 경우 유용 할 수 있습니다. 예를 들어 404 오류의 경우 추가 로깅을 완료합니다. 올바른 컨텐츠 유형 설정 모든 주요 브라우저에서 XMLHTTPREQUEST 구현을 사용하려면 응답을 XML로 처리하려면 HTTP 응답의 컨텐츠 유형을 올바르게 설정해야합니다. 컨텐츠 유형의 텍스트/XML (또는 응용 프로그램/XML 또는 Application/XHTML XML)으로 반환 된 잘 형성된 XML은 XMLHTTPREQUEST 객체의 응답 XML 속성을 올바르게 채 웁니다. 비 XML 컨텐츠 유형은 해당 속성에 대해 NULL 또는 정의되지 않은 값을 초래합니다. 그러나 그러나 Firefox, Safari 및 Internet Explorer 7은 XML 문서에 대한 XMLHTTPREQUEST의 선택에 관한 방법을 제공합니다. 우리의 간단한 ajax 클래스 클래스는 setMimeType 메소드를 사용하여 이것에 연결됩니다 :

그런 다음 Doreq 메소드에서는 시도 내에서 ResidentemimeType를 호출합니다.

웹 애플리케이션의 전면 및 후면 끝을 모두 제어 할 수없는 환경에서는 비협조적인 서버에서 컨텐츠 유형 헤더를 무시할 수있는 것이 매우 중요 할 수 있습니다. 오늘날의 많은 앱 액세스 서비스 및 많은 이질적인 도메인 또는 소스의 컨텐츠에 액세스하기 때문에 특히 그렇습니다. 그러나이 기술은 Internet Explorer 6 또는 Opera 8에서 작동하지 않으므로 오늘날 응용 프로그램에서 사용하기에 적합하지 않을 수 있습니다. 응답 핸들러

HTTP 1.1 사양에 따르면, 200에서 299 사이의 코드가있는 응답은 성공적인 응답입니다. 우리가 정의한 OnreadyStateChange 이벤트 핸들러는 상태 속성을보고 응답 상태를 얻습니다. 코드가 성공적인 응답을 위해 올바른 범위 내에있는 경우 OnreadyStateChange 이벤트 핸들러는 응답 핸들러 메소드 (handleresp 속성에 의해 설정됨)에 대한 응답을 전달합니다. 응답 핸들러는 물론 응답이 무엇인지 알아야하므로 응답을 매개 변수로 전달합니다. 우리는이 과정이 나중에 행동하는 것을 볼 것입니다. 핸들러 메소드가 사용자 정의이므로 코드는 메소드가 메소드를 실행하려고하기 전에 메소드가 올바르게 설정되었는지 확인하기 위해 CURSORY 검사를 수행합니다. 오류 핸들러 상태 속성에 요청에 오류가 있음을 나타내는 경우 (즉, 200 ~ 299 코드 범위 외부) 서버의 응답은 HonderERR 속성의 오류 핸들러로 전달됩니다. Ajax 클래스는 이미 오류 핸들러에 대한 합리적인 기본값을 정의하므로 호출하기 전에 정의 할 필요가 없습니다. handleerr 속성은 다음과 같이 보이는 함수를 가리 킵니다.

이 메소드는 팝업이 차단되지 않았는지 확인한 다음 새 브라우저 창에 서버 오류 페이지 컨텐츠의 전체 텍스트를 표시하려고합니다. 이 코드는 시도를 사용합니다. 캐치 블록을 사용하므로 사용자가 팝업을 차단 한 경우 컷 다운 버전의 오류 메시지를 표시하고보다 자세한 오류 메시지에 액세스하는 방법을 알려줄 수 있습니다. 이것은 최종 사용자에게 정보를 적게 보여주고 싶을 수도 있지만, 이것은 편집증 수준에 달려 있습니다. 자신의 사용자 정의 오류 핸들러를 사용하려면 Sethandlererr를 사용할 수 있습니다.

또는 하나의 진정한 핸들러

단일 함수를 사용하여 성공적인 응답과 오류를 모두 처리 할 수 있습니다. Ajax 클래스의 편의 방법 인 Sethandlerboth는 이것을 쉽게 설정합니다.

Sethandlerboth로 매개 변수로 전달 된 모든 함수는 성공적인 응답과 오류를 모두 처리합니다. 이 설정은 클래스의 응답 속성을 객체로 설정하는 사용자에게 유용 할 수 있습니다. 이는 ResponseText 또는 Responsexml 속성의 값이 아니라 요청을 만드는 데 사용되는 xmlhttprequest 객체를 유발합니다. 응답 핸들러에게 전달됩니다.

요청을 중단하는

때때로, 자신의 경험에서 알 수 있듯이 웹 페이지는로드하는 데 오랜 시간이 걸립니다. 웹 브라우저에는 중지 버튼이 있지만 Ajax 클래스는 어떻습니까? 이곳은 Abort 방법이 작동하는 곳입니다 :

function HelloWorld() {  <br>
  this.message = 'Hello, world!';  <br>
  this.sayMessage = function() {  <br>
    window.alert(this.message);  <br>
  };  <br>
}

로그인 후 복사

이 메소드는 OnreadyState 이벤트 핸들러를 빈 함수로 변경하고 XMLHTTPREQUEST 클래스의 인스턴스에서 ABORT 메소드를 호출 한 다음 생성 한 인스턴스를 파괴합니다. 이렇게하면 중단되는 요청을 위해 독점적으로 설정된 속성이 재설정됩니다. 다음에 요청이 이루어지면 init 메소드가 호출되고 해당 속성이 재 구체화됩니다.

그렇다면 왜 OnreadyState 이벤트 핸들러를 변경해야합니까? XMLHTTPREQUEST의 많은 구현이 중단되면 요청 상태가 변경되었음을 나타냅니다. 더 나쁜 것은 이러한 이벤트가 4 인의 ReadyState가 완성된다는 것입니다. 이는 예상대로 완성 된 모든 것이 완료되었음을 나타냅니다 (부분적으로는 사실입니다. 분명히, 우리는 요청을 중단 할 때 응답 핸들러가 호출되기를 원하지 않으므로 중단을 호출하기 직전에 기존 핸들러를 제거합니다.

. 랩핑

지금까지 우리가 가지고있는 코드를 감안할 때, ajax 클래스는 요청을하기 위해 두 가지만 필요합니다.

대상 url 응답 의 처리기 기능 DOGET라는 메소드를 제공 하여이 두 속성을 모두 설정하고 요청을 시작하겠습니다. 두 개의 예상 매개 변수와 함께 URL 및 핸드와 함께이 함수에는 세 번째 매개 변수 : 형식이 있음을 알 수 있습니다. 이것은 핸들러 기능으로 전달되는 서버 응답 형식을 변경할 수있는 선택적 매개 변수입니다. 형식 값을 전달하지 않으면 Ajax 클래스의 응답 성분이 텍스트 값으로 기본값을 제공하므로 핸들러는 responseText 속성의 값을 전달합니다. 대신 XML 또는 객체를 형식으로 전달할 수 있습니다. 이는 응답 핸들러로 전달되는 매개 변수를 XML DOM 또는 XMLHTTPREQUEST 객체로 변경할 수 있습니다. 예 : 간단한 테스트 페이지

마침내 우리가 배운 모든 것을 함께 넣을 시간입니다! 이 Ajax 클래스의 인스턴스를 만들어 요청을 보내고 응답을 처리하는 데 사용하겠습니다. 이제 클래스의 코드가 ajax.js라는 파일에 있으므로 ajax 클래스를 사용하려는 웹 페이지는

Ajax 클래스에서 가장 기본적인 요청을하려면 다음과 같은 일을 할 수 있습니다.

function HelloWorld() {  <br>
  this.message = 'Hello, world!';  <br>
  this.sayMessage = function() {  <br>
    window.alert(this.message);  <br>
  };  <br>
}

로그인 후 복사

이것은 ajax 클래스의 인스턴스를 생성하여 fakeserver.php라는 페이지에 간단한 요청을 만들고 결과를 텍스트로 핸드 함수로 전달합니다. Fakeserver.php가 사용하려는 XML 문서를 반환 한 경우 다음과 같이 할 수 있습니다.

이 경우 SomePage.php가 실제로 유효한 XML을 제공하고 콘텐츠 유형 HTTP 응답 헤더가 Text/XML (또는 적절한 다른)로 설정되었음을 절대적으로 확신하고 싶습니다.

. 페이지 만들기 이제 우리는 Ajax 객체를 만들고 요청에 대한 간단한 핸들러 기능을 설정 했으므로 이제 코드를 작동시킬 차례입니다. 가짜 서버 페이지 위의 코드에서 요청의 대상 URL이 fakeserver.php라는 페이지로 설정되어 있음을 알 수 있습니다. 이 데모 코드를 사용하려면 동일한 PHP 지원 웹 서버에서 ajaxtest.html 및 fakeserver.php를 모두 제공해야합니다. 간단한 ASP로 IIS 웹 서버에서이를 수행 할 수 있습니다. 가짜 서버 페이지는 아래의 PHP 코드를 사용하여 웹 서버의 다양한 응답 시간을 시뮬레이션하는 초기 페이지입니다.

var hw = new HelloWorld();  <br>
hw.sayMessage();  <br>
hw.message = 'Goodbye';  <br>
hw.sayMessage();

로그인 후 복사

그것은이 작은 코드 스크랩입니다. 3 초에서 12 초 사이에 기다린 다음 인쇄합니다. fakeserver.php 코드는 텍스트/일반에 대한 응답의 컨텐츠 유형 헤더를 설정합니다. 전달되는 페이지의 내용에 따라 응답을 위해 다른 컨텐츠 유형을 선택할 수 있습니다. 예를 들어, XML 문서를 발신자에게 전달하는 경우 자연스럽게 Text/XML을 사용하고 싶을 것입니다. 아래 코드에서 알 수 있듯이 일부 기능 (예 : Sleep)은 쉽게 사용할 수 없지만 ASP에서도 잘 작동합니다.

이 책 전체에서 모든 서버 측 예제는 PHP로 작성되지만 ASP, ASP.NET, Java, Perl 또는 웹 서버를 통해 콘텐츠를 제공 할 수있는 모든 언어로 쉽게 쓸 수 있습니다.

setMimeType 메소드 를 사용하십시오 XML로 구문 분석하려는 유효한 XML 문서가 포함되어 있다고 알고있는 응답이 있다고 상상해보십시오. 그러나 서버는 텍스트/평원으로서 귀하에게 제공해야합니다. SetMimeType에 추가 호출을 추가하여 Firefox 및 Safari에서 해당 응답을 XML로 구문 분석 할 수 있습니다.

자연스럽게, 서버의 응답이 유효한 XML인지 확인하는 경우에만이 접근법을 사용해야하며 브라우저가 Firefox 또는 Safari인지 확인할 수 있습니다. 페이지를 치는 페이지 이제 진실의 순간이 온다! 로컬 웹 서버를 치고 ajaxtest.html을로드하고 얻는 것을 확인하십시오. 모든 것이 제대로 작동하는 경우 몇 분의 지연이 발생하면 그림 2.2의 표준 자바 스크립트 경보가 표시됩니다.

<.> 그림 2.2. Ajax 클래스가 예상

로 작동하고 있음을 확인합니다 이제 모든 것이 좋고 Ajax 클래스가 제대로 작동하고 있으므로 다음 단계로 이동해야 할 때입니다.

. 예 : 간단한 ajax app

알겠습니다. 그래서 Ajax의 멋진 힘을 사용하여 "OK"를 읽는 작은 작은 JavaScript 경보 상자를 스폰하는 것은 아마도이 책을 구입했을 때 염두에 두었던 것이 아닙니다. 이 xmlhttprequest를 좀 더 유용하게 만드는 예제 코드의 변경 사항을 구현하겠습니다. 동시에이 장의 시작 부분에서 언급 한 간단한 모니터링 응용 프로그램을 만들 것입니다. 앱은 웹 사이트를 핑하고 응답을받는 데 걸리는 시간을보고합니다.

기초를 놓는

우리는 라이브러리가 포함 된 두 개의 javaScript 파일 인 ajax.js와 응용 프로그램의 코드가 포함 된 appmonitor1.js로 연결되는 간단한 HTML 문서로 시작합니다.

페이지 본문에 내용이 거의 없다는 것을 알 수 있습니다. 단일 DIV 요소 만 있습니다. 이것은 Ajax 기능에 의존하는 웹 앱의 상당히 전형적인 것입니다. 종종 Ajax 앱의 컨텐츠는 종종 JavaScript에 의해 동적으로 생성되므로 모든 컨텐츠가 서버에서 생성 한 비 Ajax 웹 응용 프로그램보다 페이지 소스 본문에서 훨씬 적은 마크 업이 나타납니다. 그러나 Ajax가 응용 프로그램의 절대적으로 필수적인 부분이 아닌 경우 응용 프로그램의 일반 HTML 버전을 제공해야합니다. 우리는 ajax 클래스를 사용하는 간단한 컨텐츠로 AppMonitor1.js 파일을 시작합니다 : 우리는 시작 변수를 사용하여 각 요청이 시작되는 시간을 기록합니다.이 그림은 각 요청에 걸리는 시간을 계산하는 데 사용됩니다. 우리는 타이밍 요청에 대한 추가 코드로 Ajax 클래스의 작품을 고무시켜 줄 필요가 없도록 글로벌 변수를 시작합니다. ajax 객체에 대한 호출 직전과 직후에 시작 값을 설정할 수 있습니다. . ajax 변수는 단순히 ajax 클래스의 인스턴스를 보유합니다. dopoll 함수는 실제로 ajax 클래스를 사용하여 HTTP 요청을 만듭니다. 원래 테스트 페이지에서 doget 메소드에 대한 호출을 인식해야합니다.

는 타겟 URL에 시작 값을 매개 변수로 한 쿼리 문자열에 추가했습니다. 우리는 실제로 서버 에서이 값을 사용하지 않을 것입니다. 우리는 인터넷 익스플로러의 지나치게 열성적인 캐싱을 처리하기 위해 임의의 가치로 사용하고 있습니다. 즉, 모든 xmlhttprequest로 작성된 모든 요청을 가져 오며, "기능"을 비활성화하는 한 가지 방법은 쿼리 문자열에 임의 값을 추가하는 것입니다. 시작의 밀리 초 값은 해당 임의 값으로 두 배가 될 수 있습니다. 이 접근법에 대한 대안은 XMLHTTPREQUEST 클래스의 setRequestHeader 메소드를 사용하여 요청에 대한 if-modified-since 헤더를 설정하는 것입니다. 마지막으로, 우리는 dopoll을 창에 첨부하여 모든 것을 시작합니다. showpoll

로 결과를 처리합니다 doget에 전달하는 두 번째 매개 변수는 Ajax 클래스에 함수 showpoll에 대한 응답을 전달하도록 지시합니다. 그 기능의 코드는 다음과 같습니다

이것은 모두 매우 간단합니다. 함수는 단일 매개 변수를 기대합니다.이 매개 변수는 모든 것이 예상대로 진행되면 fakeserver.php에서 반환 된 문자열 확인이어야합니다. 응답이 올바른 경우 코드는 응답이 얼마나 오래 걸렸는지 파악하는 데 필요한 빠른 계산을 수행하고 결과가 포함 된 메시지를 만듭니다. 디스플레이를 위해 그 메시지를 Pollresult로 전달합니다 이 매우 간단한 구현에서 예상 응답 이외의 다른 것은 상당히 간결하고 도움이되지 않는 메시지를 초래합니다. 요청이 실패했습니다. 다음 장 에서이 앱을 업그레이드 할 때 오류 조건 처리를 더욱 강력하게 만들 것입니다. 일단 Pollresult가 설정되면 Printresult 기능으로 전달됩니다.

Printresult 함수는 페이지의 Lone Div 내부의 ShowPoll에서 전송 된 메시지를 표시합니다. 위의 코드의 테스트에 유의하십시오. 위의 코드는 DIV에 자식 노드가 있는지 확인하는 데 사용됩니다. 이것은 이전 반복 에이 DIV에 추가 한 텍스트 또는 페이지 마크 업에 DIV 내부에 포함 된 텍스트를 포함 할 수있는 텍스트 노드의 존재를 확인한 다음 제거 할 수 있습니다. 기존 텍스트 노드를 제거하지 않으면 코드는 새 결과를 페이지에 새 텍스트 노드로 추가하면 더 많은 텍스트가 지속적으로 추가되는 긴 텍스트 문자열을 표시합니다.

function HelloWorld() {  <br>
  this.message = 'Hello, world!';  <br>
  this.sayMessage = function() {  <br>
    window.alert(this.message);  <br>
  };  <br>
}

로그인 후 복사

왜 내부를 사용하지 않는가?

당신은 단순히 div의 InnerHtml 속성을 업데이트 할 수 있습니다.

InnerHtml 속성은 웹 표준이 아니지만 모든 주요 브라우저가 지원합니다. 또한 DOM 방법에 필요한 네 줄과 비교할 때 단일 코드 라인이라는 사실에서 알 수 있듯이 DOM 메소드보다 사용하기가 더 쉽습니다. 페이지에 콘텐츠를 표시하는 방법도 본질적으로 더 좋습니다.

경우에 따라,이 두 가지 접근법의 렌더링 속도 차이를 기반으로 메소드를 선택하게 될 수 있습니다 (InnerHTML은 DOM 메소드보다 빠를 수 있음). 다른 경우, 당신은 코드의 명확성 또는 개인 취향에 따라 결정을 내릴 수 있습니다.

다시 프로세스를 다시 시작합니다

마지막으로, showpoll은 다음과 같이 Settimeout을 사용하여 15 초 안에 원래 Dopoll 함수에 대한 호출을 예약하여 전체 프로세스를 시작합니다.

코드가 Dopoll 함수를 지속적으로 호출한다는 사실은 페이지가로드되면 http는 해당 페이지가 닫힐 때까지 Fakeserver.php 페이지를 폴링하는 요청을 요청합니다. 폴링 변수는 보류중인 작업을 추적하고 클리어 타임 아웃을 사용하여 취소 할 수있는 간격 ID입니다. 설정 타임 아웃 호출의 첫 번째 매개 변수 인 Dopoll은 응용 프로그램의 주요 기능에 대한 포인터입니다. 두 번째는 요청 사이에 경과 해야하는 시간 (초)을 1 초 만에 나타냅니다. 전체 예제 코드

이 간단한 모니터링 애플리케이션으로 첫 번째 시험 실행의 모든 코드는 다음과 같습니다.

좋은 소프트웨어 엔지니어링 원칙을 따르기 위해 JavaScript 코드를 Markup에서 분리하고 두 개의 다른 파일에 넣었습니다.

. 나는이 책의 모든 예제 코드와 비슷한 접근법을 따르고 각 예제의 마크 업, JavaScript 코드 및 CSS를 별도의 파일로 분리합니다. 이 작은 모니터링 앱은 기본적으로 CSS 파일이 없습니다. 다음 장에서 더 멋지게 보이도록 몇 가지 스타일을 추가 할 것입니다. 앱 실행

브라우저에 페이지를로드하십시오. 웹 서버의 루트 디렉토리에 떨어 뜨려 브라우저에서 페이지를 엽니 다. fakeserver.php 페이지가 올바르게 응답하는 경우 그림 2.3에 표시된 디스플레이와 같은 내용이 표시됩니다.

<.> 그림 2.3. 간단한 모니터링 애플리케이션 실행

function HelloWorld() {  <br>
  this.message = 'Hello, world!';  <br>
  this.sayMessage = function() {  <br>
    window.alert(this.message);  <br>
  };  <br>
}

로그인 후 복사

추가 읽기 이 장의 기술과 개념에 대해 더 많이 배우는 데 도움이되는 몇 가지 온라인 리소스가 있습니다.

JavaScript의 객체 모델

http://docs.sun.com/source/816-6409-10/obj.htm

http://docs.sun.com/source/816-6409-10/obj2.htm

Sun Microsystems가 주최하는 JavaScript 버전 1.3에 대한 클라이언트 측 JavaScript 안내서의 객체에 대한이 두 장을 확인하십시오. 첫 번째 장에서는 JavaScript에서 객체 작업을 수행하는 방법을 이해하는 데 필요한 모든 기본 개념을 설명합니다. 두 번째는 JavaScript의 프로토 타입 기반 상속 모델에 대해 더 깊이 들어가므로 JavaScript를 사용하여 객체 지향 코딩의 더 많은 힘을 활용할 수 있습니다. 이것은 JavaScript 객체를 사용하여 개인 인스턴스 변수를 만드는 간단한 소개입니다. JavaScript의 프로토 타입 기반 상속 체계에 대해 더 깊이 이해하는 데 도움이됩니다. xmlhttprequest

Apple 개발자 연결의 좋은 참조 페이지가 있습니다. 그것은 xmlhttprequest 클래스에 대한 훌륭한 개요와 그 방법과 속성에 대한 참조 테이블을 제공합니다. 2002 년에 게시 된이 기사는 새로운 정보로 계속 업데이트되고 있습니다. 여기에는 javaScript 객체 표기법 (JSON) 및 비누뿐만 아니라 헤드 요청 제작 (get or post 대신)에 대한 정보가 포함됩니다.

여기에 또 다른 멋진 개요가 있습니다.이 개요는 다음과 같습니다.이 개요는 XMLHTTPRequest 객체의 덜 사용되지 않은 메소드 (예 : reveridemimeType, setRequestHeader 및 getResponseHeader)를 보여줍니다. 다시,이 참조는 Firefox의 구현에 중점을 둡니다 이것은 xmlhttprequest 구현에 대한 MSDN에 대한 Microsoft의 문서입니다.

요약

시스템 관리자가 여론 조사와 타임 아웃 임계 값 간격을 구성하는 방법 모니터링 프로세스를 시작하고 중지하는 쉬운 방법 이전 요청에 대한 응답 시간의 막대 그래프; 히스토리 목록의 항목 수는 사용자 구성 가능

function HelloWorld() {  <br>
  this.message = 'Hello, world!';  <br>
  this.sayMessage = function() {  <br>
    window.alert(this.message);  <br>
  };  <br>
}

로그인 후 복사

입니다. 사용자 알림 응용 프로그램이 요청 과정에있을 때

요청 시간 초과의 우아한 처리

그림 3.1은 모든 개선 사항을 완료하면 실행 중 응용 프로그램의 모습을 보여줍니다. 이 응용 프로그램의 코드는 AppMonitor2.html의 마크 업, AppMonitor2.js의 JavaScript 코드 및 AppMonitor2.css의 스타일 인 세 가지 파일로 나뉩니다. 우선, 필요한 모든 파일을 AppMonitor2.html에 연결합니다 : .

<..> 그림 3.1. 실행중인 응용 프로그램

 코드 구성 
<function>이 모든 새로운 기능은 우리 앱에 훨씬 더 복잡해 지므로 코드 내에서 어떤 종류의 구성을 설정하기에 좋은시기입니다 (글로벌 범위에 모든 것을 두는 것보다 훨씬 더 나은 옵션). 결국, 우리는 완전히 기능적인 Ajax 응용 프로그램을 구축하고 있으므로 올바르게 구성하고 싶습니다. </function>

로 범위 손실 불행히도, 응용 프로그램의 경우 상황이 그리 쉽지 않을 것입니다. 우리는 앱에서 Settimeout (및 setInterval)에 많은 호출을 사용하므로 JavaScript 클래스를 생성하는 일반적인 방법이 모니터 클래스에서 번거롭게 될 수 있습니다.

. settimeout 함수는 코드의 실행을 지연시키는 데 실제로 편리하지만 심각한 단점이 있습니다. 객체와는 다른 실행 컨텍스트에서 해당 코드를 실행합니다. (우리는 마지막 장에서 SCOPE의 LOSS OF SCOPE라고 불리는이 문제에 대해 조금 이야기했습니다.) 객체 키워드는 새로운 실행 컨텍스트에서 새로운 의미를 갖기 때문에 문제입니다. 따라서 수업 시간에 사용하면 갑자기 기억 상실증이 발생합니다. 이것은 이해하기 어려울 수 있습니다. 빠른 시연을 살펴보면 실제로이 성가심을 실제로 볼 수 있습니다. 우리가 마지막 장에서 보았던 Scopetest 클래스를 기억할 것입니다. 우선, 하나의 속성과 하나의 방법을 가진 간단한 클래스였습니다.

function HelloWorld() {  <br>
  this.message = 'Hello, world!';  <br>
  this.sayMessage = function() {  <br>
    window.alert(this.message);  <br>
  };  <br>
}

로그인 후 복사

이 코드의 결과는“Scopetest의 인사말!”텍스트가 포함 된 예측 가능한 JavaScript Alert Box입니다. settimeout을 사용하여 1 초 안에 메시지를 표시하도록 DOTEST 메소드를 변경하겠습니다.

인사말 메시지 대신,이 버전의 코드에서 발생하는 경고 상자는 "undefined"를 읽습니다. Settimeout으로 Ontimeout을 호출했기 때문에 OnTimeout은 새로운 실행 컨텍스트 내에서 실행됩니다. 이 실행 컨텍스트에서 이것은 더 이상 scopetest 인스턴스를 말하지 않으므로 this.message는 의미가 없습니다. 범위 손실 문제를 처리하는 가장 간단한 방법은 모니터 클래스를 싱글 톤이라고하는 특별한 종류의 클래스로 만드는 것입니다. JavaScript가있는 싱글 톤 "싱글 톤"은 언제든지 해당 클래스의 "단일"인스턴스 만 존재하기 때문에 호출됩니다. 싱글 톤으로 수업을 만드는 것은 놀랍게도 쉽습니다

Keyword New Offer Function에서는 "원샷"생성자가 생성됩니다. Scopetest의 단일 인스턴스를 만듭니다. 완료됩니다. 더 이상 Scopetest 객체를 만들기 위해 사용할 수 없습니다.

. 이 싱글 톤 객체의 DOTEST 메소드를 호출하려면 클래스의 실제 이름을 사용해야합니다 (인스턴스가 하나만 있으므로) :

var hw = new HelloWorld();  <br>
hw.sayMessage();  <br>
hw.message = 'Goodbye';  <br>
hw.sayMessage();

로그인 후 복사

그것은 모두 좋고 좋지만 우리는 범위 문제의 손실을 해결하지 못했습니다. 지금 코드를 시도하려면 이전에 본 것과 동일한 "정의되지 않은"메시지가 표시됩니다. 왜냐하면 이것은 Scopetest 인스턴스를 참조하지 않기 때문입니다. 그러나 싱글 톤을 사용하면 문제를 쉽게 해결할 수 있습니다. 우리가해야 할 일은 키워드 대신 객체의 실제 이름을 사용하는 것입니다.

Scopetest 인스턴스는 하나 뿐이며,이 대신 실제 이름을 사용하고 있으므로 여기에 어떤 Scopetest의 인스턴스가 참조되는지 혼란이 없습니다. 이 코드를 실행하면 "Scopetest에서 인사말!"이라는 예상 값이 표시됩니다. JavaScript Alert Box에서 이제, 나는 객체 코드 전체에서 실제 객체 이름을 사용하는 데 지쳤으며, 가능한 한 어디든지 이와 같은 바로 가기 키워드를 사용하고 싶습니다. 따라서 일반적으로 나는 이것 대신 사용할 수있는 가변 자체를 만들고 다음과 같이 각 방법의 맨 위에있는 개체 이름을 가리 킵니다.

이것은 그다지 짧은 방법에서 약간 어리석은 것처럼 보이지만, 더 긴 코드 덩어리에서는 객체를 참조하는 데 사용할 수있는 속기 솔루션을 사용하는 것이 좋습니다. 나는 스스로를 사용하지만, 당신이 원한다면 나를 사용할 수 있습니다.

모니터 객체 생성

이제 Settimeout에서 스코프 손실 문제를 해결하는 코드 조직에 대한 계획이 있었으므로 이제 기본 모니터 클래스를 만들 시간입니다.

function HelloWorld() {  <br>
  this.message = 'Hello, world!';  <br>
  this.sayMessage = function() {  <br>
    window.alert(this.message);  <br>
  };  <br>
}

로그인 후 복사

TargetUrl, PollInterval, MaxPollentries 및 TimeOutthreshold의 첫 네 가지 속성은 클래스 초기화의 일부로 초기화됩니다. 응용 프로그램의 구성에 정의 된 값을 사용하여 다음 섹션에서 살펴볼 것입니다.

. 다음은 다른 속성에 대한 간단한 요약입니다

ajax - 모니터링하는 서버에 HTTP 요청을하는 Ajax 클래스의 인스턴스. 시작 - 마지막 요청이 전송 된 시간을 기록하는 데 사용됩니다.

pollarray - 서버 응답 시간을 보유하는 배열; Constant Max_Poll_Entries는이 배열에있는 항목 수를 결정합니다. Pollhand, Timeouth 및-Settimeout에 의해 반환 된 간격 ID는 두 가지 다른 프로세스 (주요 폴링 프로세스)와 각 요청에 대해 사용자 정의 타임 아웃 기간을 제어하는 타임 아웃 감시자를 요구합니다. reqstatus - 요청이 진행될 때 사용자에게 알리는 상태 애니메이션에 사용됩니다. 이를 달성 한 코드는 상당히 복잡하므로 다른 싱글 톤 클래스를 작성하여 처리 할 것입니다. reqstatus 속성은 해당 클래스의 단일 인스턴스를 가리 킵니다.

애플리케이션 구성 및 초기화 이 응용 프로그램을보고있는 웹 마스터는 상당히 시원하다고 생각할 수 있지만, 원하는 첫 번째 사항 중 하나는 앱의 폴링 간격을 쉽게 구성하는 방법 또는 앱이 모니터링하는 사이트에 대한 요청간에 경과하는 시간입니다. 글로벌 상수를 사용하여 폴링 간격을 쉽게 구성 할 수 있습니다. 이 스크립트의 모든 사용자가 폴링 간격을 설정하는 것을 매우 간단하게하려면 appmonitor2.html의 헤드 내의 스크립트 요소에 코드 의이 섹션을 넣을 것입니다.

이 변수 이름은 All-Caps로 작성되었음을 알 수 있습니다. 이것은 코드 초기에 설정된 값, 코드가 실행될 때 변경되지 않는 상수처럼 작동해야한다는 표시입니다. 상수는 많은 프로그래밍 언어의 특징이지만 불행히도 JavaScript는 그 중 하나가 아닙니다. (최신 버전의 JavaScript를 사용하면 Constkeyword로 실제 상수를 설정할 수 있지만이 시설은 널리 지원되지 않습니다 (많은 최신 브라우저에서도)이 상수는 Class의 첫 4 가지 속성과 직접 관련이 있습니다 : TargetUrl, Pollinterval, Maxpollentries 및 TimeOutthreshold. 이 속성은 클래스의 초기 방법에서 초기화됩니다 :

클래스의 일부 속성을 초기화 할뿐만 아니라 INT 메소드는 두 가지 방법을 호출합니다. TOGGLEAPPSTATUS, 폴링 시작 및 중지를 담당합니다. Reqstatus는 잠시 전에 논의한 상태 싱글 톤 클래스의 인스턴스입니다. 이 init 메소드는 Window에 묶여 있습니다.

function HelloWorld() {  <br>
  this.message = 'Hello, world!';  <br>
  this.sayMessage = function() {  <br>
    window.alert(this.message);  <br>
  };  <br>
}

로그인 후 복사

ui 설정 이 응용 프로그램의 첫 번째 버전은 페이지가로드 될 때 시작되었고 브라우저 창이 닫힐 때까지 실행되었습니다. 이 버전에서는 사용자에게 폴링 프로세스를 켜거나 끄는 데 사용할 수있는 버튼을 제공하려고합니다. ToggleAppStatus 메소드는 이것을 우리를 위해 처리합니다 : 알겠습니다. 따라서 ToggleAppStatus는 실제로 작업을 수행하지 않지만 다음을 수행하는 메소드를 호출합니다. ToggleButton은 시작 버튼을 중지 버튼으로 변경하고 그 반대로 변경하고 응용 프로그램의 상태 메시지를 업데이트합니다. 이 각 방법을 자세히 살펴 보겠습니다.

토글 부튼 메서드

var hw = new HelloWorld();  <br>
hw.sayMessage();  <br>
hw.message = 'Goodbye';  <br>
hw.sayMessage();

로그인 후 복사

이 방법은 "정지"와 "시작"상태 사이의 기본 응용 프로그램을 전환합니다. Dom-Manipulation 방법을 사용하여 적절한 버튼을 동적으로 생성하여 올바른 텍스트 및 Onclick 이벤트 핸들러를 할당합니다.

이 방법에 대한 유일한 매개 변수는 중지되고, 폴링이 중지되었음을 나타내거나, 폴링이 시작되었음을 나타내는 사실을 나타냅니다. 이 메소드의 코드에서 볼 수 있듯이 버튼이 생성되며 응용 프로그램이 중지되면 시작되거나 응용 프로그램이 현재 서버를 폴링하는 경우 중지됩니다. 또한 PollserverStart 또는 PollServerStop을 버튼의 ONCLICK 이벤트 핸들러로 할당합니다. 이 이벤트 핸들러는 각각 폴링 프로세스를 시작하거나 중지합니다.

이 메소드가 init에서 호출되면 (ToggleAppStatus를 통해) 중지 된 정지가 True로 설정되어 응용 프로그램이 시작될 때 버튼이 시작됩니다. 이 코드가 ID ButtonArea와 DIV를 요구할 때, 지금 우리의 마크 업에 추가합시다 :

TogglestatusMessage 메소드

"시작"또는 "정지"라는 단어가있는 버튼을 표시하는 것은 프로그래머 나 엔지니어가 응용 프로그램의 상태를 알아내는 데 필요한 모든 것일 수 있지만 대부분의 일반 사람들은 응용 프로그램과 함께 진행되는 일을 해결하기 위해 조금 더 명확하고 명확한 메시지가 필요합니다. 이 업그레이드 된 응용 프로그램 의이 버전은 페이지 상단에 상태 메시지가 표시되어 사용자에게 응용 프로그램의 전체 상태 (중지 또는 실행) 및 폴링 프로세스 상태에 대해 알려줍니다. 애플리케이션 상태를 표시하려면 응용 프로그램의 상태 표시 줄에 앱 상태를 나타내는 앱 상태 : 중지 또는 앱 상태 : 실행. 마크 업에서 버튼이 나타나는 위치의 상태 메시지를 삽입 해 드리겠습니다. 우리는 마크 업에 메시지의 "앱 상태"부분 만 포함합니다. 메시지의 나머지 부분은 id currentAppState와 함께 스팬에 삽입됩니다.

togglestatusmessage 메소드는 currentAppstate 스팬 내부에 표시 할 수있는 단어 사이를 토글합니다.

일단 UI가 설치되면 응용 프로그램이 프라이밍되어 폴링 및 녹음 시간을 시작할 준비가되었습니다.
Example 2.1. ajax.js (excerpt) <br> <br> function Ajax() { <br> this.req = null; <br> this.url = null; <br> this.method = 'GET'; <br> this.async = true; <br> this.status = null; <br> this.statusText = ''; <br> this.postData = null; <br> this.readyState = null; <br> this.responseText = null; <br> this.responseXML = null; <br> this.handleResp = null; <br> this.responseFormat = 'text', // 'text', 'xml', or 'object' <br> this.mimeType = null; <br> }
로그인 후 복사
로그인 후 복사
로그인 후 복사
진행중인 작업 점검

이제 당신이 지금까지 왔으니, 당신의 일이 실제로 행동하는 것을 볼 수있어서 좋을 것입니다. 불행히도, 우리는 응용 프로그램에서 여전히 많은 느슨한 끝을 얻었습니다. 우리는 Singleton Class라는 싱글 톤 클래스를 간단히 언급했지만 아직 만들지는 않았지만 여전히 이벤트 처리기가 남아 있습니다. 그러나 두려워하지 마십시오! 우리는 몇 개의 클래스와 기능 스터브로 응용 프로그램을 신속하게 제출하고 실행할 수 있습니다.

우리는 하나의 빈 메소드로 해당 상태 싱글 톤 클래스를 만들기 시작합니다.

상태 클래스는 모니터 클래스에서 사용되므로 모니터 전에 상태를 선언해야합니다. 그러면 버튼의 Onclick 이벤트 처리기를 모니터 클래스에 추가합니다. 우리는 무대 뒤에서 무슨 일이 일어나고 있는지 알 수 있도록 경고 대화 상자를 표시하게 할 것입니다.

function HelloWorld() {  <br>
  this.message = 'Hello, world!';  <br>
  this.sayMessage = function() {  <br>
    window.alert(this.message);  <br>
  };  <br>
}

로그인 후 복사

이 두 개의 간단한 스터브가 제자리에 있으면 이제 응용 프로그램이 테스트 드라이브를 준비해야합니다.

<.> 그림 3.2. 겸손한 시작

그림 3.2에 표시된 디스플레이에서 시작 버튼을 클릭하면 앞으로 더 많은 것을 약속하는 경고 상자가 표시됩니다. 그 약속을 잘 시작합시다.

서버를 폴링하는

var hw = new HelloWorld();  <br>
hw.sayMessage();  <br>
hw.message = 'Goodbye';  <br>
hw.sayMessage();

로그인 후 복사

첫 번째 단계는 시작 버튼의 ONCLICK 이벤트 핸들러 인 PollServerStart를 살펴 보는 것입니다.

이 코드는 즉시 Dopoll 메소드를 호출합니다.이 코드는 2 장에서 구축 한 앱 모니터와 마찬가지로 기본 XMLHTTPREQUEST가 서버를 폴링하기 위해 HTTP 요청을 할 책임이 있습니다. 요청이 전송되면 코드는 ToggleAppStatus를 호출하여 폴링이 진행 중임을 나타 내기 위해 허위로 전달합니다.

여론 조사 간격은 어디에 있습니까?

왜이 모든 대화가 설문 조사 간격을 설정하는지에 대해 우리의 코드가 서버에 대한 요청에 따라 바로 점프하는 이유가 궁금 할 것입니다. 시간 지연은 어디에 있습니까? 대답은 첫 번째 요청에서 시간 지연을 원하지 않는다는 것입니다. 사용자가 버튼을 클릭하고 어떤 일이 발생하기 전에 10 초 지연이 있으면 앱이 고장 났다고 생각합니다. 응용 프로그램이 실행되면 발생하는 모든 후속 요청간에 지연이 필요하지만 사용자가 해당 버튼을 처음 클릭하면 폴링이 즉시 시작되기를 원합니다. 이 버전의 앱 모니터와 마지막 장에서 본 Dopoll의 유일한 차이점은 클래스의 속성을 접두사와 설정 타임 아웃 호출을위한 자체를 사용하는 것입니다.
Settimeout에 대한 우리의 호출은 타임 아웃 임계 값이 통과되면 브라우저에 handletimeout을 호출하도록 지시합니다. 또한 반환 된 간격 ID를 추적하고 있으므로 Showpoll이 응답을 받으면 핸들 리메이트에 대한 호출을 취소 할 수 있습니다. 다음은 Showpoll 메소드의 코드입니다. 서버의 응답을 처리합니다.<div class="code" style="position:relative; padding:0px; margin:0px;"><div class="code" style="position:relative; padding:0px; margin:0px;"><div class="code" style="position:relative; padding:0px; margin:0px;"><div class="code" style="position:relative; padding:0px; margin:0px;"><div class="code" style="position:relative; padding:0px; margin:0px;"><div class="code" style="position:relative; padding:0px; margin:0px;"><div class="code" style="position:relative; padding:0px; margin:0px;"><div class="code" style="position:relative; padding:0px; margin:0px;"><div class="code" style="position:relative; padding:0px; margin:0px;"><div class="code" style="position:relative; padding:0px; margin:0px;"><div class="code" style="position:relative; padding:0px; margin:0px;"><div class="code" style="position:relative; padding:0px; margin:0px;"><div class="code" style="position:relative; padding:0px; margin:0px;"><div class="code" style="position:relative; padding:0px; margin:0px;"><div class="code" style="position:relative; padding:0px; margin:0px;"><pre class="brush:php;toolbar:false">function HelloWorld() { <br> this.message = 'Hello, world!'; <br> this.sayMessage = function() { <br> window.alert(this.message); <br> }; <br> }</pre><div class="contentsignin">로그인 후 복사</div></div><div class="contentsignin">로그인 후 복사</div></div><div class="contentsignin">로그인 후 복사</div></div><div class="contentsignin">로그인 후 복사</div></div><div class="contentsignin">로그인 후 복사</div></div><div class="contentsignin">로그인 후 복사</div></div><div class="contentsignin">로그인 후 복사</div></div><div class="contentsignin">로그인 후 복사</div></div><div class="contentsignin">로그인 후 복사</div></div><div class="contentsignin">로그인 후 복사</div></div><div class="contentsignin">로그인 후 복사</div></div><div class="contentsignin">로그인 후 복사</div></div><div class="contentsignin">로그인 후 복사</div></div><div class="contentsignin">로그인 후 복사</div></div><div class="contentsignin">로그인 후 복사</div></div> <this>이 방법이 가장 먼저하는 일은 Dopoll의 끝에서 이루어진 핸들 리메이트로 지연된 호출을 취소하는 것입니다. 그 후, 우리는 상태 클래스 인스턴스에 애니메이션을 중지하도록 지시합니다 (우리는 이것의 세부 사항을 조금 나중에 살펴볼 것입니다). 이 호출 후 ShowPoll은 응답이 정상인지 확인하여 응답이 서버에서 돌아 오는 데 걸리는 시간을 계산합니다. Ajax 클래스의 오류 처리 기능은 서버의 오류를 처리해야하므로 스크립트는 OK 이외의 다른 것을 반환하지 않아야합니다. <calc> 일단 응답 시간을 계산하면 showpoll은 updatepollArray와 함께 응답 시간을 기록한 다음 printresult에 결과를 표시합니다. 다음 섹션 에서이 두 가지 방법을 모두 살펴 보겠습니다. <p> 마지막으로, 우리는 Dopolldelay에서 또 다른 여론 조사를 예약합니다. 설문 조사 간격이 통과되면 Dopoll에 대한 또 다른 호출을 예약하는 매우 간단한 방법입니다. </p> <progress>이 시점까지 진행 상황을 확인하려면 몇 가지 스터브 방법을 추가해야합니다. 먼저 StartProc 및 StopProc을 상태 클래스에 추가하겠습니다 : <p> <add> 모니터 클래스에 몇 가지 스터브 방법을 추가하겠습니다 : </add></p> <p> <ready> 이제 우리는 진행 상황을 테스트 할 준비가되었습니다. 웹 브라우저에서 AppMonitor2.html을 열고 시작을 클릭하고 Fakeserver.php가 잠에서 깨어날 때까지 기다렸다가 페이지로 다시 보내십시오. <one> 두 가지 결과 중 하나를 기대할 수 있습니다. 페이지에서 응답이 수신되고 그림 3.3에 표시된 것과 유사한 대화 상자가 표시되거나 그림 3.4에 표시된 시간 초과 메시지가 표시됩니다. </one></ready></p> <p> <.> 그림 3.3. Ajax 응용 프로그램에서받은 응답 </.></p> <div class="code" style="position:relative; padding:0px; margin:0px;"><div class="code" style="position:relative; padding:0px; margin:0px;"><div class="code" style="position:relative; padding:0px; margin:0px;"><div class="code" style="position:relative; padding:0px; margin:0px;"><div class="code" style="position:relative; padding:0px; margin:0px;"><div class="code" style="position:relative; padding:0px; margin:0px;"><div class="code" style="position:relative; padding:0px; margin:0px;"><div class="code" style="position:relative; padding:0px; margin:0px;"><div class="code" style="position:relative; padding:0px; margin:0px;"><pre class="brush:php;toolbar:false">var hw = new HelloWorld(); <br> hw.sayMessage(); <br> hw.message = 'Goodbye'; <br> hw.sayMessage();</pre><div class="contentsignin">로그인 후 복사</div></div><div class="contentsignin">로그인 후 복사</div></div><div class="contentsignin">로그인 후 복사</div></div><div class="contentsignin">로그인 후 복사</div></div><div class="contentsignin">로그인 후 복사</div></div><div class="contentsignin">로그인 후 복사</div></div><div class="contentsignin">로그인 후 복사</div></div><div class="contentsignin">로그인 후 복사</div></div><div class="contentsignin">로그인 후 복사</div></div> <you> 그림 3.4에 표시된 시간 초과 메시지를 받으면 걱정하지 마십시오. Ajax 응용 프로그램에서 시간 초과 임계 값은 현재 10 초로 설정되어 있으며 Fakeserver.php는 현재 3 ~ 12 초 사이에 무작위로 선택된 수를 자고 있습니다. 임의 숫자가 10 이상인 경우 Ajax 응용 프로그램은 시간 초과를보고합니다. <p>. </p> <div class="code" style="position:relative; padding:0px; margin:0px;"><div class="code" style="position:relative; padding:0px; margin:0px;"><div class="code" style="position:relative; padding:0px; margin:0px;"><pre class="brush:php;toolbar:false">Example 2.1. ajax.js (excerpt) <br> <br> function Ajax() { <br> this.req = null; <br> this.url = null; <br> this.method = 'GET'; <br> this.async = true; <br> this.status = null; <br> this.statusText = ''; <br> this.postData = null; <br> this.readyState = null; <br> this.responseText = null; <br> this.responseXML = null; <br> this.handleResp = null; <br> this.responseFormat = 'text', // 'text', 'xml', or 'object' <br> this.mimeType = null; <br> }</pre><div class="contentsignin">로그인 후 복사</div></div><div class="contentsignin">로그인 후 복사</div></div><div class="contentsignin">로그인 후 복사</div></div> <..> 그림 3.4. 희망을 포기하는 Ajax 응용 프로그램 <p> </p> 현재, 우리는 폴링을 중지하는 방법을 구현하지 않았으므로 페이지를 다시로드하거나 브라우저 창을 닫아서 중지해야합니다. <out out> 처리 시간 초과 처리 <run> 지금까지 작성한 코드를 실행 한 경우 타임 아웃이보고 되더라도 곧 요청의 응답 시간을보고하는 메시지가 표시되는 것을 알았을 것입니다. 이것은 현재 핸들 리타 아웃이 단순한 스터브에 지나지 않기 때문에 발생합니다. 이 부작용을 얻지 못하도록 그 스텁 위에 구축하는 것을 살펴 보겠습니다. <div class="code" style="position:relative; padding:0px; margin:0px;"><pre class="brush:php;toolbar:false">Example 2.2. ajax.js (excerpt) <br> <br> this.init = function() { <br> if (!this.req) { <br> try { <br> // Try to create object for Firefox, Safari, IE7, etc. <br> this.req = new XMLHttpRequest(); <br> } <br> catch (e) { <br> try { <br> // Try to create object for later versions of IE. <br> this.req = new ActiveXObject('MSXML2.XMLHTTP'); <br> } <br> catch (e) { <br> try { <br> // Try to create object for early versions of IE. <br> this.req = new ActiveXObject('Microsoft.XMLHTTP'); <br> } <br> catch (e) { <br> // Could not create an XMLHttpRequest object. <br> return false; <br> } <br> } <br> } <br> } <br> return this.req; <br> };</pre><div class="contentsignin">로그인 후 복사</div></div> <div class="code" style="position:relative; padding:0px; margin:0px;"><div class="code" style="position:relative; padding:0px; margin:0px;"><div class="code" style="position:relative; padding:0px; margin:0px;"><div class="code" style="position:relative; padding:0px; margin:0px;"><div class="code" style="position:relative; padding:0px; margin:0px;"><div class="code" style="position:relative; padding:0px; margin:0px;"><div class="code" style="position:relative; padding:0px; margin:0px;"><div class="code" style="position:relative; padding:0px; margin:0px;"><div class="code" style="position:relative; padding:0px; margin:0px;"><div class="code" style="position:relative; padding:0px; margin:0px;"><div class="code" style="position:relative; padding:0px; margin:0px;"><div class="code" style="position:relative; padding:0px; margin:0px;"><div class="code" style="position:relative; padding:0px; margin:0px;"><div class="code" style="position:relative; padding:0px; margin:0px;"><div class="code" style="position:relative; padding:0px; margin:0px;"><pre class="brush:php;toolbar:false">function HelloWorld() { <br> this.message = 'Hello, world!'; <br> this.sayMessage = function() { <br> window.alert(this.message); <br> }; <br> }</pre><div class="contentsignin">로그인 후 복사</div></div><div class="contentsignin">로그인 후 복사</div></div><div class="contentsignin">로그인 후 복사</div></div><div class="contentsignin">로그인 후 복사</div></div><div class="contentsignin">로그인 후 복사</div></div><div class="contentsignin">로그인 후 복사</div></div><div class="contentsignin">로그인 후 복사</div></div><div class="contentsignin">로그인 후 복사</div></div><div class="contentsignin">로그인 후 복사</div></div><div class="contentsignin">로그인 후 복사</div></div><div class="contentsignin">로그인 후 복사</div></div><div class="contentsignin">로그인 후 복사</div></div><div class="contentsignin">로그인 후 복사</div></div><div class="contentsignin">로그인 후 복사</div></div><div class="contentsignin">로그인 후 복사</div></div> <let> 여기, handletimeout은 STOPPOLL을 호출하여 응용 프로그램 폴링을 중지합니다. 시간 초과가 발생하고 사용자 인터페이스를 업데이트하고 마지막으로 DopollDelay를 통해 Dopoll에 대한 또 다른 호출을 설정합니다. 우리는 폴링을 중지하는 코드를 별도의 함수로 옮겼습니다. 나중에 다시 방문하고 쇠고기를해야하기 때문입니다. 현재 Stoppoll 메소드는 AJAX 클래스의 중단 방법을 통해 HTTP 요청을 중단합니다. 그러나이 기능이 처리하지 않는 몇 가지 시나리오가 있습니다. 폴링 프로세스를 중지하기위한 완전한 코드를 만들 때 나중에 문제를 해결할 것입니다. 그러나 타임 아웃을 처리 할 목적으로는 정지 폴이 괜찮습니다. <div class="code" style="position:relative; padding:0px; margin:0px;"><div class="code" style="position:relative; padding:0px; margin:0px;"><div class="code" style="position:relative; padding:0px; margin:0px;"><div class="code" style="position:relative; padding:0px; margin:0px;"><div class="code" style="position:relative; padding:0px; margin:0px;"><div class="code" style="position:relative; padding:0px; margin:0px;"><div class="code" style="position:relative; padding:0px; margin:0px;"><div class="code" style="position:relative; padding:0px; margin:0px;"><div class="code" style="position:relative; padding:0px; margin:0px;"><pre class="brush:php;toolbar:false">var hw = new HelloWorld(); <br> hw.sayMessage(); <br> hw.message = 'Goodbye'; <br> hw.sayMessage();</pre><div class="contentsignin">로그인 후 복사</div></div><div class="contentsignin">로그인 후 복사</div></div><div class="contentsignin">로그인 후 복사</div></div><div class="contentsignin">로그인 후 복사</div></div><div class="contentsignin">로그인 후 복사</div></div><div class="contentsignin">로그인 후 복사</div></div><div class="contentsignin">로그인 후 복사</div></div><div class="contentsignin">로그인 후 복사</div></div><div class="contentsignin">로그인 후 복사</div></div>. <p> <we> 이제 응용 프로그램을 다시로드 할 때 타임 아웃은 예상대로 정확하게 수행됩니다. <bar bar> 응답 시간 막대 그래프 </bar></we></p> <the> 이제 모니터링 앱의 새 버전의 고기에! 우리는 응용 프로그램이 가장 최근의 단일 항목뿐만 아니라 과거 응답 시간 목록을 보여주기를 원하며 빠르고 쉽게 읽을 수있는 방식으로 해당 목록을 표시하려고합니다. 러닝 바 그래프 디스플레이는 작업을위한 완벽한 도구입니다. <div class="code" style="position:relative; padding:0px; margin:0px;"><div class="code" style="position:relative; padding:0px; margin:0px;"><div class="code" style="position:relative; padding:0px; margin:0px;"><pre class="brush:php;toolbar:false">Example 2.1. ajax.js (excerpt) <br> <br> function Ajax() { <br> this.req = null; <br> this.url = null; <br> this.method = 'GET'; <br> this.async = true; <br> this.status = null; <br> this.statusText = ''; <br> this.postData = null; <br> this.readyState = null; <br> this.responseText = null; <br> this.responseXML = null; <br> this.handleResp = null; <br> this.responseFormat = 'text', // 'text', 'xml', or 'object' <br> this.mimeType = null; <br> }</pre><div class="contentsignin">로그인 후 복사</div></div><div class="contentsignin">로그인 후 복사</div></div><div class="contentsignin">로그인 후 복사</div></div> <p> 폴라 레이의 실행 목록 <times> 모든 응답 시간은 모니터 클래스의 PollArray 속성에 저장된 배열로 들어갑니다. 직관적으로 이름이 지정된 UpdatePollArray 메소드 로이 배열을 업데이트합니다. 다음과 같이 보이는 매우 간단한 방법입니다 </times></p> <very> 우리가 사용한 기능 중 일부는 약간 혼란스러운 이름을 가지고 있지만 코드는 매우 간단합니다. <h5> <ift> 배열 객체의 변속되지 않은 메소드는 새로운 항목을 배열의 첫 번째 요소에 넣고 그림 3.5와 같이 배열 내용의 나머지 내용을 한 위치로 이동시킵니다. </ift> </h5> <p> <..> 그림 3.5. unshift를 사용하여 과일 삽입 </..></p> <ay> 배열이 사용자 정의 최대 길이를 초과하면 UpdatePollArray는 끝에서 항목을 "팝핑"하여이를 잘립니다. 이것은 배열의 마지막 항목을 단순히 삭제하는 POP 방법에 의해 달성됩니다. (메소드 이름 POP는 상당히 이상하게 보일 수 있지만, 스택에 추가 된 순서대로 만 액세스 할 수있는 여러 항목을 스택에 추가하여 스택에 추가하여 스택에서 항목을“팝”하기 위해 스택을“팝”하는 데 도움이되는 디자인 이었지만 스택에서“팝”을 설계 한 것입니다. 배열에서 마지막 항목을 삭제합니다.) 항목을 상단에 추가하고 배열의 하단에서 항목을 제거하는 이유는 디스플레이에서 가장 최근의 항목이 상단에 나타나기를 원하고 오래된 항목이 점차적으로 하단으로 이동하기를 원하기 때문입니다. <p>. <em> 결과를 표시 </em> </p>PollArray에서 결과를 업데이트 한 후 Printresult 메소드를 사용하여 결과를 표시 할 수 있습니다. 이것은 실제로 멋진 부분입니다. 사용자는 AJAX 응용 프로그램과 컨텐츠를 업데이트하기 위해 전체 페이지 새로 고침이 필요한 이전 스타일 앱의 차이를 직접 경험할 것입니다. <p> 렌더링 페이지 부분 </p> <ax> Ajax 전문 용어에서 응답 시간 목록을 보유하는 페이지의 청크를 페이지 부분이라고합니다. 이것은 나머지 페이지와 별도로 업데이트되는 웹 페이지의 영역을 나타냅니다. <ch> 서버에 대한 비동기 요청에 대한 응답으로 웹 페이지 청크 업데이트는 "페이지 부분 렌더링"이라고합니다. <es> Printresult 메소드는 PollArray를 통해 반복되며 DOM 방법을 사용하여 DIV 내부에 ID 폴링 (PollResults)을 사용하여 설문 조사 결과 목록을 그립니다. 우리는 마크 업에 그 div를 추가하는 것으로 시작합니다 : <p> <ready> 이제 우리는 printresult 방법 : 에 대한 준비가되었습니다 <em> <a> 여기에 꽤 조금 있습니다.이 방법을 단계별로 살펴 보겠습니다. </a></em>. </ready></p> <some> 일부 변수를 초기화 한 후이 메소드는 PollDiv에서 모든 것을 제거합니다. While 루프는 removeChild를 반복적으로 사용하여 모든 하위 노드를 Polldiv에서 삭제합니다. 다음은 업데이트 된 결과 배열을 뛰어 넘어 표시하는 루프를위한 간단한 루프가 나옵니다. <p> <a> 우리는이 배열에서 각 항목의 결과에 대한 메시지를 생성합니다. 아래에서 볼 수 있듯이 타임 아웃 (0으로 기록)은 (타임 아웃)의 메시지를 생성합니다. </a></p> <use> 다음, 우리는 DOM 메소드를 사용하여 목록의 각 항목에 대한 마크 업을 동적으로 추가합니다. 사실상, 목록의 각 항목에 대해 다음 HTML을 JavaScript로 구성합니다. <p> <of> Bar div의 너비는 실제 응답 시간을 반영하기 위해 변경되고 시간 초과는 빨간색으로 표시되지만이 목록의 모든 항목은 동일합니다. 배경색이 표시되도록 DIV에 무언가를 넣어야합니다. DIV에 고정 너비를 주하더라도 DIV가 비어 있는지 배경색은 표시되지 않습니다. 이것은 성가신 일이지만 해결하기 쉽습니다. 우리는 부러지는 공간 문자로 div를 채울 수 있습니다. </of></p>. <a>이 마크 업을 삽입하는 데 사용할 코드를 살펴 보겠습니다. <p> <seem seem> DOM 조작 기능을 사용한 적이 없다면이 코드는 복잡해 보일 수 있지만 정말 간단합니다. 우리는 잘 알려진 CreateElement 방법을 사용하여 요소를 생성합니다. 그런 다음 각 요소 객체의 속성에 값을 할당합니다. </seem></p> <if> if 문 후에, 우리는 각 응답을 생성하기 위해 취한 초 수에 따라 막대 div의 픽셀 너비를 설정하는 코드를 볼 수 있습니다. 합리적인 너비를 얻으려면 시간 그림을 20에 곱하지만 페이지에서 사용할 수있는 수평 공간의 양에 따라 더 높거나 낮은 숫자를 사용하고 싶을 수도 있습니다. <to to> 요소에 텍스트를 추가하기 위해 CreateTextNode를 AppendChild와 함께 사용합니다.이 요소는 다른 요소 내부에 요소를 배치하는 데 사용됩니다. CreateTextNode 및 비 분해 공간 <above> 위의 코드에서 u00a0을 사용하여 깨지지 않는 공간을 만듭니다. 우리가 일반 & nbsp를 사용하려고한다면; 여기서 엔티티, CreateTextNode는 앰퍼 샌드를 & amp ;; 그 결과는 & nbsp입니다. 페이지에 표시됩니다. 해결 방법은 탈출 한 유니 코드 비 중개 공간을 사용하는 것입니다. <p> <em> <..> 그림 3.6. 응용 프로그램이 모양이 시작되기 시작합니다 </..></em> <of> 코드의 마지막 부분은 모든 div 요소를 정리 한 다음 pollresult div를 pollerults div 내부에 배치합니다. 그림 3.6은 실행중인 응용 프로그램을 보여줍니다 <a a>“잠깐만 요,”당신은 생각하고있을 것입니다. "우리가보고있는 막대 그래프는 어디에 있습니까?"</a></of></p> <is> 첫 번째 막대가 있지만 흰색으로 흰색으로 표시되어 쓸모가 없습니다. 응용 프로그램의 CSS를 통해 볼 수 있도록하겠습니다 : <p> <of> CSS의 주요 관심 지점은 시간 목록과 바 그래프의 컬러 바를 구성하는 시간 및 막대 div 요소에 대한 플로트 : 왼쪽 선언입니다. 왼쪽에 떠 다니는 것이 나란히 나타나게합니다. 그러나이 포지셔닝 기술이 작동하려면 Clearboth 클래스가있는 요소 가이 두 Divs 바로 뒤에 나타나야합니다. </of></p> <you> 이것은 Ajax를 실제로 볼 수있는 곳입니다. XMLHTTPREQUEST, W3C DOM 및 CSS (XMLHTTPREQUEST, W3C DOM 및 CSS)의 비트와 조각을 사용합니다. 프로그래머는 종종 CSS와 코드에서 인터페이스 요소를 구축하는 실용성에 가장 큰 문제를 경험합니다. <j> Ajax 프로그래머로서, 당신은 당신을 위해 CSS를 돌보기 위해 도서관에 의존하려고 시도하거나, 일을 끝내기에 충분히 배울 수 있습니다. 이 주제에 대한 많은 질문에 대한 많은 질문에 대한 기꺼이 똑똑한 사람을 아는 것이 편리하거나 CSS에 대한 좋은 책을 가지고 있습니다 (예 : Sitepoint의 CSS 선집 : 101 필수 팁, 트릭 및 해킹 <img src="/static/imghw/default1.png" data-src="https://img.php.cn/upload/article/000/000/000/174145030681400.png" class="lazy" alt="자신의 Ajax 웹 응용 프로그램을 구축하십시오" >). <br> <em> <..> 그림 3.7. 막대 그래프의 시작 </..></em> </j></you></is></above></to></if></a></use></some></es></ch></ax></ay></very></the></let></run></out></..></you></progress></calc></this>

이제 CSS가 제자리에 있으므로 그림 3.7에서 알 수 있듯이 응용 프로그램 디스플레이의 막대 그래프를 볼 수 있습니다.

응용 프로그램을 중지

PollServerStart 메소드의 최종 동작은 앱을 실행 한 후 ToggleAppStatus를 호출하여 응용 프로그램의 모양을 전환하는 것입니다. ToggleAppStatus 상태 디스플레이를 앱 상태로 변경 : 실행, 시작 버튼을 중지 버튼으로 전환하고 폴스 서버 스톱 메서드를 버튼의 onclick 이벤트에 첨부합니다. PollServerStop 메소드는 진행중인 폴링 프로세스를 중지 한 다음 응용 프로그램을 다시 전환하여 올바르게 중지 된 것처럼 보이도록 응용 프로그램을 다시 전환합니다.

function HelloWorld() {  <br>
  this.message = 'Hello, world!';  <br>
  this.sayMessage = function() {  <br>
    window.alert(this.message);  <br>
  };  <br>
}

로그인 후 복사

이 코드는이 장의 앞부분에 추가 한 스톱 폴 메소드를 재사용합니다. 현재이 모든 방법은 현재 HTTP 요청을 중단하는 것입니다. 시간 초과를 처리하는 동안 괜찮습니다. 그러나이 방법은 다른 두 가지 시나리오도 처리해야합니다.

이러한 시나리오 중 첫 번째는 여론 조사 간격 동안 메소드가 호출 될 때 발생합니다 (즉, HTTP 요청에 대한 응답을받은 후에도 다음 요청이 전송되기 전에). 이 시나리오에서는 지연된 호출을 Dopoll에 취소해야합니다.

이 방법을 처리 할 수 있어야하는 두 번째 시나리오는 요청을 보낸 후 스톱 펠트가 호출되지만 응답을 받기 전에 호출 될 때 발생합니다. 이 시나리오에서는 타임 아웃 핸들러를 취소해야합니다.

두 통화의 간격 ID를 추적 할 때 STOPPOLL을 수정하여 CLEARTIMEOUT에 두 개의 호출을 사용하여 이러한 시나리오를 처리 할 수 있습니다.

이제 막대 그래프 아래에서 시작/정지 버튼을 클릭하여 폴링 프로세스를 중지하고 시작할 수 있어야합니다. 상태 알림

ajax가 콘텐츠를 비동기로 업데이트하는 능력과 업데이트가 페이지의 작은 영역에만 영향을 줄 수 있다는 사실은 상태 알림을 Ajax 앱의 설계 및 개발의 중요한 부분으로 만듭니다. 결국, 앱의 사용자는 앱이 무엇을하고 있는지 알아야합니다.

웹 개발의 예전에는 전체 페이지가 컨텐츠의 변경 사항을 반영하기 위해 전체 페이지를 다시로드 해야하는 경우 응용 프로그램이 서버와 통신 할 때 최종 사용자에게 완벽하게 명확했습니다. 그러나 우리의 Ajax 웹 앱은 백그라운드에서 서버와 대화 할 수 있습니다. 즉, 사용자는 무언가가 발생하고 있음을 나타내는 전체 페이지 재 장전을 보지 못합니다.

. 그래서 Ajax 앱 사용자는 페이지가 서버와 통신하고 있음을 어떻게 알 수 있습니까? Ajax 응용 프로그램은 브라우저 크롬에 표시되는 오래된 회전하는 글로브 또는 브라우저 크롬에 표시되는 플래그 애니메이션 대신 작은 애니메이션이나 시각적 전환을 통해 처리가 진행되고 있음을 사용자에게 알립니다. 일반적으로 CSS로 달성하면 이러한 전환은 산만하지 않고 사용자의 시선을 사로 잡습니다! - 응용 프로그램의 수행에 대한 힌트를 제공하십시오. 좋은 Ajax 앱 설계의 중요한 측면은 이러한 종류의 알림의 개발입니다. 상태 애니메이션

우리는 이미 응용 프로그램의 상단에 앱이 실행 중이거나 중지 된 경우 사용자에게 알려주는 작은 막대를 이미 가지고 있기 때문에, 이곳은 조금 더 많은 상태 정보를 표시 할 수있는 상당히 논리적 인 장소입니다.

var hw = new HelloWorld();  <br>
hw.sayMessage();  <br>
hw.message = 'Goodbye';  <br>
hw.sayMessage();

로그인 후 복사

. Twirling Balls 또는 Running Dogs와 같은 애니메이션은 응용 프로그램이 바쁘다는 것을 나타내는 좋은 방법입니다. 일반적으로 활동을 사용하여 활동을 사용하는 이미지를 표시하고 싶을 것입니다. 그러나 우리는 목록에서 사용자의 관심을 끌거나 사람들이 결과를 읽으려고 할 때 사람들이 산만하게하는 큐를 사용하고 싶지 않으므로 그림 3.8에 표시된 느린 펄스 애니메이션과 함께 갈 것입니다.

. 이 애니메이션은 CSS에서 가볍고 구현하기 쉬운 이점이 있습니다. 플래시 플레이어가 필요하지 않으며 지루한 프레임으로 프레임을 다운로드 할 부피가 큰 GIF 이미지가 없습니다. 흰색 막대의 가장 오른쪽은 미사용 공간으로, 이런 종류의 알림에 이상적인 장소가됩니다. 사용자 인터페이스의 맨 위에 있기 때문에 쉽게 볼 수 있지만 오른쪽으로 벗어나기 때문에 결과 목록을 읽으려고하는 사람들이 벗어나지 않습니다.

<.> 그림 3.8. 우리의 펄스 상태 애니메이션

이 애니메이션을 호스팅하려면 문서의 상태 메시지 DIV 바로 아래에 ID 폴링 메이지가있는 DIV를 추가합니다.

스타일 시트에 CSS 규칙을 추가 하여이 div를 배치하십시오 :
이 애니메이션은 이제 페이지 오른쪽에 위치하고 있습니다. 브라우저에서 페이지를 열면 애니메이션을 볼 수 없습니다. 현재 흰색 배경의 흰색 상자에 지나지 않습니다. 원하는 경우 PollingMessage에 컨텐츠를 추가하여 위치의 위치를 확인하십시오. setInterval 및 범위 손실 JavaScript SetInterval은 예를 들어 맥동 애니메이션을 제어하기 위해 반복적으로 발생하는 작업을 처리하는 명백하고 쉬운 방법입니다. SetInterval이있는 모든 CSS 회전은 상당히 흥미롭고 부피가 큰 코드를 초래합니다. 따라서 앞에서 언급했듯이 상태 애니메이션 코드를 자체 클래스 (상태)에 넣는 것이 합리적입니다. 모니터 클래스에서 참조하고 사용할 수 있습니다. 이 글을 읽는 영리한 개발자 중 일부는 SetInterval이 Settimeout과 동일한 범위 손실 문제로 어려움을 겪고 있다고 이미 추측했을 것입니다. 모니터링 애플리케이션에서 하나의 상태 애니메이션 만 처리해야하므로 모니터 클래스와 마찬가지로 편리한 접근 방식을 취하고 상태 클래스 A 싱글 톤 클래스를 만드는 것이 합리적입니다. . 상태 설정

이전 코드를 작동시키기 위해 이미 작성한 상태 스텁에 속성을 추가하여 시작하겠습니다.

상태 객체에는 4 개의 속성이 있습니다 :

Curropacity 속성은 PollingMessage Div의 불투명도를 추적합니다. 우리는 SetInterval을 사용 하여이 DIV의 불투명도를 빠르게 변경하여 펄스 및 페이딩 효과를 생성합니다. Proc 속성은 HTTP 요청이 현재 진행 중인지 여부를 나타내는 3 개 주 스위치입니다. 완료되거나 완료되기 전에 중단되었습니다. ProcinterVal 속성은 애니메이션을 제어하는 SetInterval 프로세스의 간격 ID를 저장하는 것입니다. 우리는 그것을 사용하여 달리기 애니메이션을 중지합니다.

DIV 속성은 PollingMessage Div에 대한 참조입니다. 상태 클래스는 PollingMessage Div의 CSS 속성을 조작하여 애니메이션을 만듭니다.

초기화 div 속성을 폴링 메이지에 바인딩하려면 init 메소드가 필요합니다 :

init 메소드에는 또한 Setalpha라는 메소드에 대한 호출이 포함되어 있으며, 이는 나중에 조금 나중에 볼 수있는 IE 해결 방법에 필요합니다. 인터넷 익스플로러 메모리 누출

클래스 속성으로 사용되는 DOM 요소 참조 (Div, TD 또는 Span 요소 등을 가리키는 변수)는 인터넷 익스플로러에서 메모리 누출의 악명 높은 원인입니다. 그러한 속성을 지우지 않고 클래스 인스턴스를 파괴하면 (널로 설정함으로써) 메모리는 되 찾을 수 없습니다. . Window를 처리하는 모니터 클래스 A 정리 방법에 추가하겠습니다.

~~이 방법은 해당 클래스의 정리 방법을 호출하고 reqstatus 속성을 null로 설정하여 상태 클래스를 정리합니다.~~

상태 클래스의 정리 방법은 IE 하우스 키핑을 수행합니다.

DIV 참조를 NULL에 대해 설정하지 않으면 Internet Explorer는 메모리를 데스 그립에 해당 변수에 할당 한 메모리를 유지하며 페이지를 다시로드 할 때마다 메모리 사용 풍선이 표시됩니다. 실제로 이것은 작은 응용 프로그램에 큰 문제가되지는 않지만 DHTML이 많은 대형 웹 앱에서는 심각한 문제가 될 수 있습니다. 코드에서 DOM 참조를 정리하는 습관을 들여서 이것이 문제가되지 않도록하는 것이 좋습니다.

. 디스플레이 옵션 메소드

상태 클래스의 중심 코드는 DisplayOpacity 메소드에 있습니다. 여기에는 PollingMessage Div의 적절한 CSS 속성을 변경하는 데 필요한 브라우저 별 코드가 포함되어 있습니다. 코드는 다음과 같습니다

function HelloWorld() {  <br>
  this.message = 'Hello, world!';  <br>
  this.sayMessage = function() {  <br>
    window.alert(this.message);  <br>
  };  <br>
}

로그인 후 복사

객체의 Curropacity 속성은 폴링 메이지 디스가 설정되어야하는 불투명도를 나타냅니다. 우리의 구현은 0에서 100까지의 정수 척도를 사용하며, 이는 Mozilla와 Safari가 기대하는 분수 규모가 아닌 인터넷 익스플로러가 사용합니다. 이 선택은 개인적인 취향 일뿐입니다. 분수 값을 사용하는 것을 선호하는 경우 꼭.이 방법에는 IE와 Opera에서만 지원되는 속성 인 문서에 대한 테스트와 Window.opera에 대한 테스트가 표시됩니다. 따라서 IE IF 문의 IF 절을 실행해야합니다. IF 문의이 IE 지점 내부에서 독점적 인 Alpha.opacity 속성은 불투명도를 설정하는 데 사용되며 Else 절에서는 이전 모질라 기반 브라우저에서 지원되는 구형 Mozopacity 속성을 사용합니다.

. 마지막으로,이 방법은 불투명도를 표준 준수 방식으로 설정합니다. 불투명 속성을 사용하여 궁극적으로 모든 표준 호환 브라우저에서 지원되어야합니다.

IE GOTCHAS

Internet Explorer 버전 6은 오래된 브라우저 인 불투명도 기반 CSS를 변경하려고 할 때 몇 가지 문제를 겪습니다. 다행히도, 이들 중 첫 번째는 폴링 메이지 CSS 규칙에 추가하여 쉽게 해결할 수 있습니다.

배경 속성을 추가하면 Internet Explorer의 첫 번째 특정 문제가 해결됩니다. IE에서 불투명도를 변경하려면 요소의 배경색을 설정해야합니다. 그렇지 않으면 텍스트가 들쭉날쭉 한 모서리로 표시됩니다. 배경을 투명하게 설정하면 작동하지 않습니다. 특정 색상으로 설정해야합니다. CSS 파일이 유효하기를 원한다면 두 번째 문제는 약간 까다 롭습니다. 즉, 스타일 시트에서 먼저 선언되지 않으면 스타일을 변경할 수 없습니다. 이제 W3C 유효성 검사기가 스타일 시트를 통과하는 것을 방해하지 않으면 다른 선언을 추가 하여이 문제를 해결하기가 쉽습니다. 불행히도,이 접근법은 불쾌한 속성 (예 : Firefox 1.5)과 같은 독점 속성을 지원하지 않는 브라우저에서 CSS 경고를 생성하며, 이는 기본적으로 JavaScript 콘솔에 CSS 경고를 표시합니다. IE 특정 스타일 정보를 글로벌 스타일 시트에 삽입하는 것보다 나은 솔루션은 JavaScript를 사용하여 해당 선언을 IE의 PollingMessage Div의 스타일 속성에 추가하는 것입니다. 이것이 바로 Init에서 불리는 Setalpha 방법이 달성하는 것입니다. 해당 방법의 코드는 다음과 같습니다 인터넷 익스플로러에서만 실행되는이 코드는 문서를 사용하여 현재 페이지에 연결된 각 스타일 시트를 통해 반복하기 위해 배열을 사용합니다. 규칙 속성을 사용하여 각 스타일 시트의 규칙에 액세스하고 SelectOtext 속성을 보면 원하는 스타일을 찾습니다. 규칙 배열에서 올바른 스타일을 갖으면 필터 속성에 불투명도를 변경하는 데 필요한 값을 제공합니다.

오페라의 불투명도?

불행히도, 글을 쓰는 시점에서 최신 버전의 Opera (버전 8.5)조차도 CSS 불투명도를 지원하지 않으므로 해당 브라우저에서는 이러한 애니메이션이 작동하지 않습니다. 그러나이 기능은 오페라 버전 9에 대해 계획되어 있습니다 애니메이션 실행

프로세싱 애니메이션 코드는 5 가지 방법으로 구성됩니다. 처음 3 개는 "프로세싱…"애니메이션을 제어하는 반면 나머지 2 개는 "완료"애니메이션을 제어합니다. "처리…"애니메이션을 제어하는 세 가지 방법은 다음과 같습니다.

"프로세싱…"애니메이션 및 스케줄을 SetInterval 로 Doproc에 반복적으로 호출하는 STARKPROC. 이 클래스의 속성을 모니터링하고“프로세싱…”의 현재 프레임을 적절히 적절하게 설정하는 doproc. "처리…"애니메이션이 중단되어야한다는 신호를 보내는 stopproc.

“완료된”애니메이션을 제어하는 두 사람은 다음과 같습니다

StartDone은 "완료된"애니메이션을 설정하고 SetInterval 를 사용하여 Dodone에 대한 반복 호출을 일정에 설정합니다. ~~dodone은 "완료된"애니메이션의 현재 프레임을 설정하고 완료되면 애니메이션을 종료합니다~~
~~시작 애니메이션을 설정하고 시작하고 시작하는 방법은 STARTPROC 메소드를위한 작업입니다.~~

Proc 속성을 Proc (Processing)로 설정 한 후이 코드는 SetDisplay 메소드를 호출하여 PollingMessage Div의 색상과 내용을 설정합니다. 다음에 SetDisplay를 자세히 살펴 보겠습니다 코드가 PollingMessage DIV의 색상과 내용을 설정하면 DIV의 불투명도를 100 (완전히 불투명)으로 초기화하고 DisplayOpacity를 호출 하여이 설정을 적용합니다. 마지막으로,이 메소드는 SetInterval을 호출하여 애니메이션 프로세스의 다음 단계를 예약합니다. settimeout과 마찬가지로 SetInterval 호출은 간격 ID를 반환합니다. 우리는 이것을 Procinterval 속성에 저장하여 나중에 프로세스를 중지 할 수 있습니다.
"처리…"및 "완료"애니메이션은 모두 setDisplay 메소드를 공유합니다 :
PollingMessage Div의 "처리…"과 "완료"상태의 유일한 차이점은 색상과 텍스트 이므로이 공통 기능을 사용하여 폴링 메이지 디스의 두 상태를 전환하는 것이 합리적입니다. 색상은 PollingMessage Div에 클래스를 할당하여 제어되므로 완료 및 처리 클래스에 대한 CSS 클래스 규칙을 스타일 시트에 추가해야합니다.

멈추게합니다

애니메이션을 부드럽게 중지하려면 특정 타이밍이 필요합니다. 우리는 애니메이션이 맥박 한가운데서 갑자기 멈추기를 원하지 않습니다. “처리…”이미지의 불투명도가 0으로 떨어질 때 자연스러운 휴식 시간에 멈추고 싶습니다.

따라서 애니메이션을 중지하기위한 스톱 포크 메소드는 실제로 그 자체로 멈추지 않습니다. 단지 애니메이션 프로세스에 편리한 지점에 도달했을 때 중지 될 때가되었음을 알리는 깃발을 설정합니다. 이것은 아내와 남편으로부터 하루가 끝날 때 많은 프로그래머가받은 전화가 코드의 논리적 정지 지점에 도착했을 때 집으로 돌아 오라고 상기시켜줍니다.

. 여기서 조치가 거의 발생하지 않기 때문에이 방법은 꽤 짧습니다.

function HelloWorld() {  <br>
  this.message = 'Hello, world!';  <br>
  this.sayMessage = function() {  <br>
    window.alert(this.message);  <br>
  };  <br>
}

로그인 후 복사

이 방법은 두 가지 유형의 중지를 구별해야합니다. 성공적으로 완료된 요청 (완료)과 사용자의 응용 프로그램을 중지하라는 요청 (abort). DOPROC 메소드는이 플래그를 사용하여 "완료된"메시지를 표시할지 여부를 파악하거나 중지 할 것입니다. Doproc 로 애니메이션을 실행합니다 90 밀리 초 간격으로 호출되는 DOPROC 방법은 PollingMessage Div의 불투명도를 변경하여 처리 애니메이션의 맥동 효과를 생성합니다. 코드는 다음과 같습니다

이 방법은 단순합니다. 주된 목적은 단순히 PollingMessage Div의 불투명도를 호출 할 때마다 10% 줄입니다. 첫 번째 if 문은 div가 완전히 사라 졌는지 확인할 것입니다. 가지고 있고 애니메이션이 여전히 실행중인 경우 불투명도를 100 (완전히 불투명)으로 재설정합니다. 90 밀리 초 마다이 코드를 실행하면 폴링 메이지 디스 (Pollingmessage Div)가 사라지고 다시 나타나고 다시 사라지는 부드러운 효과가 생깁니다. 응용 프로그램이 바쁘다는 친숙한 맥박 효과가 있습니다. 애니메이션이 계속 실행되지 않으면 Clearinterval에 전화하여 애니메이션을 중지 한 다음 Proc 속성이 완료되면 STARTDONE을 호출하여 "완료"애니메이션을 트리거합니다. StartDone 로 "완료"애니메이션을 시작합니다 STARTDONE 메소드는 STARTPROC 메소드가 "프로세싱…"애니메이션에 사용하는 "완료"애니메이션과 동일한 목적을 제공합니다. STARTPROC 과도 매우 비슷하게 보입니다

이번에는 텍스트를 "완료"로 변경하고 색상이 녹색으로 변경됩니다. 그런 다음 SetInterval과 함께 Dodone에게 전화를 걸었습니다. 최종 페이드 Dodone의 코드는 Doproc 코드보다 훨씬 간단합니다. Doproc과 마찬가지로 중지하라는 지시까지 지속적으로 처리 할 필요는 없습니다. 그것은 단지 폴링 메이지 DIV의 불투명도를 0에 도달 할 때까지 10% 줄이면 스스로를 멈 춥니 다. 꽤 간단한 것 :

<.> 그림 3.9. 펄스 상태 표시기가있는 응용 프로그램

마지막으로, 우리는 브라우저 에서이 코드를 테스트 할 준비가되었습니다. AppMonitor2.html 열기 브라우저에서 시작 버튼을 클릭하면 펄스 처리가 표시됩니다… 그림 3.9에 표시된 것과 같이 브라우저 뷰포트의 오른쪽 상단 근처의 메시지.

해당 여론 조사 간격에주의하십시오!

var hw = new HelloWorld();  <br>
hw.sayMessage();  <br>
hw.message = 'Goodbye';  <br>
hw.sayMessage();

로그인 후 복사

이제 페이지에서 애니메이션이 실행되었으므로 이전 하나가 멈추기 전에 애니메이션을 다시 시작하지 않도록주의해야합니다. 이러한 이유로 Poll_interval을 2 초 미만으로 설정하지 않는 것이 좋습니다. 모니터 스타일 이제 응용 프로그램이 시작되고 실행되었으므로 CSS를 사용하여 좋아 보일 것입니다. 원하는 레이아웃을 달성하려면 다음 마크 업을 추가해야합니다. 보시다시피, 우리는 스타일을 걸 수있는 3 개의 div와 플로팅 된 응용 프로그램 상태 메시지 및 애니메이션을 지우기 위해 라인 브레이크를 추가했습니다. 이 페이지의 완성 된 CSS는 다음과 같습니다. 스타일의 인터페이스는 그림 3.10 : 에 나와 있습니다

function HelloWorld() {  <br>
  this.message = 'Hello, world!';  <br>
  this.sayMessage = function() {  <br>
    window.alert(this.message);  <br>
  };  <br>
}

로그인 후 복사

<..> 그림 3.10. 완성 된 앱 모니터

var hw = new HelloWorld();  <br>
hw.sayMessage();  <br>
hw.message = 'Goodbye';  <br>
hw.sayMessage();

로그인 후 복사

요약 첫 번째 작업 응용 프로그램은 AJAX를 사용하여 사용자가 현재로드 된 페이지를 떠나지 않고 서버에 여러 요청을하는 방법을 보여주었습니다. 또한 여러 작업을 비동기 적으로 수행 할 때 처리해야 할 복잡성에 대한 상당히 현실적인 그림을 제공했습니다. 이러한 복잡성의 좋은 예는 XMLHTTPREQUEST 요청을 시간에 시간에 사용하는 것입니다. 이 예제는 범위 손실 및 연결 시간 초과와 같은 AJAX 앱을 개발할 때 발생하는 일반적인 문제를 탐색하고이를 처리하는 데 도움이되는 실용적인 솔루션을 제공 할 수있는 좋은 기회를 제공했습니다.

. 자신의 Ajax 웹 응용 프로그램을 구축하십시오 에서 발췌 한 내용은 자신의 Ajax 웹 애플리케이션을 구축합니다
- 잊지 마십시오.이 기사를 .pdf 형식으로 다운로드 할 수 있습니다. 이 책에는 총 8 개의 챕터가 있으며, 그 결국 독자들은 여러 플레이어가 실시간으로 재생할 수있는 온라인 체스 게임을 포함하여 수많은 기능을 갖춘 웹 앱을 구축했을 것입니다.이 책의 목차에는 자세한 내용이 있습니다. . Ajax 웹 앱을 구축하는 것에 대한 자주 묻는 질문 (FAQ) 웹 개발에서 Ajax의 주요 구성 요소는 무엇입니까? ajax는 비동기 JavaScript 및 XML을 나타내는 일련의 웹 개발 기술 세트입니다. 웹 페이지가 기존 페이지의 디스플레이 및 동작을 방해하지 않고 서버에서 데이터를 업데이트하고 검색 할 수 있습니다. AJAX의 주요 구성 요소에는 정보를 제시하기위한 HTML (또는 XHTML) 및 CSS, 동적 디스플레이를위한 문서 객체 모델 (DOM), 데이터를 운반하기위한 XML, 데이터를 조작하기위한 XSLT, XMLHTTPRequest 객체, XMLHTTPRequest 객체, XMLHTTPRequest 및 Javascript를 함께 제공합니다. 웹 사이트에서의 사용자 경험?

Ajax는 웹 사이트를보다 반응적이고 대화식으로 만들어 사용자 경험을 향상시킵니다. 웹 페이지는 모든 요청에 대해 전체 페이지 재 장전이 필요하지 않고 백그라운드에서 서버와 통신 할 수 있습니다. 즉, 서버가 요청을 처리하는 동안 사용자는 웹 페이지와 계속 상호 작용할 수 있으며, 더 부드럽고 원활한 사용자 경험을 초래합니다.