AJAX 소개

Ajax를 공부하기 전에 먼저 Web 2.0이 무엇인지에 대해 토론해 보겠습니다. Web 2.0이라는 용어를 들으면 먼저 "Web 1.0이란 무엇입니까?"라고 질문해야 합니다. 사람들이 Web 1.0을 언급하는 경우는 드물지만 실제로는 완전히 다른 요청 및 응답 모델을 사용하는 전통적인 웹을 의미합니다. 예를 들어, hdu.edu.cn 웹사이트로 이동하여 버튼을 클릭하세요. 요청이 서버로 전송되고 응답이 브라우저로 반환됩니다. 요청은 단지 새로운 콘텐츠와 항목의 목록이 아니라 또 다른 완전한 HTML 페이지입니다. 따라서 웹 브라우저가 새 HTML로 페이지를 다시 그릴 때 깜박임이나 떨림이 나타날 수 있습니다. 실제로 요청과 응답은 표시되는 모든 새 페이지에서 명확하게 표시됩니다.

　 Web 2.0은 (대부분) 이러한 눈에 띄는 앞뒤 상호 작용을 제거합니다. 예를 들어 Google 지도에서는 최소한의 다시 그리기로 지도를 드래그하여 확대 및 축소할 수 있습니다. 물론 여전히 요청과 응답이 있지만 그 뒤에는 숨겨져 있습니다. 사용자로서 경험은 더욱 편안하고 데스크탑 애플리케이션과 매우 흡사합니다. 이 새로운 느낌과 패러다임은 누군가가 웹 2.0을 언급할 때 얻게 되는 것입니다.

걱정해야 할 것은 이러한 새로운 상호 작용을 어떻게 가능하게 만드는가입니다. 분명히 요청을 하고 응답을 받아야 하지만 느리고 투박한 웹 상호 작용의 느낌을 만드는 것은 각 요청/응답 상호 작용에 대한 HTML 다시 그리기입니다. 따라서 전송된 요청과 수신된 응답에 전체 HTML 페이지 대신 필요한 데이터만 포함되도록 하는 방법이 필요하다는 것은 분명합니다. 전체 새 HTML 페이지를 가져와야 하는 유일한 경우는 사용자가 새 페이지를 보도록 할 때입니다.

　 하지만 대부분의 상호작용은 기존 페이지에 세부정보를 추가하거나, 본문을 수정하거나, 원본 데이터를 덮어쓰는 것입니다. 이러한 경우 Ajax 및 Web 2.0 방법을 사용하면 전체 HTML 페이지를 업데이트하지 않고도 데이터를 보내고 받을 수 있습니다. 온라인에서 많은 시간을 보내는 사용자의 경우 이 기능을 사용하면 애플리케이션의 속도와 반응성이 향상되어 애플리케이션이 때때로 사이트를 다시 방문하게 됩니다.

Ajax란 무엇입니까?

1. 전체 이름: Asynchronous, JavaScript, And, XML(비동기 JavaScript 및 XML)

2.Ajax는 기술이 아니라 실제로입니다. 각각 고유한 기능을 가진 여러 기술이 함께 모여 강력한 신기술이 됩니다

포함: 와 XHTML 및 CSS

documentObjectModels를 사용하여 동적으로 표시하고 상호 작용합니다.
데이터 상호 작용 및 작업에 XML 및 XSLT를 사용합니다.
비동기 데이터에 XMLHTTPREQUEST를 사용하여 JavaScript로 데이터를 수신합니다. :
는 클라이언트 측 스크립트를 사용하여 교환하는 웹 애플리케이션 개발 방법입니다. 웹 서버를 통한 데이터. 이러한 방식으로 상호 작용 프로세스를 중단하거나 다시 편집하지 않고도 웹 페이지를 동적으로 업데이트할 수 있습니다. Ajax를 사용하면 기본 데스크탑 애플리케이션에 가까운 직접적이고 가용성이 높으며 풍부하고 동적인 웹 사용자 인터페이스를 만들 수 있습니다.

Ajax에는 주로 다음과 같은 장점이 있습니다.
1. 플러그인 지원이 필요하지 않습니다(일반 브라우저 및 JavaScript가 기본적으로 활성화되어 있음). (페이지를 새로 고치지 않고도 업데이트 가능한 데이터를 얻을 수 있습니다.)

3. 웹 프로그램의 성능을 향상합니다. (전체적으로 데이터를 제출할 필요 없이 온디맨드 방식으로 전송 가능) 4. 서버 및 대역폭(서버의 일부 작업이 클라이언트로 전송됨)

Ajax의 단점은 다음과 같습니다.

