Ajax 호출 소개

게시 됨: 2021-11-01

Ajax 소개에 오신 것을 환영합니다! 이 기사에서 우리는 Ajax의 아주 기초적인 것과 그것이 실제 예제에서 어떻게 사용되는지를 다룰 것입니다. Ajax-PHP 호출의 예도 살펴보겠습니다. 이 튜토리얼을 단순화하기 위해 최선을 다했지만 Javascript, PHP 및 WordPress에 대한 실무 지식은 다음에 나오는 내용을 완전히 이해하는 데 매우 중요합니다. 이것을 염두에두고 시작합시다!

아약스란?

Ajax는 Asynchronous JavaScript and XML의 약자입니다.

Ajax는 프로그래밍 언어가 아니라 더 나은 웹 애플리케이션을 만들기 위해 기존 웹 기술을 결합하는 기술의 배열입니다.

Ajax로 웹사이트 개선하기

Ajax는 용도가 매우 다양합니다. 이 중 상위 기능 중 하나는 Ajax 호출입니다. Ajax 호출을 사용하면 사용자가 페이지를 다시 로드할 필요 없이 웹사이트에서 콘텐츠의 일부를 업데이트할 수 있습니다. 따라서 일반 HTTP 요청과 달리 웹 사이트와 계속 상호 작용하기 위해 서버 응답을 기다릴 필요가 없습니다.

전통적으로 HTTP 요청은 웹 서버에 만들어지고 처리된 후 서버는 새 페이지 로드에서 업데이트된 출력을 반환합니다. Ajax 요청에서 이러한 일련의 작업은 백그라운드에서 비동기적으로 발생하므로 사용자가 중단되지 않습니다. 이는 상호작용성과 응답성을 향상시키고 웹사이트를 보다 역동적으로 만듭니다.

Ajax 호출은 어떻게 작동합니까?

Ajax 호출은 최종 사용자가 웹사이트의 프런트 엔드에서 작업(예: 버튼 클릭)을 수행하는 것으로 시작됩니다. 해당 작업이 수행되면 Javascript 이벤트가 트리거되고 해당 수신기가 함수를 호출합니다.

함수 내에서 Ajax 호출이 시작되고 XML의 도움으로 정보가 패키징되고 요청이 서버 스크립트로 전송됩니다.

참고: 요즘에는 거의 모든 경우에 JSON이 XML보다 더 빠르고 읽기 쉽고 프로그래밍하기 쉽기 때문에 선호됩니다.

스크립트 내에서 요청은 PHP, Java, Ruby, Python 등과 같은 서버 측 스크립팅 언어의 도움으로 처리됩니다.

응답은 클라이언트로 다시 전송되고 콜백 함수는 수신된 데이터로 해당 콘텐츠 부분을 업데이트합니다.

예제에서 이것이 어떻게 작동하는지 살펴보겠습니다.

간단한 Ajax 호출 예제

기사 제목 목록을 통해 검색할 때 실시간으로 검색 결과를 볼 수 있는 검색 애플리케이션을 만들어 보겠습니다.

PHP를 서버 측 스크립팅 언어로 사용하고 최종 사용자의 관점에서 이를 안내할 것입니다.

1단계: HTML 양식

먼저 사용자가 텍스트로 채울 텍스트 상자와 결과를 표시할 위치가 필요합니다. 따라서 간단한 HTML 양식과 결과를 표시할 요소를 만들어 보겠습니다.

 <html> <body> <p><b>Search in articles:</b></p> <form> <input type="text" onkeyup="foundArticles(this.value)"> </form> <p>Articles available: <span></span></p> </body> </html>

2단계: 자바스크립트 기능

사용자가 텍스트를 입력할 때 가능한 경우 실시간 결과를 보고 싶습니다. 사용자가 키보드에서 키를 놓을 때 함수를 실행하는 onkeyup Javascript 이벤트를 사용합니다.

이 함수는 프로세스를 계속하기 위해 현재 텍스트를 매개변수로 가져와야 합니다.

 <html> <body> <p><b>Search in articles:</b></p> <form> <input type="text" onkeyup="foundArticles(this.value)"> </form> <p>Articles available: <span></span></p> <script type="text/javascript"> function foundArticles(str) { } </script> </body> </html>

함수를 채워봅시다.

3단계: 요청

함수 내에서 먼저 서버와 상호 작용하기 위해 XMLHttpRequest 객체를 만든 다음 foundArticles() 함수에 전달된 값으로 작업을 수행하는 다른 함수를 호출해야 합니다.

