Ajax isn’t a technology. It’s really several technologies, each flourishing in its own right, coming together in powerful new ways.
Ajax: A New Approach to Web Applications, Jesse James Garrett, Feb 18, 2005
Ajax란 자바스크립트를 사용하여 브라우저가 서버에게 비동기 방식으로 데이터를 요청하고, 서버가 응답한 데이터를 수신하여 웹페이지를 동적으로 갱신하는 프로그래밍 방식을 말한다.
Ajax는 서버와 통신하기 위해 브라우저에서 제공하는 Web API인 XMLHttpRequest 객체를 사용한다.
모던 자바스크립트 Deep Dive, p.817, 그림 43-1 참조
이전의 웹페이지는 html 태그로 시작해서 html 태그로 끝나는 완전한 HTML을 서버로부터 전송받아 웹페이지 전체를 처음부터 다시 렌더링하는 방식으로 동작했다.
모던 자바스크립트 Deep Dive, p.818, 그림 43-2 참조
2.3.1 Ajax(Asynchronous JavaScript and Xml) - 2.3.1 Ajax 에서 관련 내용을 더 살펴볼 수 있다.
Ajax GET 요청 시, CORS 에러가 자주 발생한다.
개발 과정에서 CORS를 잠깐 끄고 싶을 때
Access-Control-Allow-Origin : “*” 추가한다./* Node.js */
var cors = require('cors');
app.use(cors());
JSON은 클라이언트와 서버 간의 HTTP 통신을 위한 텍스트 데이터 포맷이며, 언어 독립형 데이터 포맷이다.
JSON은 ES5 이전의 JavaScript 문법을 기초로 한다.
JSON은 자바스크립트의 객체 리터럴과 유사하게 키와 값으로 구성된 순수한 텍스트다.
{
"name" : "Hardy",
"sex" : "male",
"age" : 25,
"alive" : true,
}
JSON의 키는 반드시 큰따옴표(작은따옴표 사용 불가)로 묶어야 한다.
값은 객체 리터럴과 같은 표기법을 그대로 사용할 수 있다. 단, 문자열은 반드시 작은따옴표가 아닌 큰따옴표로 묶어야 한다는 것에 유의해야 한다.
JSON = null
or true or false
or JSONNumber
or JSONString
or JSONObject
or JSONArray
JSONNumber = - PositiveNumber
or PositiveNumber
PositiveNumber = DecimalNumber
or DecimalNumber . Digits
or DecimalNumber . Digits ExponentPart
or DecimalNumber ExponentPart
DecimalNumber = 0
or OneToNine Digits
ExponentPart = e Exponent
or E Exponent
Exponent = Digits
or + Digits
or - Digits
Digits = Digit
or Digits Digit
Digit = 0 through 9
OneToNine = 1 through 9
JSONString = ""
or " StringCharacters "
StringCharacters = StringCharacter
or StringCharacters StringCharacter
StringCharacter = any character
except " or \\ or U+0000 through U+001F
or EscapeSequence
EscapeSequence = \\" or \\/ or \\\\ or \\b or \\f or \\n or \\r or \\t
or \\u HexDigit HexDigit HexDigit HexDigit
HexDigit = 0 through 9
or A through F
or a through f
JSONObject = { }
or { Members }
Members = JSONString : JSON
or Members , JSONString : JSON
JSONArray = [ ]
or [ ArrayElements ]
ArrayElements = JSON
or ArrayElements , JSON
JSON.stringify 메서드는 객체(또는 배열)를 JSON 포맷의 문자열로 변환한다. 즉 값을 JSON 표기법으로 변환한다.
[JSON.stringify(value[, replacer[, space]])](<https://developer.mozilla.org/ko/docs/Web/JavaScript/Reference/Global_Objects/JSON/stringify#매개변수>)
JSON.stringify({}); // '{}'
JSON.stringify(true); // 'true'
JSON.stringify('foo'); // '"foo"'
JSON.stringify([1, 'false', false]); // '[1,"false",false]'
JSON.stringify({ x: 5 }); // '{"x":5}'
JSON.stringify(new Date(2006, 0, 2, 15, 4, 5))
// '"2006-01-02T15:04:05.000Z"'
JSON.stringify({ x: 5, y: 6 });
// '{"x":5,"y":6}' or '{"y":6,"x":5}'
JSON.stringify([new Number(1), new String('false'), new Boolean(false)]);
// '[1,"false",false]'
// Symbols:
JSON.stringify({ x: undefined, y: Object, z: Symbol('') });
// '{}'
JSON.stringify({ [Symbol('foo')]: 'foo' });
// '{}'
JSON.stringify({ [Symbol.for('foo')]: 'foo' }, [Symbol.for('foo')]);
// '{}'
JSON.stringify({ [Symbol.for('foo')]: 'foo' }, function(k, v) {
if (typeof k === 'symbol') {
return 'a symbol';
}
});
// '{}'
// Non-enumerable properties:
JSON.stringify( Object.create(null, { x: { value: 'x', enumerable: false }, y: { value: 'y', enumerable: true } }) );
// '{"y":"y"}'
JSON.parse 메서드는 JSON 포맷의 문자열을 객체(또는 배열)로 변환한다.
[JSON.parse(text[, reviver])](<https://developer.mozilla.org/ko/docs/Web/JavaScript/Reference/Global_Objects/JSON/parse#매개변수>)
JSON.parse('{}'); // {}
JSON.parse('true'); // true
JSON.parse('"foo"'); // "foo"
JSON.parse('[1, 5, "false"]'); // [1, 5, "false"]
JSON.parse('null'); // null
JSON.parse는 작은따옴표와 trailing commas를 허용하지 않는다는 것에 주의해야 한다.
객체 안에서의 trailing commas는 ECMAScript 5에 와서야 추가되었다.
[JS] Trailing Commas에 대한 고찰 (feat.ESLint)
브라우저는 주소창이나 HTML의 form 태그 또는 a 태그를 통해 HTTP 요청 전송 기능을 기본 제공한다.
만약 자바스크립트를 사용하여 HTTP 요청을 전송하려면 XMLHttpRequest 객체를 사용한다.
XMLHttpRequest 객체는 HTTP 요청 전송과 HTTP 응답 수신을 위한 다양한 메서드와 프로퍼티를 제공 하는 Web API이므로, 브라우저 환경에서만 정상적으로 실행된다.