1. XMLHttpRequest 객체(예: IE5 이전) 2. Ajax는 항상 현재 페이지에 있고 페이지를 앞으로 또는 뒤로 이동하지 않기 때문에 삭제됩니다.

3. 충분합니다(검색 엔진 크롤러는 아직 JS 콘텐츠로 인해 변경되는 데이터를 이해할 수 없기 때문입니다). 4. 개발 및 디버깅 도구가 부족합니다(다른 언어의 도구 세트에 비해 JS 또는 Ajax 디버깅 개발은 한심합니다).

Ajax 사용에서 가장 중요한 부분은 비동기 요청을 구현하고, 응답을 받고, 콜백을 실행하는 것입니다. 그렇다면 비동기식과 동기식의 차이점은 무엇입니까?

일반적인 웹 프로그램 개발은 기본적으로 동기식입니다. 즉, 다음 전화를 받기 전에 하나의 프로그램을 실행해야 한다는 의미입니다. 이는 전화 통화를 먼저 받아야 다음 전화를 받을 수 있는 것과 같습니다. . 비동기적으로 여러 작업을 동시에 실행할 수 있습니다. 문자 메시지와 유사하게 여러 줄이 있고 하나의 문자 메시지를 봐도 다른 문자 메시지를 받는 것이 중단되지 않습니다. Ajax는 동기 모드에서도 실행될 수 있지만 동기 모드는 차단 모드이므로 여러 줄이 하나씩 실행되어 웹 페이지가 애니메이션이 정지된 상태로 나타나게 됩니다. Ajax는 비동기 모드를 사용합니다.

Google Suggest

2005년 Google은 Google Suggest를 통해 AJAX를 인기 있게 만들었습니다.

Google Suggest는 AJAX를 사용하여 매우 동적인 웹 인터페이스를 만듭니다. Google 검색창에 키워드를 입력하면 JavaScript가 해당 문자를 서버로 보내고 서버는 검색 제안 목록을 반환합니다.

표시 예:

먼저 html 파일 만들기:

<!DOCTYPE html>
<html>
<head>
    <meta charset="utf-8">
    <title>php中文网(php.cn)</title>
    <script src="http://libs.baidu.com/jquery/1.10.2/jquery.min.js"></script>
    <script type="text/javascript">
        function checkname(){
            if($('#name').val() == ""){
                $('#msg').html("please enter the name!");
                $('#name').focus;
                return false;
            }
            if($('#address').val() == ""){
                $('#msg').html("please enter the address!");
                $('#address').focus;
                return false;
            }
            ajax_post();
        }
        function ajax_post(){
            $.post("txt.php",{name:$('#name').val(),address:$('#address').val()}, //url链接txt.php
                    function(data){
                        //$('#msg').html("please enter the name!");
                        //alert(data);
                        $('#msg').html(data);
                    },
                    "text");
        }
    </script>
</head>
<body>
    <form id="ajaxform" name="ajaxform" method="post" action="txt.php">
        <p>
            姓名：<input type="text" name="name" id="name"/>
        </p>
        <p>
            地址：<input type="text" name="address" id="address"/>
        </p>
        <p id="msg"></p>
        <p>
            <input name="Submit" type="button" value="submit" onclick="return checkname()"/>
        </p>
    </form>
</body>
</html>

txt.php 파일 만들기:

<?php
    $name = $_POST["name"];
    $address = $_POST["address"];
    echo $name."<br>";
    echo $address."<br>";
?>

지속적인 학습

새로운 파일

<!DOCTYPE html> <html> <head> <meta charset="utf-8"> <title>php中文网(php.cn)</title> <script src="http://libs.baidu.com/jquery/1.10.2/jquery.min.js"></script> <script type="text/javascript"> function checkname(){ if($('#name').val() == ""){ $('#msg').html("please enter the name!"); $('#name').focus; return false; } if($('#address').val() == ""){ $('#msg').html("please enter the address!"); $('#address').focus; return false; } ajax_post(); } function ajax_post(){ $.post("txt.php",{name:$('#name').val(),address:$('#address').val()}, //url链接txt.php function(data){ //$('#msg').html("please enter the name!"); //alert(data); $('#msg').html(data); }, "text"); } </script> </head> <body> <form id="ajaxform" name="ajaxform" method="post" action="txt.php"> <p> 姓名：<input type="text" name="name" id="name"/> </p> <p> 地址：<input type="text" name="address" id="address"/> </p> <p id="msg"></p> <p> <input name="Submit" type="button" value="submit" onclick="return checkname()"/> </p> </form> </body> </html>

제출하다 코드 재설정

자동운전