jQuery - AJAX 소개

AJAX란 무엇인가요?

AJAX = 비동기 JavaScript 및 XML.

AJAX는 빠르고 동적인 웹 페이지를 만드는 기술입니다.

AJAX를 사용하면 백그라운드에서 서버와 소량의 데이터를 교환하여 웹페이지를 비동기적으로 업데이트할 수 있습니다. 이는 전체 페이지를 다시 로드하지 않고도 웹페이지의 일부를 업데이트할 수 있음을 의미합니다.

AJAX를 사용하지 않는 기존 웹페이지에서는 콘텐츠를 업데이트해야 하는 경우 전체 웹페이지를 다시 로드해야 합니다.

AJAX를 활용한 적용사례는 Sina Weibo, Google Maps, Kaixin.com 등 다양합니다.

jQuery 및 AJAX 정보

JQuery는 CSS3 및 다양한 브라우저(IE 6.0+, FF1.5+, Safari 2.0+, Opera 9.0+)와 호환되는 경량 js 라이브러리입니다. jQuery를 사용하면 사용자는 HTML 문서 및 이벤트를 보다 쉽게 처리하고, 애니메이션 효과를 구현하고, 웹 사이트에 AJAX 상호 작용을 쉽게 제공할 수 있습니다.

jQuery AJAX 메서드를 사용하면 HTTP Get 및 HTTP Post를 사용하여 원격 서버에서 텍스트, HTML, XML 또는 JSON을 요청할 수 있으며, 이 외부 데이터를 웹 페이지의 선택한 요소에 직접 로드할 수 있습니다.

예:

먼저 프런트 엔드 코드 표시:

<!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(){
            //按钮单击时执行
            $("#testAjax").click(function(){
                //Ajax调用处理
                var html = $.ajax({
                    type: "POST",
                    url: "text.php",
                    data: "name=garfield&age=18",
                    async: false
                }).responseText;
                $("#myDiv").html('<h2>'+html+'</h2>');
            });
        });
    </script>
</head>
<body>
<div id="myDiv"><h2>通过 AJAX 改变文本</h2></div>
<button id="testAjax" type="button">Ajax改变内容</button>
</body>
</html>

배경 PHP 코드 조각을 표시한 후 text.php로 이름을 지정했습니다.

<?php
  $msg='Hello,'.$_POST['name'].',your age is '.$_POST['age'].'!';
  echo $msg;
?>

이런 식으로 , JQuery Simple Ajax 호출 예제를 완성합니다.

지속적인 학습

새로운 파일

<!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(){ //按钮单击时执行 $("#testAjax").click(function(){ //Ajax调用处理 var html = $.ajax({ type: "POST", url: "text.php", //调用text.php data: "name=garfield&age=18", async: false }).responseText; $("#myDiv").html('<h2>'+html+'</h2>'); }); }); </script> </head> <body> <div id="myDiv"><h2>通过 AJAX 改变文本</h2></div> <button id="testAjax" type="button">Ajax改变内容</button> </body> </html>

제출하다 코드 재설정

자동운전