jQuery-Ajax

AJAX는 Asynchronous JavaScript 및 XML의 약어이며이 기술은 브라우저 페이지를 새로 고치지 않고도 서버에서 데이터를로드하는 데 도움이됩니다.

AJAX를 처음 사용하는 경우 계속 진행하기 전에 Ajax 자습서 를 살펴 보는 것이 좋습니다 .

JQuery는 차세대 웹 애플리케이션을 개발하기 위해 풍부한 AJAX 메소드 세트를 제공하는 훌륭한 도구입니다.

간단한 데이터로드

이것은 JQuery AJAX를 사용하여 정적 또는 동적 데이터를로드하는 것은 매우 쉽습니다. JQuery는load() 일을하는 방법-

통사론

다음은 간단한 구문입니다. load() 방법-

[selector].load( URL, [data], [callback] );

다음은 모든 매개 변수에 대한 설명입니다.

URL− 요청이 전송되는 서버 측 리소스의 URL. 데이터를 동적으로 생성하거나 데이터베이스에서 생성하는 CGI, ASP, JSP 또는 PHP 스크립트 일 수 있습니다.
data−이 선택적 매개 변수는 속성이 요청에 전달 될 적절하게 인코딩 된 매개 변수로 직렬화되는 객체를 나타냅니다. 지정된 경우 요청은POST방법. 생략하면GET 방법이 사용됩니다.
callback− 응답 데이터가 일치하는 집합의 요소에로드 된 후 호출되는 콜백 함수. 이 함수에 전달되는 첫 번째 매개 변수는 서버에서받은 응답 텍스트이고 두 번째 매개 변수는 상태 코드입니다.

예

작은 JQuery 코딩으로 다음 HTML 파일을 고려하십시오.

<html>
   <head>
      <title>The jQuery Example</title>
      <script type = "text/javascript" 
         src = "https://ajax.googleapis.com/ajax/libs/jquery/2.1.3/jquery.min.js">
      </script>
		
      <script type = "text/javascript" language = "javascript">
         $(document).ready(function() {
            $("#driver").click(function(event){
               $('#stage').load('/jquery/result.html');
            });
         });
      </script>
   </head>
	
   <body>
      <p>Click on the button to load /jquery/result.html file −</p>
		
      <div id = "stage" style = "background-color:cc0;">
         STAGE
      </div>
		
      <input type = "button" id = "driver" value = "Load Data" />
   </body>
</html>

여기 load() 지정된 URL에 대한 Ajax 요청을 시작합니다. /jquery/result.html파일. 이 파일을로드하면 모든 콘텐츠가 ID stage 태그가 지정된 <div> 내부에 채워집니다 . /jquery/result.html 파일에 HTML 줄이 하나만 있다고 가정합니다.

<h1>THIS IS RESULT...</h1>

주어진 버튼을 클릭하면 result.html 파일이로드됩니다.

JSON 데이터 가져 오기

서버가 요청에 대해 JSON 문자열을 반환하는 상황이있을 수 있습니다. JQuery 유틸리티 함수getJSON() 반환 된 JSON 문자열을 구문 분석하고 결과 문자열을 콜백 함수에서 추가 작업을 수행하기위한 첫 번째 매개 변수로 사용할 수 있도록합니다.

통사론

다음은 간단한 구문입니다. getJSON() 방법-

[selector].getJSON( URL, [data], [callback] );

다음은 모든 매개 변수에 대한 설명입니다.

URL − GET 메소드를 통해 접속 된 서버 측 리소스의 URL.
data − URL에 추가 할 쿼리 문자열 또는 미리 형식이 지정되고 인코딩 된 쿼리 문자열을 구성하는 데 사용되는 이름 / 값 쌍으로 사용되는 속성을 가진 객체.
callback− 요청이 완료 될 때 호출되는 함수. 응답 본문을 JSON 문자열로 다이제스트 한 데이터 값은이 콜백에 첫 번째 매개 변수로 전달되고 상태는 두 번째 매개 변수로 전달됩니다.

예

작은 JQuery 코딩으로 다음 HTML 파일을 고려하십시오.

<html>
   <head>
      <title>The jQuery Example</title>
      <script type = "text/javascript" 
         src = "https://ajax.googleapis.com/ajax/libs/jquery/2.1.3/jquery.min.js">
      </script>
		
      <script type = "text/javascript" language = "javascript">
         $(document).ready(function() {
            $("#driver").click(function(event){
				
               $.getJSON('/jquery/result.json', function(jd) {
                  $('#stage').html('<p> Name: ' + jd.name + '</p>');
                  $('#stage').append('<p>Age : ' + jd.age+ '</p>');
                  $('#stage').append('<p> Sex: ' + jd.sex+ '</p>');
               });
					
            });
         });
      </script>
   </head>
	
   <body>
      <p>Click on the button to load result.json file −</p>
		
      <div id = "stage" style = "background-color:#eee;">
         STAGE
      </div>
		
      <input type = "button" id = "driver" value = "Load Data" />
   </body>
