전치

Ajax는 "Asynchronous JavaScript + XML"의 약자로 브라우저 내에서 JavaScript 통신 기능을 사용하여 XML 형식의 데이터를 송수신하는 기술입니다.

목차

1. 다른 화면 천이란?
2. 자화면 전환이란?
3. 비동기 통신(Ajax)이란?
4.Ajax 쓰기(jquery)

Ajax에 대해 알기 위해서는 1~3의 지식을 익히면 이해가 깊어집니다.
※비동기 통신에 대해 이해하고 있는 분은 목차의 4까지 읽어 날려 받을 수 있습니다.

1. 다른 화면 천이란?

다른 화면 전환이란 로그인 화면에서 신규 등록을 클릭하면,
계정 등록 화면으로 이동하도록 다른 페이지로 전환하는 것을 의미합니다.
2.자화면 천이란? 한편, 자화면 전환이란 로그인 화면에서 로그인이 실패하고 "비밀번호가 잘못되었습니다!"라는 오류 메시지가 표시되도록 같은 화면(같은 URL)이 돌아오는 처리입니다. 이때, Ajax로 쓰여져 있지 않으면, 모든 HTML의 소스 코드가 읽혀지고 있습니다. (동기 통신이라고 합니다) 동기 통신에서는, 페이지 표시를 위한 HTML와 javascript 양쪽 모두의 소스 코드가 모두 돌아오므로, 다시 페이지가 갱신되고 있습니다. 3. 비동기 통신(Ajax)이란? 비동기 통신은 자체 화면 전환의 일종입니다. ”로그인 화면”으로 로그인에 실패했을 때, 동기 통신에서는 “로그인 화면”에서 사용되고 있는 모든 HTML 코드와 javascript 코드가 돌아옵니다만, 비동기 통신에서는, 페이지의 갱신은 하지 않고, 「패스워드가 잘못되었습니다!”라는 메시지만 돌아옵니다. 즉, 필요한 정보만을 취득해 표시시키고 있습니다. 그래서 동기 통신보다 속도가 빨라집니다. 4.Ajax 코드를 작성하는 방법 Ajax 소스 코드의 예는 다음과 같습니다. $('#button').on('click', function(){ // Ajax 통신 시작 $.ajax({ url : 'controller.java', // 연결할 클래스 이름 (php에서도 ok) type: 'GET', 　　　　　 //GET통신인가, POST통신인가 dataType: 'json', 　　　 //java로 보낼 데이터 유형 data: {　　　　　　 // 이 형식을 쓰는 방법을 json이라고 합니다. userid : 1, // userid라는 변수 이름에 1이라는 정보를 보유합니다. password: 'hoge', }, }) .success(function(result) { // 통신 성공시의 처리를 기술(result에는 java로부터 취득해 온 정보를 보관 유지하고 있다) }) .error(function(result) { // 통신 실패시의 처리를 기술 }); })