[JavaScript] Ajax

 

모던 자바스크립트 Deep Dive를 참고하여 학습,작성하였습니다.

---

1.AJAX(Asynchronous JavaScript and XML)

자바스크립트로 비동기적으로 서버와 브라우저가 데이터를 교환할 수 있는 통신 방식

 

 

 

 

 

 

2.JSON (JavaScript Object Notation)

효과적인 데이터 구조화가 가능한 데이터 포맷
순수한 텍스트로 구성된 규칙이 있는 데이터 구조

{
    "name":"Park",
    "gender":"male",
    "age":10
}

 

 

 

2-1.stringify

객체를 JSON 형식의 문자열로 변환

<script>
    const json1={
        "name":"Park",
        "gender":"male",
        "age":10
    }


    const strObj= JSON.stringify(json1);
    document.write(strObj)
</script>

 

 

 

 

2-2.parse

JSON 데이터를 가진 문자열을 객체로 변환

<script>
    const o={
        "name":"Park",
        "gender":"male",
        "age":10
    }


    const strObj= JSON.stringify(o);
    document.write(strObj+"<br>")


    const o2= JSON.parse(strObj)
    document.write(o2.name+"<br>")
    document.write(o2.gender+"<br>")
    document.write(o2.age+"<br>")
</script>

 

 

 

 

3.XMLHttpRequest

XMLHttpRequest 객체를 이용하여 Ajax 요청을 생성하고 전송

const xhr = new XMLHttpRequest();

 

 

 

 

3-1.open

XMLHttpRequest.open(method, url[, async]) 방식으로 사용한다.

xhr.open('GET', '/users');

 

 

 

3-2.send

준비된 요청을 서버에 전달
GET: 쿼리문자열로 데이터를 전달
POST:데이터를 Request Body에 담아 전송

xhr.send( request body);

 

 

 

3-3.setRequestHeader

HTTP Request Header의 값을 설정

 

 

 

 

 

 

 

---

🎈참고자료

https://poiemaweb.com/js-ajax