ajax

Ajax

 화면의 reload없이 내가 원하는 Data를 실시간으로 server로 전송할 수 있는 방법.....

 화면이 reload될 때마다 생기는 잠시간의 화면 갱신 시간은 사용자로 하여금 사용에 거슬림(?)을 줄수 있는 요소 중 하나이다.

 이를 해결할 수 있는 방법이 ajax다.

 사실 ajax에 대해 그동안 정확히는 알지 못하고, 화면을 부분적으로 갱신(?)하거나 화면 갱신 없이 원하는 data를 server로 부터 받아 오는 방법으로만 막연히 이해하고 있었다. 

Question	Answer
ajax는 새로운 언어인가?	새로운 언어라기 보다 기존의 javascript, XML등의 기술들을 엮어 놓은 기법.
Server 기술인가 Client 기술인가?	javascript로 이루어진 client 기술.
알고 있어야 하는 base 기술은 무엇인가?	browser에서 구현되다 보니, 기본적으로 html, css, javascript를 이해하고 있어야 하고,   여기에 추가로 jquery를 알고 있으면 좋다.

나름의 답을 찾긴했지만 학습 시작시에는 위와 같은 의문을 가지고 ajax에 대해 학습을 시작하였다 .

Ajax (asynchronous javascript and XML) : 

         비동기적으로 데이터를 교환하기 위한 기법으로 Javascipt, XML을 기반으로 하는 기법.

ajax를 구현하는 방법

---

XMLHttpRequest object

// This is the client-side script. // Initialize the Http request. var xhr = new XMLHttpRequest(); xhr.open('get', 'send-ajax-data.php'); // Track the state changes of the request. xhr.onreadystatechange = function () { var DONE = 4; // readyState 4 means the request is done. var OK = 200; // status 200 is a successful return. if (xhr.readyState === DONE) { if (xhr.status === OK) { alert(xhr.responseText); // 'This is the returned text.' } else { alert('Error: ' + xhr.status); // An error occurred during the request. } } }; // Send the request to send-ajax-data.php xhr.send(null);  

---

jQuery

jquery 에서 구현하는 대표적인 3가지 방법

.get : HTTP GET 방식

jQuery.get( url [, data ] [, success ] [, dataType ] )

url Type: String A string containing the URL to which the request is sent.

data Type: PlainObject or String A plain object or string that is sent to the server with the request.

success Type: Function( PlainObject data, String textStatus, jqXHR jqXHR ) A callback function that is executed if the request succeeds. Required if dataType is provided, but you can use null or jQuery.noop as a placeholder.

dataType Type: String The type of data expected from the server. Default: Intelligent Guess (xml, json, script, or html).

$.get( "ajax/test.html", function( data ) { $( ".result" ).html( data ); alert( "Load was performed." ); });

.post : HTTP POST 방식

jQuery.post( url [, data ] [, success ] [, dataType ] )

url Type: String A string containing the URL to which the request is sent.

data Type: PlainObject or String A plain object or string that is sent to the server with the request.

success Type: Function( Object data, String textStatus, jqXHR jqXHR ) A callback function that is executed if the request succeeds. Required if dataType is provided, but can be null in that case.

dataType Type: String The type of data expected from the server. Default: Intelligent Guess (xml, json, script, text, html).

$.post( "ajax/test.html", function( data ) { $( ".result" ).html( data ); });

.ajax : 위 두 방식을 사용할 수 있는 통합적인 방식

.get	.post
$.ajax({ type: "GET", url: url, data: data, success: success, dataType: dataType });	$.ajax({ type: "POST", url: url, data: data, success: success, dataType: dataType });

---

AngularJS

-. 아직 AngularJS에 대한 이해가 없어 간략한 사용법만 언급해 놓았다.

var app = angular.module("someApp", []); app.controller("ctrl", ["$http", function($http){ $http.get('/send-ajax-data.php').success(function(data){ // do something with data }); }

Reference

---

https://en.wikipedia.org/wiki/Ajax_(programming)

https://api.jquery.com/jQuery.get/

https://api.jquery.com/jQuery.post/