[JQUERY] 무엇 AJAX이며 어떻게 작동합니까? [복제]

무엇 AJAX이며 어떻게 작동합니까? [복제]

해결법

1. ---

   1.AJAX, 또는 (A) 동기 (J) avascript (A) 차 (X) ML (흥미롭게도 JSON 더이 일을 사용하는 경향이있는), 자바 스크립트가 원격 서버와 통신 할 수있는 브라우저 객체를 사용하는 시스템입니다. 이것의 일반적인 사용 사례는 다른 페이지로 이동하지 않고도 클라이언트의 인터페이스를 업데이트 할 수있다. 우리는주의하지만, 몇 마디를 시작하기 전에.

   AJAX, 또는 (A) 동기 (J) avascript (A) 차 (X) ML (흥미롭게도 JSON 더이 일을 사용하는 경향이있는), 자바 스크립트가 원격 서버와 통신 할 수있는 브라우저 객체를 사용하는 시스템입니다. 이것의 일반적인 사용 사례는 다른 페이지로 이동하지 않고도 클라이언트의 인터페이스를 업데이트 할 수있다. 우리는주의하지만, 몇 마디를 시작하기 전에.

   참고 :이 커뮤니티 위키 포스트는 예를 들어 AJAX 호출을 보여 JQuery와 사용합니다. 이 AJAX 호출을의 브라우저 호환성 문제를 숨길 때 그것은 이민자를위한 권장합니다. JQuery와에 대한 자세한 내용은 JQuery와 웹 사이트를 확인하시기 바랍니다.

   참고 : 예제는 PHP 서버와의 통신을 사용하지만, 모든 서버 측 언어가 작동합니다.

   먼저 우리는 AJAX 호출을 가지고있다. AJAX와에서 발생할 수있는 다양한 유형의 이벤트에 대한 당신에게 설정 콜백 핸들러를 호출합니다. 일반적인 오해는 다음의 코드와 같이 할 수있다 :

   // Incorrect!
   function makeAjaxCall() {
     var result = $.ajax({
       url: 'ajax/test.html'
     });
   
     return result;
   }
   

   여기서 문제는 브라우저가 AJAX 요청을 할 때, 그것은 하나 다시 성공적으로 와서, 또는 실패로 할 수 있다는 것입니다. 서버에 내부 오류가있는 경우 예를 들어, 당신은 액세스를 존재하지 않는 페이지를 시도하거나합니다. 가능한 조직으로 물건을 유지하기 위해 AJAX를 사용하면 데이터 요청을 처리 할 콜백 함수를 만들어야합니다. 다음과 같이 올바른 방법은 다음과 같습니다

   // Correct!
   function makeAjaxCall() {
     $.ajax({
       url: 'ajax/test.html',
       success: function(data) {
         alert('Horray the AJAX call succeeded!');
       },
       error: function(xhr, error) {
         alert('Holy errors batman!');
       }
     });
   }
   

   AJAX 호출이 비동기 또는 동기가 될 수 있습니다. 브라우저가 AJAX 요청을하고 다른 일을 계속하는 것이 비동기 의미합니다. 동기 수단이 브라우저는 AJAX 호출이 완료 될 때까지 무엇을하고 있는지 중지됩니다. 여기에 지혜로운 두 코드의 차이의 예입니다 :

   // An asynchronous call
   // This is the default
   $.ajax({
     url: '/server.php',
     success: function(data) {
       alert('Horray the AJAX call succeeded!');
     },
     error: function(xhr, error) {
       alert('Holy errors batman!');
     }
   });
   // This will get called right away
   myFunction();
   

   이제 동기 호출 :

   // A synchronous call
   $.ajax({
     url: '/server.php',
     async: false, // set the property here
     success: function(data) {
       alert('Horray the AJAX call succeeded!');
     },
     error: function(xhr, error) {
       alert('Holy errors batman!');
     }
   });
   // This won't get called until the AJAX returns!
   myFunction();
   

   경고 : 브라우저가 호출을 완료 할 때까지 브라우저가 아무것도 할 수 있도록 동기 호출을합니다. 브라우저까지이있을 가능성이 잠금! 당신은 정말 당신이 무슨 일을하는지 알고있는 경우에만이 사용! 시간의 99 %는 비동기 AJAX 호출을합니다.

   참고 : 동기 호출은 콜백 핸들러를 설정하지 않는 밖으로 얻을 수있는 말은하지 않습니다. 당신은 여전히 ​​콜백을 사용하여 결과를 처리해야합니다.

   이 이미지는 AJAX 원격 서버와 통신하는 데 사용되는 방법을 도시한다. 서버에 실제 호출을 브라우저 객체와 먼저 AJAX 코드 인터페이스. 서버는 요청을 처리하고 다음이 성공 핸들러, 또는 오류 처리기를 호출 할 필요가있는 경우 결정하기 위해 호출의 결과에 보이는 브라우저에 결과 다시 보냅니다. 그러나, 일반적으로 같은 기원 정책으로 알려진 모두에서 통신을 방지 할 수 있습니다 하나의 문제가 있습니다.

   클라이언트가 수동으로 요청을 한 경우 서버의 관점에서 참고 AJAX 호출은 볼 것이다. 즉, 서버는 세션과 다른 클라이언트 특정 데이터 등을 이용할 수있다.

   동일 출처 정책은 기본적 AJAX 호출이 http://www.mysite.com에서 호스팅되는 페이지에있는 경우, 여기에 예시 된 바와 같이, 당신은 http://www.othersite.com로 전화를 걸 수 없다는 것을 의미합니다 :

   이 주위에 얻을 수있는 한 가지 방법은 프록시 서비스를 통해입니다. 당신이 사이트와 차례로 인터페이스에서 당신은 예를 들어 CURL 호출을 통해, 원하는 서버와 같은 서버에서 스크립트와 인터페이스 곳이다. 다음은 문제의이 프록시 방법을 설명 :

   타사 서버가 있지만 서버에서 들어오는 클라이언트로부터 들어오는 요청이 표시되지 않습니다 경고. 일부 서버는 서버에 많은 호출을 동일한 IP에 눈살을 찌푸린 다. 이것은 당신이 차단 얻을, 그래서 문제의 사이트가이 설정 괜찮인지 확인 할 수있다.

   참고 : 구글 크롬 확장 프로그램 호출 (당신이 비록 각 사이트에 대한 권한을 설정에 있습니다), 특정 그리스 몽키 통화 및 어도비 AIR와 동일 출처 정책이 적용되지 않습니다 어떤 경우가 있습니다.

   이제 가서 할 수있는 마지막 개념은 방법과 상호 작용하는 클라이언트에 대한 서버의 데이터를 반환합니다.

   그것은 매우 인기있는 옵션이기 때문에, 우리는 데이터를 다시 전달하는 JSON, 또는 (J) AVA (S) cript (O) bject (N) otation을 사용합니다. JSON은 기본적으로 다음과 같습니다 :

   {
       color: "red",
       value: "#f00"
   }
   

   이 문자열은 서버 결과에 쉽게 액세스를 제공, 자바 스크립트 객체로 전환 할 수 있습니다.

   이 유효 자바 스크립트이기 때문에 경고, 많은 사람들이 빨리 JS 개체를 만들 평가를 ()를 사용합니다. 이 작업을 수행하지 마십시오. 결과는 악성 코드가있는 경우이 보안 문제로 열립니다. 항상 JSON 파서를 사용하는 보안 데이터에 대한 확인이!

   앞의 예를 사용하여, 우리는 지금처럼 서로 다른 값에 액세스 할 수 있습니다 :

   $.ajax({
     url: '/server.php',
     // It's a good idea to explicitly declare the return type
     dataType: 'json',
     success: function(json) {
       alert("The color is: " + json.color + " and the value is: " + json.value);
     },
     error: function(xhr, error) {
       alert('Holy errors batman!');
     }
   });
   

   공지 사항이 얼마나 쉬운 그것은 반환의 값에 액세스하는 것입니다. 인기있는 또 다른 옵션은 서버에서 HTML을 검색하고

   또는 기타 요소에 주입하는 것입니다. 다음은 이러한 예이다 :

   $.ajax({
     url: '/server.php',
     // It's a good idea to explicitly declare the return type
     dataType: 'html',
     success: function(html) {
       $("#mydiv").html(html);
     },
     error: function(xhr, error) {
       alert('Holy errors batman!');
     }
   });
   
   // Some JS/HTML here
   
   <div id="mydiv"></div>
   

   성공적인 리턴의 경우,

   의 내용이 반환 HTML로 채워집니다.

   TODO : 악의적 인 HTML 인젝션에 대한 보안을 다루기?

   이것은 AJAX의 커뮤니티 위키 포스트를 마칩니다. 나는 당신이 AJAX를 이해하거나, 쉬운 방법으로 대한 일반적인 질문과 대답을 돕는 데 도움이 될 것입니다 바랍니다.

from https://stackoverflow.com/questions/6009206/what-is-ajax-and-how-does-it-work by cc-by-sa and MIT license