AJAX,JSON 개념메모

peanut0613 2021. 8. 14. 11:38

2021. 8. 14. 11:38

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-파일-내용-읽기

헤더추가 https://thiago6.tistory.com/11

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 이 포함되는 문자열

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

https://grip.news/archives/1397

https://galid1.tistory.com/398

'<개념> > 기타' 카테고리의 다른 글

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

DARAM BLOG

AJAX,JSON 개념메모

'<개념> > 기타' 카테고리의 다른 글

+ Recent posts

티스토리툴바