최신 웹 개발 튜토리얼
 

AJAX소개

❮ 이전 다음 장 ❯

AJAX 당신이 할 수 있기 때문에, 개발자의 꿈이다 :

  • 페이지를 재로드하지 않고도 웹 페이지를 업데이트
  • 서버에서 요청 데이터 - 페이지가로드 된 후
  • 서버에서 데이터를 수신 - 페이지가로드 된 후
  • 서버에 데이터를 전송 - 백그라운드에서

각 장에서 자신 예를보십시오

각 장에서는 온라인으로 예제를 편집 할 수 있습니다, 그 결과를 볼 수있는 버튼을 클릭합니다.

AJAX 예제

Let AJAX change this text

»그것을 자신을 시도

AJAX 예제 설명

HTML 페이지

<!DOCTYPE html>
<html>
<body>

<div id="demo">
  <h2>Let AJAX change this text</h2>
  <button type="button" onclick="loadDoc()">Change Content</button>
</div>

</body>
</html>

HTML 페이지는 포함 <div> 섹션과 <button> .

<div> 섹션은 서버에서 정보를 표시하는 데 사용됩니다.

<button> (클릭했을 경우) 함수를 호출한다.

이 기능은 웹 서버로부터 데이터를 요청하고이를 표시

기능 loadDoc()

function loadDoc() {
  var xhttp = new XMLHttpRequest();
  xhttp.onreadystatechange = function() {
    if (this.readyState == 4 && this.status == 200) {
     document.getElementById("demo").innerHTML = this.responseText;
    }
  };
  xhttp.open("GET", "ajax_info.txt", true);
  xhttp.send();
}

당신은 이미 알아야 할 사항

전에 당신은 당신이 다음에 대한 기본적인 이해가 있어야 계속 :

  • HTML
  • 자바 스크립트

먼저이 주제를 공부하고 싶다면, 우리의 튜토리얼을 찾을 홈 페이지 .

무엇 AJAX ?

AJAX 비동기 자바 스크립트와 XML을 =.

AJAX는 잘못된 이름입니다. AJAX 애플리케이션은 데이터를 전송하기 위해 XML을 사용할 수 있지만, 일반 텍스트 또는 JSON 텍스트로 데이터를 전송하는 동일 일반적이다.

AJAX는 빠르고 동적 웹 페이지를 생성하는 기술이다.

AJAX는 웹 페이지가 뒤에서 서버와 적은 양의 데이터를 교환하여 비동기 적으로 업데이트 할 수 있습니다. 이는 전체 페이지를 재로드하지 않고, 웹 페이지의 일부를 갱신 할 수 있다는 것을 의미한다.

콘텐츠가 변경하는 경우는 고전적인 웹 페이지 (AJAX를 사용하지 않은), 전체 페이지를 새로 고침한다.

구글지도, Gmail은, 유튜브, 페이스 북 : AJAX를 사용하는 응용 프로그램의 예.

어떻게 AJAX 작품

AJAX

AJAX는 인터넷 표준을 기반으로

AJAX 인터넷 표준을 기반으로 한의 조합을 사용하여

  • XMLHttpRequest 객체 (웹 서버로부터 데이터를 검색하기 위해)
  • JavaScript/DOM (표시하기 / 데이터를 사용)

XMLHttpRequest 잘못된 이름입니다. 당신은 AJAX를 사용하는 XML을 이해 할 필요가 없습니다.

구글은 추천

구글이 제안에 AJAX, 구글 2005 년 인기 하였다.

Google 추천 검색어 는 구글의 검색 창에 입력을 시작하면, 자바 스크립트가 서버에 떨어져 문자를 전송하고 서버가 제안 목록을 반환 : 매우 동적 인 웹 인터페이스를 만들 AJAX를 사용하고 있습니다.

AJAX 오늘 사용 시작

AJAX는 기존의 표준에 기초한다. 이러한 기준은 몇 년 동안 개발에 사용되어왔다. 어떻게 작동하는지보고 우리의 다음 장을 읽어보세요!


❮ 이전 다음 장 ❯