AJAX,JSON 개념메모
AJAX
- 자바스크립트의 라이브러리중 하나
- 브라우저가 가지고있는 XMLHttpRequest 객체를 이용해서 전체 페이지를 새로 고치지 않고도 페이지의 일부만을 위한 데이터를 로드하는 기법 이며 JavaScript를 사용한 비동기 통신, 클라이언트와 서버간에 XML 데이터를 주고받는 기술이다. (https://velog.io/@surim014/AJAX란-무엇인가)
- 단순히 웹화면에서 무언갈 부르거나 데이터를 조회하고 싶을때 페이지전체를 새로고침하지않기위해 사용한다.
- 기본적으로 HTTP 프로토콜은 클라이언트쪽에서 Request를 보내고 서버쪽에서 Response를 받으면 이어졌던 연결이 끊기게 되어있다. 그래서 화면의 내용을 갱신하기 위해서는 다시 request를 하고 response를 하며 페이지 전체를 갱신하게 된다. 하지만 이렇게 할 경우, 엄청난 자원낭비와 시간낭비를 초래 → ajax를 사용
- 서버에서 데이터를 http get, post, json 의 모든방식으로 전송한후 서버측 응답을 받으럐때 사용, http get방식으로 전송한후 서버측 응답을 json형식으로 받을떄는 $get.JSON 을 사용한다.
var serverAddress = 'https://hacker-news.firebaseio.com/v0/topstories.json';
// jQuery의 .get 메소드 사용
$.ajax({
url: ,
type: 'GET',
success: function onData (data) {
console.log(data);
},
error: function onError (error) {
console.error(error);
}
});<script>
$(document).ready(function() {
jQuery.ajax({
type:"GET",
url:"/test",
dataType:"JSON", // 옵션이므로 JSON으로 받을게 아니면 안써도 됨
success : function(data) {
// 통신이 성공적으로 이루어졌을 때 이 함수를 타게 된다.
// TODO
},
complete : function(data) {
// 통신이 실패했어도 완료가 되었을 때 이 함수를 타게 된다.
// TODO
},
error : function(xhr, status, error) {
alert("에러발생");
}
});
});
</script>
출처: https://marobiana.tistory.com/77 [Take Action]<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN"
"http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<html xmlns="http://www.w3.org/1999/xhtml" lang="ko" xml:lang="ko">
<meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
<head>
<script src="./js/jquery-1.11.3.min.js"></script>
<script type="text/javascript">
$(document).ready(function() {
$("#btn1").click(function() {
$.ajax({
type:"post",
url:"./list.json",
dataType:"text",
success:function(data) {
$.each(JSON.parse(data), function(index, entry) {
console.log("menu : " + entry["menu"] + ", page " + entry["page"]);
$("#" + entry["menu"]).html( entry["menu"] + ", page " + entry["page"]);
});
}});
});
});
</script>
</head>
<body>
<div id="human"></div>
<div id="animal"></div>
<div id="fruit"></div>
<button id="btn1">button</button>
</body>
</html>
출처: https://leojin.tistory.com/entry/Ajax-로-json-파일-내용-읽기
header:{"Content-Type":"application/json"}
ajax로 서버에 데이터를 보낼때 header 중 content-type이 존재하는데 이를 설정하지않으면 디폴트값으로 application/x-www-form-urlencoded; charset=UTF-8 타입으로 지정됨.
그래서 json형태의 데이터를 주고싶을떄는 위의 헤더를 지정해주어야함.
문제 → request안에 포함된 json형태의 데이터를 받았을때 보통 vo,dto에서 담아 다시 사용하는데, ajax는 데이터를 문자열화해주지않아서 보낼 데이터를 json.stringfy()로 감싸주어야함
그렇지않을경우 json데이터를 인식을 못함
- processData : false https://okayoon.tistory.com/entry/ajax-이슈-파라미터-값이-안-보내져요-processData
기본값은 true, 기본적을 key,value 값을 쿼리 스트링을 변환해서 보내줌. 이게 False 로 지정되어있으면 쿼리 String으로 설정하지않음 , 이것은 파일 전송시에 사용한다고함
- cors 에러 : 외부자료를 가져올때 발생함
- corssDomain:true https://m.blog.naver.com/PostView.naver?isHttpsRedirect=true&blogId=hongjae83&logNo=150145549779
전제조건 : 내가보고있는 페이지에서 다른페이지의 rest api를 호출해서 데이터를 json으로 가져오려고함. 내가 이용하는 페이지주소랑 데이터를 가지고 오기위한 서버 도메인이 서로 다를경우 crossdomain이라고 부름.
- formData
비동기 업로드를 위해 ajax formData를 사용함. 평소엔 안쓰임 , 이미지를 ajax로 업로드할때 필요함.
- *** 비동기?
- 비동기 처리 ? 특정 코드의 연산이 끝날떄까지 코드의 실행을 멈추지않고 다음코드를 먼저 실행하는 자바스크립트의 특성을 의미함. → 제이쿼리의 ajax를 많이씀.
-
콜백함수로 비동기처리 방식의 문제점 해결하기function getData() { var tableData; $.get('https://domain.com/products/1', function(response) { tableData = response; }); return tableData; } console.log(getData()); // undefined // get 부분이 ajax로 통신을 하는 부분임. http~ 에 get 요처응ㄹ 날려서 product정보를 요청함. // 한마디로 쉽게 말하면 지정된 url에 데이터를 하나 보내주세요 라는 요청을 날리는것과 같음. // http 서버에서 받아온 데이터를 respose 인자에 담김 // getdata는 뭐임?? undefined 왜? 왜냐 이전에 미리 return 해줘서 그럼. 기다려주지않고 바로 리턴해버려서 undefined를 출력하게됨. // 이런식으로 특정로직의 실행이 끝날떄까지 기다려주지않고 나머지 코드를 먼저 실행해버리는게 비동기처리라는것임 -
function getData(callbackFunc) { $.get('https://domain.com/products/1', function(response) { callbackFunc(response); // 서버에서 받은 데이터 response를 callbackFunc() 함수에 넘겨줌 }); } getData(function(tableData) { console.log(tableData); // $.get()의 response 값이 tableData에 전달됨 });
중요 : ajax formData 사용시에 contentTYpe, processData 옵션을 false로 설정해야함 !!!
사용법은 두가지가있음
(1) form 에 작성된 전체데이터 보내기 (2) form 에 작성된것 중 필요한것만 선택해서 보내기
//후자 (2) 방법
var formData = new formData();
formData.append([key],[value]);
//append는 전체데이터중에 필요한것만 선택해서 보낼때를 의미함. 더해준다는 의미가 아님.
formData.append('username', 'Chris'); //이런식으로 쓰인다~
<form id="myForm" name="myForm">
<div>
<label for="username">Enter name:</label>
<input type="text" id="username" name="username">
</div>
<div>
<label for="useracc">Enter account number:</label>
<input type="text" id="useracc" name="useracc">
</div>
<div>
<label for="userfile">Upload file:</label>
<input type="file" id="userfile" name="userfile">
</div>
<input type="submit" value="Submit!">
</form>
/////////////////////////////////////////////////////////////////////////////
let myForm = document.getElementById('myForm');
let formData = new FormData(myForm);- document.getElementById
id 로 요소를 찾고 이를 나타내는 elements 객체를 반환
- param(obj)
폼 요소들의 값을 변환해서 직렬화한 문자열로 표현함.
- datatype
내가보는 데이터타입 아님, 서버가 응답(response)할떄 보내줄 데이터타입임. 이는 success function에 전달될 argument의 형태를 지정하는데 사용된다고 한다
→ 한마디로 서버측에서 전송받은 데이터의 형식
- processData
일반적으로 서버에 전달되는 데이터는 query string이라는 형태로 전달된다. data 파라미터로 전달된 데이터를 내부적으로 query string으로 만드는데 파일전송의 경우 이렇게 하면안된다.
-기본값은 true
-해당값이 true →> data 값들이 쿼리 스트링 형태인 Key=value & key2=value2 형태로 전달이된다. 하지만 리헌식으로 진행하면 file값들이 제대로 전달되지않음
-해당값이 false → { key1 : 'value1', key2 : 'value2' } 형태로 전달
- contentType
디폴트값은 "application/x-www-form-urlencoded; charset=UTF-8" 인데 , multipart/form-data로 전송이 되게 false로 넣어줌.
- data
http 요청후 return하는 값임
- url
요청이 전송되는 url 이 포함되는 문자열
- type
http 요청방식 (Get/Post)
- async
요청시 동기유무를 선택할수 있다 ( true/False)
- stringfy / parse 정리 https://rwd337.tistory.com/172 참조
.ajax 에서 string으로 보내서 전송하고,
success 후에는 돌려받은걸 다시 json파일로 변환해서 출력한다
- enctype1. application/www-form-urlencoded2. multipart/form-data3. text/plain출처: https://dydals5678.tistory.com/113
- 이 형식은 인코딩을 하지 않은 문자 상태로 전송한다.
- 파일이나 이미지를 서버로 전송할 경우 이 방식을 사용한다. 그렇게 하지 않으면 웹 서버로 데이터를 넘길때 파일의 경로명만 전송되고 파일 내용이 전송되지 않기 때문이다. 그리고 이떄 메소드는 post값으로 지정해줘야 한다 (핵중요)
- 디폴트값이다. enctype을 따로 설정하지 않으면 이 값이 설정된다. 폼데이터는 서버로 전송되기 전에 URL-Encode 된다.
- enctype 은 다음 3가지값을 지정가능
JSON 메모
- JSON.stringify(value)
→ 인수로 전달받은 자바스크립트 객체를 문자열로 변환해서 반환해줌
예제1
<html>
<body>
<p id="json"></p>
<script>
var dog = {name: "식빵", family: "웰시코기", age: 1, weight: 2.14}; // 자바스크립트 객체
var data = JSON.stringify(dog); // 자바스크립트 객체를 문자열로 변환함.
document.getElementById("json").innerHTML = data; // json 데이터 불러옴
</script>
</body>
</html>
//output : {"name":"식빵","family":"웰시코기","age":1,"weight":2.14}ㅁ예제2
var obj = { name: "John", age: 30, city: "New York" };
var myJSON = JSON.stringify(obj);
document.getElementById("demo").innerHTML = myJSON;
//결과값 {"name":"John","age":30,"city":"New York"}- JSON.parse(text)
→인수로 전달받은 문자열을 자바스크립트 객체로 변환해서 반환해줌
<html>
<head>
<title>parse</title>
</head>
<body>
<p id="json"></p>
<script>
// JSON 형식의 문자열
var data = '{"name": "식빵", "family": "웰시코기", "age": 1, "weight": 2.14}';
var dog = JSON.parse(data); // JSON 형식의 문자열을 자바스크립트 객체로 변환함.
document.getElementById("json").innerHTML = dog + "<br>";
document.getElementById("json").innerHTML += dog.name + ", " + dog.family;
</script>
</body>
</html>
//결과
[object Object]
식빵, 웰시코기const json = '{"result":true, "count":42}';
const obj = JSON.parse(json);
console.log(obj.result);
// expected output: true- toJSON()
→ 자바스크립트의 Date 객체를 Json 형식의 문자열로 반환해서 변환
예제1
추가 참조 : https://m.blog.naver.com/PostView.naver?isHttpsRedirect=true&blogId=mk1126sj&logNo=221016837263
https://developer.mozilla.org/en-US/docs/Web/API/FormData/FormData
'<개념> > 기타' 카테고리의 다른 글
| SHIFT 개념 이해하기 예제 with SIN/COS/TAN (0) | 2021.12.30 |
|---|---|
| 자주나오는 이산수학관련 내용 (0) | 2021.11.28 |
| RestfulAPI 개념정리 (0) | 2021.08.14 |
| 도커 초간단 개념정리 (0) | 2021.05.09 |
| String 텍스트 유사도 알고리즘3가지 (LCS / 레벤슈타인 / n-gram) (0) | 2021.03.09 |
