prototype ajax 예제

Posted by | august 02, 2019 | Ikke-kategoriseret | No Comments

그래서 도로에이 쇼를 얻으려면 prototype.js와 함께 사이트에 설정해야하는 세 가지 파일이 있습니다. 분명히 우리는 prototype.js에 연결된 기본 HTML 페이지가 필요합니다. 사용자가 상호 작용하는 페이지입니다. 둘째, 우리는 인터페이스와 프로토 타입이하고있는 물건 사이의 접착제에 대한 우리 자신의 자바 스크립트 파일이 필요합니다. 마지막으로, 우리는 Ajax가 너무 호출할 페이지 (내 경우 PHP 스크립트)가 필요합니다. 우편 번호 길이가 5이면 프로토타입의 Ajax.Updater 클래스를 사용하여 AJAX 요청을 합니다. 이 클래스는 페이지의 모든 요소의 innerHTML 값을 업데이트합니다. 이 예제에서는 zipResult의 ID로 div를 업데이트합니다. 프로토타입 라이브러리가 없는 Ajax 응용 프로그램 버전에서 catalogId 필드는 getElementById() 함수를 사용 하 여 검색 되 고 값은 아래와 같이 값 특성으로 검색 됩니다. CSS가이 예제에서 많은 작업을 수행하는 것이 아니라 호기심이 있는 경우입니다. 프로토타입을 사용하면 $() 유틸리티 함수가 document.getElementById() 함수를 대체합니다. 예를 들어 양식 div 요소인 `formDiv`는 다음과 같이 프로토타입으로 검색됩니다. (접착제를 두는 곳에 주의하십시오, 아이들.) 비 프로토타입 버전에서는 XMLHttpRequest 생성자 또는 ActiveXObject 생성자로 XMLHttpRequest 개체가 만들어집니다.

콜백 메서드는 XMLHttpRequest 개체와 서버에 전송된 HTTP 요청에 등록됩니다. 콜백 메서드는 요청 상태가 변경되고 요청이 완료되면 HTTP 응답이 처리될 때 호출됩니다. 이제 프로토타입 라이브러리를 다운로드하고 타르 파일을 디렉토리에 추출합니다. /dist 디렉토리에서 이클립스의 프로토타입 프로젝트에 prototype.js를 복사합니다. prototype.js 파일은 그림 1과 같이 inputForm.jsp 파일과 동일한 디렉토리에 있어야 합니다. 오늘 AJAX 프레젠테이션에서 사용한 AJAX 프로토타입 예제는 다음과 같습니다. $A() 함수는 노드 목록 또는 열거 가능한 목록에서 Array 개체를 만드는 데 사용됩니다. 예를 들어 NodeList 개체와 노드 값을 검색하기 위해 탐색된 Array 개체에서 Array 개체를 만들 수 있습니다. Ajax 응용 프로그램의 inputFormForm.jsp에 프로토타입 라이브러리 함수 및 클래스를 추가합니다. prototype.js 라이브러리에 액세스하려면 입력Form.jsp\에 다음 요소를 추가합니다.

$F() 함수는 양식 요소의 값을 검색하는 데 사용됩니다. 예: 매개 변수는 해시(기본 설정) 또는 앰퍼샌드로 구분된 키-값 쌍의 문자열로 전달됩니다(예: 회사=예제 및 제한=12). 첫째, 아래에 설명된 대로 더 나은 “성공” 검색을 사용할 수 있습니다. 아래 예제를 참조하십시오. 나는 AJAX의 좋은 사용의 예를 제공하고 싶었다, 동시에 간단하게 유지. 그래서 우편 번호 검증기를 만드는 것이 좋은 예라고 생각했습니다. 사람이 우편 번호를 입력하자마자 서버에 우편 번호가 데이터베이스에 있는지 확인하도록 요청하고 도시와 주를 반환합니다. 프로토타입이 아닌 버전에서는 형식 요소가 getElementById() 함수를 통해 검색됩니다. 예를 들어 유효성 검사Message div는 다음과 같이 검색됩니다.

수정된 build.xml은 리소스 zip 파일에서 사용할 수 있습니다.