위에서 설명한 프로세스에서 서버와의 상호 작용은 readyState 속성이 변경될 때 호출되는 Javascript XMLHttpRequest.onready statechange 이벤트 핸들러를 사용하여 수행됩니다. 다음 단계를 더 명확히 합시다.

  • readyState 속성은 클라이언트가 있는 XMLHttpRequest 상태를 반환합니다.
  • readyState 가 변경될 때마다 readystatechange 이벤트가 발생합니다.
  • onreadystatechange 속성에는 readystatechange 이벤트가 발생할 때 호출되는 이벤트 핸들러가 포함됩니다.

4단계: 요청 처리 방법

이제 작업이 완료되면 뭔가를 해야 하고 어떤 상태가 가능한지 상담 후 상태 4로 설정합니다.

따라서 작업이 완료되면 id가 txtHint 인 HTML 요소 내부의 텍스트를 서버의 응답으로 바꿔야 합니다. 이것은 요청이 전송된 후 서버에서 받은 텍스트를 반환하는 responseText 속성을 사용해야 하는 경우입니다.

이제 위에서 설명한 것과 일치하는 foundArticles() 함수 내부에 코드를 추가해 보겠습니다.

 function foundArticles(str) { var xmlhttp = new XMLHttpRequest(); xmlhttp.onreadystatechange = function() { if ( this.readyState == 4 ) { document.getElementById("txtHint").innerHTML = this.responseText; } } }

참고: 여기에서 HTML을 이스케이프 처리하지 않고 렌더링하는 것은 보안상 좋지 않은 관행이며 코드를 가능한 한 간단하게 유지하기 위해 이 튜토리얼을 위해서만 수행한다는 점을 지적해야 합니다. 안전을 위해 이 문서에 제공된 코드를 실제 사용을 위해 사용하지 마십시오!

다음으로 우리는 서버에 요청을 보내고 반환된 데이터를 사용해야 합니다.

5단계: 데이터

이 예에서 데이터는 PHP 파일에 저장됩니다. 같은 폴더 아래에 data.php 파일을 만들고 다음 코드를 포함합니다.

 <?php // We fill in the posts array with the data to look up to $posts = array( "C Language course", "C++ course", "About Bootstrap", "Learn to write HTML", "All about SS", "CSS3 course", "JAVA course", "JavaScript tutorials", "Learn PHP", "MySQL examples", "Learn Python", "AngularJS", "Photoshop Tutorials", "C#", "ASP.NET", "SAP", "ORACLE", "Wordpress CMS for beginners", "Build your own Android app", "All about SEO", "Illustrator", "Flash", "Action Script" ); // We get the requested value from the URL and store it in a variable $req = $_REQUEST["req"]; $autocomplete = ""; // Iterate $posts if $req is not empty if ($req !== "") { $req = strtolower($req); foreach($posts as $name) { $lowname = strtolower($name); if ( strpos( $lowname , $req ) !== false ) { $autocomplete = $name; } } } // Output echo $autocomplete === "" ? "no suggestion" : $autocomplete;

$req = $_REQUEST["req"]; 선. 이것이 스크립트가 곧 보게 될 custom.js 파일 내에서 쿼리를 검색하는 방법입니다.

6단계: 요청 방법

XMLHttpRequest 객체의 open() 메서드를 사용하여 요청을 초기화하고 send() 메서드를 사용하여 서버와 데이터를 교환합니다.

open() 메서드에 사용하는 매개변수는 다음과 같습니다.

  • 방법. HTTP 요청 방법을 의미합니다( "GET", "POST", "PUT", "DELETE" 등).
  • 요청을 보낼 URL입니다.
 function foundArticles(str) { var xmlhttp = new XMLHttpRequest(); xmlhttp.onreadystatechange = function() { if ( this.readyState == 4 ) { document.getElementById("txtHint").innerHTML = this.responseText; } } xmlhttp.open("GET", "data.php?req=" + str, true); xmlhttp.send(); }

보시다시피, open() 메소드는 "data.php?req=" + str URL에 대한 GET 요청을 초기화합니다.

그러면 URL이 $req = $_REQUEST[“req”]에 의해 사용됩니다. data.php 파일 내의 변수를 사용하여 값을 검색합니다.

예제 요청의 시각적 개체를 살펴보겠습니다.

이 시점에서 양식이 제대로 작동해야 합니다. 입력하면 결과가 다음과 같아야 합니다.

"C 언어 과정",
"C++ 과정",
"CSS3 과정",
"자바 코스".

결론

이것은 웹 사이트를 구축할 때 사용하는 매우 인기 있는 기술인 Ajax 요청의 매우 간단한 예입니다. 간단하긴 하지만 이러한 요청의 라우팅을 이해하는 데 더 가까이 다가갔으면 하고 이를 통해 직접 코딩을 시작하는 데 도움이 될 수 있습니다. 다음 기사에서는 WordPress 환경에서 Ajax를 다시 살펴볼 것이므로 계속 지켜봐 주십시오!