</html>

여기에 JQuery 유틸리티 메서드 getJSON() 지정된 URL에 대한 Ajax 요청을 시작합니다. result.json파일. 이 파일을로드 한 후 모든 콘텐츠는 콜백 함수로 전달되며 마지막으로 ID stage 태그가 붙은 <div> 내부에 채워집니다 . result.json 파일에 다음과 같은 json 형식의 내용이 있다고 가정합니다.

{
   "name": "Zara Ali",
   "age" : "67",
   "sex": "female"
}

주어진 버튼을 클릭하면 result.json 파일이로드됩니다.

서버에 데이터 전달

여러 번 사용자로부터 입력을 수집하고 추가 처리를 위해 해당 입력을 서버로 전달합니다. JQuery AJAX를 사용하면 수집 된 데이터를 서버로 쉽게 전달할 수 있습니다.data 사용 가능한 Ajax 메소드의 매개 변수.

예

이 예제는 사용자 입력을 웹 서버 스크립트에 전달하여 동일한 결과를 다시 보내고이를 인쇄하는 방법을 보여줍니다.

<html>
   <head>
      <title>The jQuery Example</title>
      <script type = "text/javascript" 
         src = "https://ajax.googleapis.com/ajax/libs/jquery/2.1.3/jquery.min.js">
      </script>
		
      <script type = "text/javascript" language = "javascript">
         $(document).ready(function() {
            $("#driver").click(function(event){
               var name = $("#name").val();
               $("#stage").load('/jquery/result.php', {"name":name} );
            });
         });
      </script>
   </head>
	
   <body>
      <p>Enter your name and click on the button:</p>
      <input type = "input" id = "name" size = "40" /><br />
		
      <div id = "stage" style = "background-color:cc0;">
         STAGE
      </div>
		
      <input type = "button" id = "driver" value = "Show Result" />
   </body>
</html>

다음은 작성된 코드입니다. result.php 스크립트 −

<?php
   if( $_REQUEST["name"] ){
      $name = $_REQUEST['name'];
      echo "Welcome ". $name;
   }
?>

이제 주어진 입력 상자에 텍스트를 입력 한 다음 "결과 표시"버튼을 클릭하여 입력 상자에 입력 한 내용을 볼 수 있습니다.

JQuery AJAX 메서드

JQuery를 사용하여 AJAX의 기본 개념을 보았습니다. 다음 표는 프로그래밍 요구에 따라 사용할 수있는 모든 중요한 JQuery AJAX 메서드를 나열합니다.

Sr. 아니.	방법 및 설명
1	jQuery.ajax (옵션) HTTP 요청을 사용하여 원격 페이지를로드합니다.
2	jQuery.ajaxSetup (옵션) AJAX 요청에 대한 전역 설정을 설정합니다.
삼	jQuery.get (URL, [데이터], [콜백], [유형]) HTTP GET 요청을 사용하여 원격 페이지를로드합니다.
4	jQuery.getJSON (URL, [데이터], [콜백]) HTTP GET 요청을 사용하여 JSON 데이터를로드합니다.
5	jQuery.getScript (url, [콜백]) HTTP GET 요청을 사용하여 JavaScript 파일을로드하고 실행합니다.
6	jQuery.post (URL, [데이터], [콜백], [유형]) HTTP POST 요청을 사용하여 원격 페이지를로드합니다.
7	load (URL, [데이터], [콜백]) 원격 파일에서 HTML을로드하고 DOM에 삽입합니다.
8	직렬화 () 입력 요소 집합을 데이터 문자열로 직렬화합니다.
9	serializeArray () .serialize () 메서드와 같은 모든 양식 및 양식 요소를 직렬화하지만 작업 할 수 있도록 JSON 데이터 구조를 반환합니다.

JQuery AJAX 이벤트

AJAX 호출 진행의 수명주기 동안 다양한 JQuery 메서드를 호출 할 수 있습니다. 다양한 이벤트 / 단계에 따라 다음 방법을 사용할 수 있습니다.

모든 AJAX 이벤트를 살펴볼 수 있습니다 .

Sr. 아니.	방법 및 설명
1	ajaxComplete (콜백) AJAX 요청이 완료 될 때마다 실행할 함수를 첨부하십시오.
2	ajaxStart (콜백) AJAX 요청이 시작되고 이미 활성화 된 것이 없을 때마다 실행할 함수를 첨부합니다.
삼	ajaxError (콜백) AJAX 요청이 실패 할 때마다 실행할 함수를 첨부합니다.
4	ajaxSend (콜백) AJAX 요청을 보내기 전에 실행할 함수를 첨부하십시오.
5	ajaxStop (콜백) 모든 AJAX 요청이 종료 될 때마다 실행할 함수를 첨부하십시오.
6	ajaxSuccess (콜백) AJAX 요청이 성공적으로 완료 될 때마다 실행할 함수를 연결합니다.