웹캠프8일차: JS Browser BOM + JS AJAX (2)

(맨 아래에 질문/해답 있음)

AJAX = Asynchronous JavaScript And XML.

AJAX just uses a combination of:

• A browser built-in XMLHttpRequest object (to request data from a web server)
• JavaScript and HTML DOM (to display or use the data)

참고: AJAX는 실제로 항상 XML을 사용하여 데이터를 전송하는 것은 아니다. 이름이 그렇다 할 뿐이지 실제로는 plain txt 파일이나, JSON파일로 전송하는 경우들이 있다.

중요한 점은 AJAX는 비동기식(asynchronously)으로 웹서버와 데이터를 주고받을(Exchange of data) 수 있다는 점이 획기적인 기능이다. 이 기능을 통해서 웹 페이지를 새로고침을 하지 않고도 웹 페이지의 부분만을 새로고칠 수 있다.

 

AJAX작동 방식: 이 정도는 기본으로 숙지할것 (모든 내용이 순차적으로 일어남)

AJAX의 핵심은 바로 XMLHttpRequest object.인데요, 이 객체가 바로 서버와 데이터를 교환하는 역할을 수행합니다.

모든 최신 브라우저(Crome, Firefox, IE7+, Edge, Safari, Opera)에는 XMLHtpRequest 개체가 내장되어 있습니다.

생성법:

보안 문제로, 최신 브라우저들은 여러 도메인 간의 접근을 막고 있는데요, 그래서 웹페이지에서 접근하고자 하는 XML파일은 사용하고 있는 해당 브라우저 서버와 같은 위치에 있어야 합니다.

 

최신 브라우저는 XMLHttpRequest Object 대신 Fetch API를 사용할 수도 있습니다. Fetch API 인터페이스를 통해 웹 브라우저는 웹 서버에 HTTP 요청을 할 수 있는데, 대신 XMLHttpRequest Object를 사용하는 경우 Fetch를 더 간단한 방법으로 동일한 작업을 수행할 수 있습니다.

 

아래 두 이미지는 꼭 중요한 내용이니 숙지하시기 바랍니다.

(추가로, 아래 내용은 네트워크 수업을 들었으면 더 이해하시기 쉬울겁니다. HTTP 헤더 내용이 조금 들어가 있네요)

첫번째로 XHTTP객체가 생성되었으면, 이 객체로 XmlHttpRequest를 서버에게 보내게 됩니다. 이러기 위해선, XMLHttpRequest 객체의 open(), send() 함수를 사용하게 됩니다.

아래 사진에서 보시는 바와 같이, 맨 처음에 open()함수를 통해 서버에게 어떤 request를 보내는것인지 그것에 대한 정보를 전달하게 됩니다.

그리고 send()함수로 Get, Post 방식에 따라 적절하게 함수를 호출합니다.

*** open()에서 3번째 파라미터는 async를 정하는데 사용됩니다. 주로 async:true; 값을 사용하여 비동기식으로 진행합니다.

데이터 교환에 있어, GET 방식이 POST방식 보다 빠르지만, POST방식을 따를 것을 권장합니다.

 

다음과 같은 경우 항상 POST 요청을 사용해야합니다.:

• 캐시된 파일은 선택사항이 아닐때(즉, 서버의 파일 또는 데이터베이스를 꼭 업데이트해야할 때).
• 서버에 대량의 데이터를 보내야 할때. (POST방식에는 크기 제한이 없다.)
• 사용자 입력(알 수 없는 문자를 포함할 수 있음)을 전송할때 POST가 GET 보다 강력하고 안전한 방법이다. (데이터 유실을 막음)

AJAX를 이용하여 서버에게 request를 보낼 수 있고, 이에 대한 response를 받아서 원하는 작업을 수행할 수 있다.

 

www.w3schools.com/js/tryit.asp?filename=tryjs_ajax_app

Tryit Editor v3.6

**추가로 왜 노드[0]인지 알아볼것

 

해답) 

비동기식으로 사용하게 되면 코드가 쓰레드로 인해서 코드를 순차적으로 실행하는게 아니라 

xmlhttp.send(); 밑의 코드를 실행하려고 할 것이다. 이게 문제가 되서 코드가 에러로 인해 작동이 안될텐데, 그래서 순차적으로 밑의 코드가 실행이 되도록 false로 설정하는 것이다.

그럼, open()을 하고 xhr.readyState상태를 0~4까지 실행을 완료한 뒤에 서버로 send()를 하게 될 것이다. 

비동기 여부는 true이면 비동기적으로, false면 동기적으로 호출을 하여, response가 올때까지 xhr.send()에서 브라우저는 대기하고 있을 것이다.

출처: https://unikys.tistory.com/232 [All-round programmer]