AJAX Asynchronous Javascript And XML

AJAX : 브라우저에서 제공하는 Web API인 XMLHttpRequest 객체를 기반으로한 비동기 방식 데이터 통신 
필요한 데이터만 전송받아 갱신이 필요한 부분만 갱신한다. 이러한 과정이 비동기 방식으로 진행되기 때문에 
서버에 요청을 보내고 받는 동안 Blocking 현상이 발생하지 않아 클라이언트는 자유롭게 페이지를 이용할 수 있다.
 

 

XMLHttpRequest 객체 
ㅁproperties
 - readyStatus  : http 요청의 상태를 정수로 반환 
       unsent : 0
       opened : 1
       headers_received : 2
       loading : 3
       done : 4
 - status : 요청에 대한 응답 상태를 정수로 ex) 200 
 - statusText : 요청에 대한 응답 상태를 문자열로 ex)"OK"
 - responseType : 응답 타입 ex) document, json
 - response : 응답의 바디
 - onreadystatechange 
 - onerror
 - onload
 - open() :  요청 초기화
 - send() : 요청 전송
 - abort() : 이미 전송한 요청 중단
 
 
ㅁ요청 보내기 
1. 생성 
const xhr = new XMLHttpRequest();

const  xhr=new XMLHttpRequest();

2. 요청속성설정 open( requestMethod, 서버측 Controller URL[, async 비동기 요청 여부 default true] );

method=(method)? method:'GET';

method=(method!='GET' &&method!='POST')?'GET':method;

params=(params)?params:null;

url=(method=='GET'&&params!=null)?url+'?'+params:url;

 

++requestMethod
 - get(모든, 특정 데이터 read) 페이로드 없음
 - post(데이터 create) 페이로드 있음
 - put(데이터 전체 update) 페이로드 있음
 - delete(데이터 delete) 페이로드 없음 

xhr.open('GET','user_view?id='+idStr);

++(open() 이후 필요시 HTTP 요청 헤더 설정 ex) post)  
text : text/plain; text/html; text/css; text/javascript
application : application/json; application/x-www-form-urlencode
multiple : multiple/formed-data 

//필요한 경우 HTTP 요청 헤더 설정

// 클라이언트가 서버로 전송할 데이터의 MIME 타입 지정 : json

xhr.setRequestHeader('content-type', 'application/json');

3. 응답이 도착했을 때 실행되는 콜백함수등록(이벤트프로퍼티에 함수 등록)

xhr.onload=function (){

if(xhr.readyState==4){

/*데이터 응답이 완전히 이루어졌을때*/

let jsonText=xhr.responseText;

let jsonObject= JSON.parse(jsonStr);

 

let spanE=document.getElementById('msg');

spanE.innerHTML=msgjsonObject.msg;

if(jsonObject.status==1){

spanE.style.color='green';

}else{

spanE.style.color='red';

}

}else{

/*응답이 오는 중*/

document.getElementById('msg').innerHTML='<img src="loading.gif" width="15px" height="15px" />';

}

console.log('응답');

}

;

4. 요청 전송

xhr.send();

send(요청바디)

send("param=value&param2=value2"...)

xhr.send((method=='POST')?params:null);

 

 

 

 

 

JSON

 

클라이언트와 서버간 통신에 사용되는 데이터 포맷

{

       "key" : value,

       "key" : "strValue"

       "arrayKey" : [

                                 value,

                                 value,

                                 "strValue"

                            ],

        "objectKey" : {

                                 "key" : value,

                                 "key" : value

                              }                           

}

 

JSON.stringify(obj);

obj를 json 타입의 문자열로 반환한다. 

 

JSON.parse(obj);

obj를 json 타입의 문자열을 객체 타입으로 반환한다.

 

 

 

응답받은 데이터 사용하기 예

{

"status": 1,

"msg": "성공",

"data": [{

"title": "타이틀1",

"company": "회사1",

"date": "2023-11-15"

},{

"title": "타이틀2",

"company": "회사2",

"date": "2023-11-16"

}]

}

JSON 

let responseJsonStr = xhr.responseText; //응답받은 JSON 포맷의 String 텍스트 데이터

let responseJsonObject = JSON.parse(responseJsonStr); /* JSON 문자열 -- JSON Object로 파싱*/

let newsJsonArray = responseJsonObject.data; //Array 데이터 

let htmlTemplate=`<ul>`;

for(let i=0; i<newsJsonArray.length;i++){

let title = newsJsonArray[i].title;

let company = newsJsonArray[i].company;

let date = newsJsonArray[i].date;

htmlTemplate+=`<li>${title}[${company}-${date}]</li>`;

}

htmlTemplate+=`</ul>`;

 

@RestController

RestController 맵핑 예시

@Operation(summary = "newsList", description = "news전체를 조회")

@GetMapping(value="/map/news", produces = "application/json;charset=UTF-8")

public Map<String, Object> newsTitlesMapJson() {

int status=1;

String msg = "";

Object data=new ArrayList<>();

 

data=getNewsList();

 

Map<String,Object> resultMap = new HashMap<String,Object>();

resultMap.put("status", status);

resultMap.put("msg", msg);

resultMap.put("data", data);

 

return resultMap;

}

Controller에 @RestController 어노테이션이 없다면 

method에 @ResponseBody 어노테이션을 붙여준다. 

 

@Operation() 어노테이션은 swagger의 어노테이션으로 swagger에서 확인할 수 있는 mapping 의 설명을 붙여줄 수 있다. 

 

컨트롤러에 일정한 형식을 부여하기 위해 

int status=1;

String msg = "";

Object data=new ArrayList<>();

 

data=getNewsList();

 

Map<String,Object> resultMap = new HashMap<String,Object>();

resultMap.put("status", status);

resultMap.put("msg", msg);

resultMap.put("data", data);

 

return resultMap;

 

형식을 유지해준다. 

data에는 리스트 형식으로 하고 리스트의 사이즈가 0 혹은 1 이어도 상관없다. 

 

프론트에서 데이터를 받을 때는 

xhr.responseText

{

"status":1,

"msg":"",

"data":[

        ]

}

로 받는다. 

let responseJsonObject = JSON.parse(xhr.responseText);

responseJsonObject.status==1

 

@GetMapping(value="/map/news/{no}", produces = MediaType.APPLICATION_JSON_UTF8_VALUE)

public Map<String, Object> newsTitleMapJson(@PathVariable(name="no")int no) {

RestAPI 를 적용한 Mapping 

인자를 쿼리스트링이 아닌 path 변수로 받는다.