[21.09.29] Ajax 비동기방식

yed·2021년 9월 29일
web
0

클라이언트-서버에서 서버는 클라이언트의 요청을 처리 후 응답을 클라이언트에게 전송하고 클라이언트는 서버의 응답이 올때까지 대기하다가 응답이 오고나서 화면을 업데이트한다

비동기 방식은 서버의 응답이 오기전에도 독립적으로 웹브라우저의 다른 기능을 이용할 수 있고 응답이 오면 화면전체가 새로고침되는게 아니라 브라우저의 일부분만 업데이트가 된다

Ajax는 이러한 비동기방식을 사용한다

Ajax로 데이터를 전송할 땐 주로 json을 사용한다.
form방식으로 데이터를 전송하면 제약조건이 많은데 파라미터 방식으로만 전송가능하고 request객체가 있어야만 사용할 수 있기 때문이다.

JSON(JavaScript Object Notation)

  • 데이터 전송을 위한 표준 데이터 포맷
  • 데이터를 저장하고 교환하기 위한 문법
  • JSON은 텍스트. 자바스크립트 객체 표기방식과 형식이 유사하다
  • 자바스크립트 객체를 JSON으로 변환할 수 있고 JSON을 서버로 전송할 수 있음
  • 서버에서 받아온 JSON을 자바스크립트 객체로 변화날 수 있음
  • 기본적으로 자바스크립트 객체 문법과 비슷

JSON을 사용하는 이유

  • 자바스크립트 객체 표기법의 표준
  • 경량 데이터 교환 형태
  • 이해하기 쉬움
  • 언어 독립적(JSON은 텍스트라서 모든 언어에서 읽을 수 있음)

파라미터같은 방식은 데이터를 여러개 묶어서(ex.list) 전송할 시 형태를 유지하기 위해 시간과 자원이 필요
JSON은 모두 텍스트로 변환되어 전송되기 때문에 메모리를 덜 잡아먹고 전송속도가 빠름

JSON 데이터 타입

  • 문자열
  • 숫자
  • JSON 객체
  • 배열
  • 논리형
  • null
//문자열
var str={"name":"kim"};
//숫자
var num={"age":20};
//객체
var obj={
  "employee":{"name":"kim", "age":20, "city":"인천"}
};

json 데이터의 타입은 object로 인식됨. json이라는 데이터타입이 있는게 아니라 문자열인데 json의 형태를 가지고 있는것이기 때문
json은 전송과정에서는 텍스트로 왔다갔다하는데 전송이 끝나고 데이터를 사용하기 위해서는 원래의 타입으로 변경해야한다.
주로 ajax로 데이터를 통신할 경우 사용함

JSON.parse()

텍스트인 json을 javascript객체로 변환함

웹서버에서 클라이언트로 데이터를 전송받은 경우 JSON 데이터는 텍스트다.
예를 들어 텍스트 데이터를 받았다고 가정하고 파싱해보자

var txt='{"name":"kim","age":20,"city":"인천","birth":"2002-01-12"}';
var obj=JSON.parse(txt);
  	
obj.birth=new Date(obj.birth); //문자열->Date
  	
document.getElementById("output").innerHTML+=obj.name+","+obj.birth;

date는 parse()로 변환이 불가능해서 따로 변환해주어야한다

JSON.stringify()

자바스크립트 객체를 문자열(JSON 객체)로 변환하는 메소드.
자바스크립트 배열도 JSON 문자열로 변경할 수 있다.

Ajax(Asynchronous JavaScript and XML)

자바스크립트에서 서버와 소통하기 위해 사용하는 비동기방식

XML(Extensible Markup Language)

태그형식의 정보목적으로 정보를 저장할 때 xml을 사용함

Ajax를 사용하는 이유

  • 웹페이지가 로드된 후 특정 상황에서만 서버에서 데이터를 불러오기 위해
  • 새로고침 없이 페이지를 업데이트하기 위해
  • 백그라운드에서 웹서버에 데이터를 전송하기 위해

XMLHttpRequest

브라우저 내장 request 객체

  • open(method, url, async) : 요청 타입을 지정하고 보낼 정보 세팅

    method : 요청 타입 GET/POST
    url : 파일 또는 요청 서버 위치
    async : true(비동기) or false(동기)

  • send() : GET 방식으로 요청을 서버로 전송
  • send(string) : POST 방식으로 요청을 서버로 전송
  • setRequestHeader(header, value) : 요청에 HTTP 헤더를 덧붙임

onreadystatechange

요청 후 readyState 속성이 변경되면 호출되는 함수

  • readyState : XMLHttpRequest의 상태

    0: request not initialized
    1: server connection established
    2: request received
    3: processiong request
    4: request finished and response is ready

