PHP 및 Sajax를 통해 JavaScript와 함께 Ajax 사용

수년간 진정한 반응형 웹 애플리케이션을 만들려는 목표는 웹 개발의 단순한 사실로 인해 좌절되었습니다. 페이지의 한 부분에서 정보를 변경하려면 사용자가 전체 페이지를 다시 로드해야 합니다. 하지만 그런 일은 더 이상 일어나지 않을 것입니다. 비동기식 Javascript 및 XML(Ajax) 덕분에 이제 서버 측에서 새 콘텐츠를 요청하고 페이지의 일부만 수정할 수 있습니다. 이 튜토리얼에서는 PHP와 함께 Ajax를 사용하는 방법을 설명하고 서버 측 PHP를 JavaScript와 통합하는 PHP로 작성된 도구인 Simple Ajax Toolkit(Sajax)을 소개합니다.

시작하기 전에

이 튜토리얼은 풍부한 웹 애플리케이션 개발에 관심이 있는 사람들을 대상으로 합니다. 풍부한 웹 애플리케이션은 비동기 JavaScript 및 XML(Ajax)을 PHP와 결합합니다. 전체 페이지를 새로 고치지 않고도 콘텐츠를 동적으로 업데이트할 수 있습니다. 이 튜토리얼에서는 독자가 if 및 switch 문과 함수 사용을 포함한 기본 PHP 개념을 이해하고 있다고 가정합니다.

이 튜토리얼 정보

이 튜토리얼에서는 Ajax와 해당 애플리케이션과 관련된 문제에 대해 알아봅니다. 이전에 작성한 튜토리얼의 패널을 표시하는 Ajax 애플리케이션을 PHP로 빌드합니다. 패널 링크를 클릭하면 콘텐츠 영역이 다시 로드되고 선택한 패널의 콘텐츠로 바뀌므로 대역폭과 페이지 로드 시간이 절약됩니다. 그러면 Sajax(Simple Ajax Toolkit)가 Ajax 애플리케이션에 통합되어 Ajax 사용을 동기화하여 개발을 단순화할 수 있습니다.

개요

본격적으로 시작하기 전에 샘플 PHP 애플리케이션인 Ajax와 Sajax를 살펴보세요. Ajax

Ajax를 사용하면 웹 개발자는 페이지가 로드될 때까지 기다려야 하는 병목 현상을 피하면서 대화형 웹 페이지를 만들 수 있습니다. Ajax로 작성된 애플리케이션은 버튼 클릭만으로 웹 페이지 영역의 컨텐츠를 완전히 새로운 컨텐츠로 대체할 수 있습니다. 이것의 놀라운 점은 페이지가 로드될 때까지 기다릴 필요가 없고 이 영역의 콘텐츠만 로드하면 된다는 것입니다. 예를 들어 Google 지도를 사용하면 페이지가 로드될 때까지 기다리지 않고도 지도를 클릭하고 이동할 수 있습니다.

Ajax 관련 이슈

Ajax를 사용할 때 주의할 점이 있습니다. 다른 웹 페이지와 마찬가지로 Ajax 페이지도 북마크할 수 있는데, 이는 GET 및 POST를 사용하여 요청할 때 문제를 일으킬 수 있습니다. 국제화와 인코딩 체계 수의 증가로 인해 이러한 인코딩 체계를 표준화하는 것이 점점 더 중요해지고 있습니다. 이 튜토리얼에서는 이러한 중요한 문제에 대해 배우게 됩니다.

샘플 PHP 애플리케이션

먼저 Ajax를 사용하여 애플리케이션을 만든 다음 Sajax를 사용하여 이 툴킷 ​​사용의 이점을 보여줍니다. 이 애플리케이션은 패널 링크가 포함된 이전에 작성된 튜토리얼의 일부입니다. Ajax 사용의 장점을 보여주기 위한 예로 사용됩니다. 개별 패널을 클릭하면 페이지의 나머지 부분이 다시 로드될 때까지 기다리지 않고 비동기식으로 로드되기 때문입니다. 이 샘플 애플리케이션은 또한 자신만의 Ajax 애플리케이션을 생성하는 방법을 보여줍니다.

　 Sajax

Ajax의 복잡한 세부사항에 얽매이지 않고 Ajax 애플리케이션을 만들고 싶다면. 대답은 Sajax입니다. Sajax는 ModernMethod 직원이 개발한 라이브러리를 사용하여 웹 개발자를 위한 Ajax의 높은 수준의 세부 정보를 추상화합니다. 내부적으로 Sajax는 Ajax와 동일하게 작동합니다. 그러나 Sajax 라이브러리에서 제공하는 고급 기능을 사용하면 Ajax의 기술적 세부 사항을 무시할 수 있습니다.

　Ajax란 무엇인가요?

이 섹션은 링크를 클릭하면 어떤 일이 발생하는지, Ajax가 PHP 애플리케이션에서 사용될 때 필요한 HTML 및 JavaScript 코드 등 Ajax의 개념을 설명하기 위해 예제를 사용하는 소개 소개입니다. 다음 섹션에서는 좀 더 깊이 들어가서 이 섹션에서 배운 Ajax 개념을 사용하여 실제로 PHP 애플리케이션을 생성해 보겠습니다.

비하인드 스토리

Ajax는 비동기 JavaScript와 XML의 조합입니다. 페이지의 링크를 클릭하면 제목이나 기타 설정된 정보는 그대로 유지하면서 클릭에 해당하는 콘텐츠만 로드할 수 있기 때문에 비동기라고 말합니다.

링크를 클릭하면 JavaScript 기능이 백그라운드에서 작동합니다. JavaScript는 웹 브라우저와 통신하고 브라우저에 특정 페이지를 로드하도록 지시하는 객체를 생성합니다. 그런 다음 평소와 같이 동일한 페이지에서 다른 콘텐츠를 탐색할 수 있으며, 브라우저가 새 페이지를 완전히 로드하면 브라우저는 HTML div 태그로 지정된 위치에 콘텐츠를 표시합니다.

CSS 스타일 코드는 스팬 태그와 함께 링크를 생성하는 데 사용됩니다.

CSS 스타일 코드

샘플 애플리케이션에는 스팬 태그가 일반 앵커 태그( 목록 1. 스팬 태그의 표시 정보 지정

...