반응형
01. AJAX - Request 보내기
AJAX
- 브라우저에서 페이지를 이동하지 않고 자바스크립트를 통해 HTTP Request를 보내고 받아 JS에서 처리할 수 있음
- 사용자에게 더 나은 사용 경험 제공, 대부분의 웹사이트에서 사용되고 있는 기술
1. AJAX를 위한 객체 생성
var req = new XMLHttpRequest(); // HTTP 요청을 만들 수 있는 새로운 객체를 생성하는 명령
2. 요청의 방식과 URL 설정
req.open("GET", "./data.txt"); // http request method와 URL 설정
3. 요청 전송
req.send();
4. 응답 확인
- req.response에 저장됨
- 비동기 방식으로 요청하기 때문에 send 메소드 호출 후, 바로 코드에서 접근하면 데이터가 비어 있음
- AJAX의 진행에 따라 호출되는 callback함수를 활용해야 함.
브라우저 옵션
--disable-web-security 옵션
브라우저의 보안 정책을 우회하기 위해 사용하는 옵션
same-origin-policy등을 비활성화 함
02. AJAX - Response 받아서 처리하기
readyState 속성
- AJAX 요청에 따라 0~4까지 변화함
readyState 의미
| 0 | open 메소드 호출 전 |
| 1 | open 메소드 호출 후, send 메소드 호출 전 |
| 2 | 보낸 요청에 대해 응답 헤더가 수신된 후 |
| 3 | 응답의 바디 부분이 수신중일 때 |
| 4 | 모든 응답이 수신되었을 때 |
onreadystatechange 속성
readyState가 변할 때마다 호출되는 콜백 함수
status 속성
HTTP response의 응답 헤더에 기록된 코드
Response Code의미
| 200 | OK |
| 404 | Not Found |
| 500 | Internal Error |
| ... | ... |
응답을 정상적으로 수신한 경우
- readyState : 4
- status : 200
기타 callback function 활용 가능한 속성
- onloadstart
- onprogress
- onabort
- onerror
- onload
- ontimeout
- onloadend
<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8">
<script>
var req= new XMLHttpRequest();
req.onreadystatechange = function a(){
console.log(this.readyState,this.status);
if(this.readyState == 4 && this.status == 200){
console.log(this.response);
}
}
req.open("GET","http://google.com"); //200
req.open("GET","http://google.com/wrong/url"); //404
req.open("GET","./data.txt"); //0
req.send();
</script>
</head>
<body>
AJAX
</body>
</html>
03. JSON
JSON : Javascript Object Notification
- 자바스크립트의 객체를 문자열로 표현하는 방법
- 프로그램간에 전달하기 편리 (서버 -> 브라우저)
JSON API
- JSON.stringify( object )
- 인자로 받은 객체를 JSON 문자열로 반환함
- JSON.parse( sring )
- 인자로 받은 문자열을 Javascript Object로 변경해 반환함
var original_obj = { pi:3.14, str:"string" }; var json_str = JSON.stringify( original_obj ); // 반환 문자열 : {"pi":3.14,"str":"string"} var parsed_obj = JSON.parse( json_str ); console.log( original_obj ); // {pi: 3.14, str: "string"} console.log( parsed_obj ); // {pi: 3.14, str: "string"}
var original_obj = {
pi: 3.14,
str: "string"
};
var json_str = JSON.stringify( original_obj ); // {"pi": 3.14, "str": "string"}
var parsed_obj = JSON.parse( json_str );
console.log( original_obj ); // {pi: 3.14, str: "string"}
console.log( parsed_obj ); // {pi: 3.14, str: "string"}- undefined, function 은 변환되지 않음에 주의!
04. AJAX + JSON
- AJAX를 통해 JSON 데이터를 받아옴
var req = new XMLHttpRequest();
req.onreadystatechange = function(){
if( this.readyState == 4 ){
// ...
}
}
req.open("GET", JSON_DATA_URL);
req.send();
- JSON.parse API를 이용해 받아온 JSON 문자열 데이터를 Javascript 객체로 변환
req.onreadystatechange = function(){
if( this.readyState == 4 ){
data = JSON.parse(this.response);
//...
}
}
- 데이터를 처리하는 Javascript 프로그램 실행 (HTML 문서에 반영)
- 데이터가 여러개인 경우 (배열 형태로 값을 받은 경우) 반복문으로 각각의 데이터에 대해 처리
for(let i = 0; i < data.length; i++){
document.write(data[i].id, data[i].msg);
}
<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8">
<title>AJAX + JSON</title>
<style>
.character {color:black}
.word {color: gray;}
</style>
<script>
var req= new XMLHttpRequest();
req.onreadystatechange = function a(){
console.log(this.readyState,this.status);
if(this.readyState == 4){
console.log(this.response);
var data = JSON.parse(this.response);
//배열 형태이므로 포문을 이용해서 html 문서에 추가(.cloneNode(true)를 주면 자식 엘리먼트까지 모두 복사하게 됨).
for(var i in data){
var t = document.getElementById("template").cloneNode(true);
t.removeAttribute("id"); //template id를 삭제. ajax가 안 되니까 왜 지우는지 모르겠다. 확인하기~~~!!!!!
t.children[0].innerText = data[i].id;
t.children[1].innerText = data[i].msg;
document.body.appendChild(t);
}
}
}
req.open("GET","./data.txt");
req.send();
</script>
</head>
<body>
<p id="template">
<span class="character">주인공</span> : <span class="word">명대사</span>
</p>
</body>
</html>
아래 강의를 수강하며 개인적으로 공부하며 정리한 글입니다.
https://programmers.co.kr/learn/courses/10#curriculum
자바스크립트와 웹 프론트엔드 | 프로그래머스
## 자바스크립트와 웹 프론트엔드 관련 키워드: JavaScriptHTMLCSS웹프론트엔드입문 * [Hello, JavaScript!](https://programmers.co.kr/learn/courses/3)에서 배운 자바스크립트를 활용해서 웹 프론트엔드 기능을 다뤄보는 강의! 도서와 함께 들으면 참 좋은 강의 이 강의는 길벗출판사의 'Try! Helloworld 자바스크립트' 도서와 연계하여 제작되었습니다. 여기를 눌러 책 정보를
programmers.co.kr
반응형
'Programming > JavaScript' 카테고리의 다른 글
| [Node.js] Node.js로 서버 구축하기 (0) | 2019.12.22 |
|---|---|
| AJAX란 (0) | 2019.12.21 |
| [JavaScript] 자바스크립트와 웹 프론트엔드 파트3. Event (0) | 2019.12.18 |
| [JavaScript] 자바스크립트와 웹 프론트엔드 파트2. DOM (0) | 2019.12.18 |
| [JavaScript] 자바스크립트와 웹 프론트엔드 파트1. Javascript와 web (0) | 2019.12.17 |
댓글