1. Ajax 기초 문법

https://github.com/upcake/Class_Examples

교육 중에 작성한 예제들은 깃허브에 올려두고 있습니다. 

gif 파일은 클릭해서 보는 것이 정확합니다.

---

 - Ajax : Asynchronous JavaScript and XML

 - 비동기적 자바스크립트와 XML으로 직역할 수 있다.

 - 자바스크립트를 이용해서 비동기적으로 서버와 브라우저가 데이터를 주고받는 방식을 의미한다.

 - XML과 JSON 형식을 많이 사용한다.

 

 

▲Ajax 자동 완성 기능 설정

 - Turn to Tern Project 메뉴를 이용해 자동 완성 기능이 되도록 설정한다.

 

 

▲예제 1. Ajax 시작

▲예제 1의 작동 화면

 - JQuery에서 제공하는 $.ajax() 메서드를 이용해서 Ajax를 사용한다.

 - $.ajax(url, {옵션객체})

 - $.ajax({옵션객체}) ▶ 주로 사용

 - url : "" ▶ 서버에 요청할 url, 필수 요소

 - success : function(result) {}; ▶ Ajax 통신, 서버가 처리한 요청에 성공했을 때 실행되는 콜백 함수

 

 

▲예제 2. type, data, error

▲예제 2의 작동 화면

 - type : "" ▶ 데이터 전송 타입, get이면 주소창에 보이고 post면 안 보인다.

 - data : "" ▶ 요청과 함께 서버로 데이터를 전송할 파라미터(문자열 또는 객체)를 기입한다.

 - error: function (request, status, error) {};

  ▶ Ajax 통신에 실패했을 때 실행되는 콜백함수

  ▶ request, status, error는 에러 정보를 확인해주는 역할을 한다.

 

 

▲예제 3. get

 - $.get() ▶ get 방식으로 Ajax 수행

 

 

▲예제 4. load

 - HTML 태그를 가져와 문서 객체에 출력할 때 load() 메서드를 사용한다.

 - $('요소선택').load(url, data, 콜백함수) ▶ data와 콜백함수는 생략 가능하다.

 

 

▲예제 5. getJSON

 - $.getJSON() 메서드는 JSON 형식 파일을 쉽게 가져올 수 있지만, 잘 사용되지는 않는다고 한다.

 

 

▲예제 6. find

 - find() 메서드는 : xml 문서 객체에 접근할 때 사용하는 메서드이다.

 

 

▲예제 7.  serialize

▲예제 7의 작동 화면

 - serialize() : HTML의 폼 요소에 입력된 데이터를 쿼리 문자열로 바꿔준다.

 

 

▲예제 8. dataType

 - dataType : "" ▶ 요청할 데이터의 타입을 선택한다. xml, json, html, script를 선택할 수 있다.

 

 

▲예제 9. serialize 활용

▲예제 9의 작동 화면