예제가 포함된 PHP Ajax 튜토리얼

아약스란?

AJAX 전체 형식은 비동기입니다 Java스크립트 & XML. 서버와 클라이언트 간의 상호 작용을 줄이는 기술입니다. 전체 페이지가 아닌 웹 페이지의 일부만 업데이트하여 이를 수행합니다. 비동기 상호 작용은 다음에 의해 시작됩니다. Java스크립트.AJAX의 목적은 페이지를 새로 고침하지 않고 서버와 소량의 데이터를 교환하는 것입니다.

Java스크립트 클라이언트 측 스크립팅 언어입니다. 지원하는 웹 브라우저에 의해 클라이언트 측에서 실행됩니다. Java스크립트.Java스크립트 코드는 다음 브라우저에서만 작동합니다. Java스크립트가 활성화되었습니다.

XML 는 Extensible Markup Language의 약자입니다. 사람과 기계가 읽을 수 있는 형식으로 메시지를 인코딩하는 데 사용됩니다. HTML과 비슷하지만 사용자 정의 태그를 만들 수 있습니다. XML에 대한 자세한 내용은 다음 문서를 참조하세요. XML

AJAX를 사용하는 이유는 무엇입니까?

  • 이를 통해 데스크톱 애플리케이션과 마찬가지로 풍부한 대화형 웹 애플리케이션을 개발할 수 있습니다.
  • 사용자가 양식을 제출하지 않고 채울 때 유효성 검사를 수행할 수 있습니다. 이는 자동 완성을 사용하여 달성할 수 있습니다. 사용자가 입력하는 단어는 처리를 위해 서버에 제출됩니다. 서버는 사용자가 입력한 것과 일치하는 키워드로 응답합니다.
  • 다른 드롭다운 상자의 값에 따라 드롭다운 상자를 채우는 데 사용할 수 있습니다.
  • 서버에서 데이터를 검색할 수 있으며 전체 페이지를 로드하지 않고 페이지의 특정 부분만 업데이트할 수 있습니다. 이는 다음과 같은 항목을 로드하는 웹페이지 부분에 매우 유용합니다.
  • 짹짹
  • 칭찬하다
  • 사이트 등을 방문하는 사용자

PHP Ajax 애플리케이션을 만드는 방법

우리는 사용자가 인기 있는 PHP MVC 프레임워크를 검색할 수 있는 간단한 애플리케이션을 만들 것입니다.

우리 애플리케이션에는 사용자가 프레임워크의 이름을 입력할 수 있는 텍스트 상자가 있습니다.

그런 다음 mvc AJAX를 사용하여 일치 항목을 검색한 다음 검색 양식 바로 아래에 프레임워크의 전체 이름을 표시합니다.

1단계) 인덱스 페이지 생성

인덱스.php

<html>

    <head>

        <title>PHP MVC Frameworks - Search Engine</title>

        <script type="text/javascript" src="auto_complete.js"></script>

    </head>

    <body>

        <h2>PHP MVC Frameworks - Search Engine</h2>

        <p><b>Type the first letter of the PHP MVC Framework</b></p>

        <form method="POST" action="index.php">

            <p><input type="text" size="40" id="txtHint"  onkeyup="showName(this.value)"></p>

        </form>

        <p>Matches: <span id="txtName"></span></p>

    </body>

</html>

이리,

  • "onkeyup="showName(this.value)""는 다음을 실행합니다. Java텍스트 상자에 키를 입력할 때마다 스크립트 함수 showName이 실행됩니다. 이 기능을 자동 완성이라고 합니다.

2단계) 프레임워크 페이지 생성

프레임워크.php

<?php

$frameworks = array("CodeIgniter","Zend Framework","Cake PHP","Kohana") ;

$name = $_GET["name"];

if (strlen($name) > 0) {

    $match = "";

    for ($i = 0; $i < count($frameworks); $i++) {

        if (strtolower($name) == strtolower(substr($frameworks[$i], 0, strlen($name)))) {

            if ($match == "") {

                $match = $frameworks[$i];

            } else {

                $match = $match . " , " . $frameworks[$i];

            }

        }

    }

}

echo ($match == "") ? 'no match found' : $match;

?>

3단계) ​​JS 스크립트 생성

auto_complete.js

function showName(str){

    if (str.length == 0){ //exit function if nothing has been typed in the textbox

        document.getElementById("txtName").innerHTML=""; //clear previous results

        return;

    }

    if (window.XMLHttpRequest) {// code for IE7+, Firefox, Chrome, Opera, Safari

        xmlhttp=new XMLHttpRequest();

    } else {// code for IE6, IE5

        xmlhttp=new ActiveXObject("Microsoft.XMLHTTP");

    }

    xmlhttp.onreadystatechange=function() {

        if (xmlhttp.readyState == 4 && xmlhttp.status == 200){

            document.getElementById("txtName").innerHTML=xmlhttp.responseText;

        }

    }

    xmlhttp.open("GET","frameworks.php?name="+str,true);

    xmlhttp.send();

}

이리,

  • "if (str.length == 0)" 문자열의 길이를 확인합니다. 0이면 스크립트의 나머지 부분은 실행되지 않습니다.
  • “if (window.XMLHttpRequest)…” Internet Explorer 버전 5 및 6은 AJAX 구현을 위해 ActiveXObject를 사용합니다. Chrome, Fire와 같은 다른 버전 및 브라우저Fox XMLHttpRequest를 사용하십시오. 이 코드는 우리의 애플리케이션이 IE 5, 6과 기타 IE 및 브라우저의 상위 버전에서 작동하도록 보장합니다.
  • "xmlhttp.onreadystatechange=function…"은 AJAX 상호 작용이 완료되었는지, 상태가 200인지 확인한 다음 반환된 결과로 txtName 범위를 업데이트합니다.

4단계) PHP Ajax 애플리케이션 테스트

index.php 파일을 저장했다고 가정합니다. phututs/ajax에서 URL http://localhost/phptuts/ajax/index.php로 이동합니다.

PHP Ajax 애플리케이션 테스트

텍스트 상자에 C 문자를 입력하세요. 다음과 같은 결과가 나옵니다.

PHP Ajax 애플리케이션 테스트

위의 예는 AJAX의 개념과 이것이 풍부한 상호 작용 애플리케이션을 만드는 데 어떻게 도움이 되는지 보여줍니다.

요약

  • AJAX는 비동기(Asynchronous)의 약자입니다. Java스크립트 및 XML
  • AJAX는 웹 페이지의 일부만 업데이트하여 클라이언트와 서버 간의 상호 작용을 줄이는 풍부한 상호 작용 애플리케이션을 만드는 데 사용되는 기술입니다.
  • Internet Explorer 버전 5와 6은 ActiveXObject를 사용하여 AJAX 작업을 구현합니다.
  • Internet Explorer 버전 7 이상 및 브라우저 Chrome, Firefox, Opera, Safari는 XMLHttpRequest를 사용합니다.