ajax를 쓰기 가장 좋은 readyState는 4번.
a-b가 연결이 되어있고 요청과 응답이 한번에 연결되어
응답할 준비가 되어있고 바로 반응만 해주면 되는 상황.

  • status : HTML 메시지 코드

    200: “OK”
    403: “Forbidden”
    404: “Page not found”

responseText

응답 데이터를 문자열로 변환

<사용해보기>

  1. resultGet.jsp에서 데이터를 get방식으로 date.jsp로 전송
  2. date.jsp에서 응답하고
  3. 응답한 데이터를 resultGet.jsp에서 출력

<resultGet.jsp>

var xhttp=new XMLHttpRequest();
xhttp.onreadystatechange = function() {
	if(this.readyState==4 && this.status==200){
		document.getElementById("output").innerHTML=this.responseText;
	}  
};
xhttp.open("GET","date.jsp?method=get&content=Hello",true);
xhttp.send();

Post방식은 데이터를 다른사람이 못보게끔 막아놓아서 응답데이터를 보려면 Content-type에 urlencoded가 필요함.
setRequestHeader()로 헤더 정보 추가해주기

xhttp.open("POST","date.jsp",true);
xhttp.setRequestHeader("Content-type", "application/x-www-form-urlencoded");
xhttp.send("method=post&content=Hello");

<date.jsp>

<%@page import="java.util.Date"%>
<%@ page language="java" contentType="text/html; charset=UTF-8"
    pageEncoding="UTF-8"%>
<%! Date date=new Date();%>
<!-- 응답데이터 -->
<p>오늘 날짜:<%=date.toString() %></p>
<p>${param.method }</p>
<p>${param.content }</p>

보통 ajax의 역할은 date.jsp처럼 jsp자체를 불러오는게 아니라 서버에서 데이터만 가져오는 경우가 대다수임

jQuery Ajax

  • jQuery는 Ajax의 다양한 기능을 사용할 수 있음
  • jQuery Ajax 메소드를 사용하면 서버에서 텍스트, HTML, XML 또는 JSON 요청이 가능하다
  • $(selector).load(URL, data, callback);
    URL : 파일 또는 통신 경로
    data : 보낼 데이터. 생략가능
    callback : load가 수행되고 해야하는 기능 정의

callback은 자바스크립트의if(this.readyState==4 && this.status==200){}와 동일한 동작

$('#output').load("test.txt #p1"); 
//공백으로 url 속 태그 지칭

$.ajax()

ajax load 메소드를 key-value형태로 간략화한 메소드

기본 형태

$.ajax({name1:value1, name2:value2, ...});

  • name으로 선택할 수 있는 요소

    type : GET or POST
    url : 경로
    data : 보낼 데이터 패키지
    success : 호출 성공 시 리턴될 내용

$.ajax({
    type:"get",
    url:"../ajax_test.do",
    data:{
    	id:"test", //request parameter를 id와 pw로 지정
     	pw:"1234"
    },
    success:function(result){
	//ajax_test.do에서 작성된 내용을 리턴해서 저장한 결과
	$('#output').html(result); //result 내용을 output에 적용
}

success : function(result){}에 리턴될 데이터

PrintWriter out=response.getWriter();
out.append("id : "+id+"<br>");
out.append("pw : "+pw);

$.get(url, callback);

HTTP Get request를 페이지에 보내고 그 결과를 가져옴

$.get("04_get_test.jsp", function(data, status){
	alert("Data : "+data+"\n status : "+status);
});

$.post(URL, data, callback);

$.post(
	"05_post_test.jsp",
	{
		name : "mok",
		city : "인천"
	}, 
	function(data, status){
		alert("Data : "+data+"\n status : "+status);
});

자바스크립트 객체형식으로 데이터를 전송해봤기 때문에 request.getParameter로 데이터를 사용해봤음

복잡한 데이터는 json형태로 사용하는게 좋다!

json

{
	"name":"kim",
	"age":20,
	"pets":[
		{"animal":"dog", "name":"choco"},
		{"animal":"cat", "name":"navi"}
	]
}

object안에 배열안에 object

ajax

$.ajax({
	type:"get",
	url:"06_json_test.txt",
	success:function(result){
		var data=JSON.parse(result);
		console.log(data);

		document.getElementById('output').innerHTML+="이름 : "+data.name+"<br>";
		document.getElementById('output').innerHTML+="나이 : "+data.age+"<br>";
		for(var i=0;i<data.pets.length;i++){
			document.getElementById('output').innerHTML+="펫 : "+data.pets[i].animal;
			document.getElementById('output').innerHTML+=", 이름 : "+data.pets[i].name+"<br>";
		}
	}
}); //end ajax

$('#output').html()로 해도된담
for-in문 써도된담

profile
yed
6개월 국비과정 기록하기
이전 포스트

[sql응용] trigger

다음 포스트

[21.09.30] json 파싱

0개의 댓글

관련 채용 정보