HTML5 및 CSS3 프로그래밍을위한 jQuery로 AJAX 요청을 만드는 방법 - 인형

비디오: [자바스크립트와 웹 프론트엔드] AJAX - Request 보내기 2024

jQuery와 같은 AJAX 라이브러리의 주된 목적은 HTML5 및 CSS3 프로그래머에 대한 AJAX 요청을 단순화하는 것입니다. 이것이 jQuery로 얼마나 쉬운 지 믿기 어렵습니다.

AJAX에 텍스트 파일을 포함시키는 방법

이 깨끗한 코드

ajax를 확인하십시오. html $ (문서). 준비 (getAJAX); function getAJAX () {$ ("# output"). load ("hello. txt");}

HTML은 매우 깨끗합니다. 단순히 출력이라는 빈 div를 만듭니다.

이 예제는 AJAX를 사용하기 때문에 작동하지 않는다면 AJAX가 작동하는 방법에 대한 세부 사항을 기억해야 할 수도 있습니다. AJAX를 사용하는 프로그램은 로컬 파일뿐만 아니라 웹 서버를 통해 실행되어야합니다. 또한, 읽는 파일은 AJAX 요청을하는 프로그램과 동일한 서버에 있어야합니다.

여기에 설명 된 load () 메커니즘은 일반 텍스트 또는 HTML 코드 스 니펫을 페이지에로드하려는 기본 상황에 적합합니다.

AJAX와 jQuery는 서버 측 프로그래밍 없이도 효율적인 웹 사이트를 구축하는 데 매우 유용합니다. 종종 웹 사이트는 교환 및 재사용 할 수있는 일련의 작은 요소를 기반으로합니다. AJAX를 사용하여 웹 컨텐츠를 쉽게 재사용하고 수정할 수있는 프레임 워크를 작성할 수 있습니다.

사용자의 관점에서 볼 때 페이지에 대한 모든 것이 놀랄 일은 아니지만 코드를 보면 몇 가지 예기치가 나타날 수 있습니다.

CMS Using AJAX $ (init); 함수 init () {$ ("# heading"). load ("head. html"); $ ("# 메뉴"). 로드 ("메뉴.html"); $ ("# content1"). load ("story1. html"); $ ("# content2"). load ("story2. html"); $ ("# footer"). 로드 ("footer. html");};

페이지에 내용이 없습니다!

모든 사업부는 비어 있습니다. 스크린 샷에 표시된 텍스트는이 문서에 없지만 모두 작은 파일에서 동적으로 가져옵니다. 페이지는 비어있는 div로 구성됩니다.
특정 콘텐츠가 아닌 페이지는 ID가있는 자리 표시 자로 구성됩니다. jQuery를 사용합니다.
jQuery 라이브러리는 AJAX 호출을 통해 데이터로드를 크게 단순화하는 데 사용됩니다. 모든 내용은 별도의 파일에 있습니다.
디렉토리를 살펴보면 페이지의 작은 부분이 포함 된 매우 간단한 HTML 파일을 볼 수 있습니다. 예를 들어, story1. html은 다음과 같습니다: 도서 I - HTML 기반 만들기
```
견고한 HTML 기반

검증에 관한 모든 것
도구 선택하기
목록과 표로 정보 관리하기
링크로 연결하기
이미지 추가
양식 작성
```
init () 메소드는 문서에서 실행됩니다.준비 . 문서가 준비되면 페이지에서 init () 메소드를 실행합니다. init ()
메서드는 AJAX 호출을 사용하여 동적으로 내용을로드합니다. 이것은 일련의 jQuery load () 메소드에 불과합니다. 이 접근법은 많은 작업처럼 보일지 모르지만 매우 흥미로운 특징이 있습니다. 여러 페이지로 구성된 대규모 사이트를 만드는 경우 일반적으로 시각적 모양을 한 번 디자인하고 동일한 일반 반복적으로 템플릿.

또한 여러 페이지에서 일관성있는 요소가있을 수 있습니다. 단순히 기본 문서를 만들고 각 페이지에 복사하여 붙여 넣을 수는 있지만이 방법은 지저분 해집니다. 템플릿에 따라 100 페이지를 생성 한 다음 헤더를 변경해야하는 경우 어떻게됩니까? 100 개의 다른 페이지를 변경해야합니다.

템플릿 스타일 방식의 장점은 코드 재사용이다. 외부 스타일을 사용하는 것과 마찬가지로 수백 개의 문서에서 스타일 시트를 늘릴 수 있으므로 콘텐츠없이 템플릿을 디자인하면 코드 스 니펫을 작은 파일에 저장하고 다시 사용할 수 있습니다. 모든 100 페이지는 동일한 메뉴 파일을 가리키므로 메뉴를 변경하려면 파일 하나를 변경하면 모든 내용이 변경됩니다.
다음과 같은 접근 방식을 사용합니다.

전체 사이트에 대해 단일 템플릿을 만듭니다.

기본 HTML 및 CSS를 작성하여 전체 사이트의 전반적인 모양과 느낌을 관리하십시오. 아직 콘텐츠에 대해 걱정하지 마십시오. 페이지의 모든 구성 요소에 대한 자리 표시자를 작성하십시오. 각 요소에 ID를 부여하고 원하는대로 배치 할 수 있도록 CSS를 작성하십시오.

jQuery 지원 추가.

jQuery 라이브러리에 대한 링크를 만들고 기본 init () 메소드를 만든다. 항상 일관성있게 페이지의 해당 부분을 채우는 코드를 처리하십시오.
템플릿을 복제합니다.

템플릿이 어떻게 작동하는지 알고 나면 사이트의 각 페이지에 대한 사본을 만드십시오.
init ()

함수를 변경하여 각 페이지를 사용자 정의하십시오.
변경되는 템플릿의 유일한 부분은 init () 함수입니다. 서로 다른 내용을로드하는 init () 함수를 사용자 정의한 것을 제외하면 모든 페이지가 동일합니다. AJAX로 div에 맞춤 콘텐츠를로드하십시오. init () 함수를 사용하여 각 div에 내용을로드합니다.

이것은 콘텐츠를 관리하는 좋은 방법이지만, 완전히 본격적인 콘텐츠 관리 시스템은 아닙니다. 심지어 AJAX조차도 웹에
콘텐츠를 저장할 수는 없습니다. 보다 복잡한 콘텐츠 관리 시스템은 파일보다는 데이터베이스를 사용하여 콘텐츠를 처리합니다. 이런 종류의 작업을 처리하려면 PHP와 같은 일종의 서버 측 프로그래밍과 일반적으로 mySQL과 같은 데이터베이스가 필요합니다.