AJAX 비동기 처리
DNS(Domain Name System)는 범국제적 단위로 웹사이트의 IP 주소와 도메인 주소를 이어주는 환경/시스템
웹사이트의 데이터가 저장되어 있는 호스팅 서버는 인터넷 회선이 연결된 컴퓨터/장치인지라 IP 주소가 할당되어 있고 이 주소가 실제 웹사이트 주소
DNS 서버는 이런 IP 주소를 특정 도메인 주소와 같다는 기록을 저장해두고, 인터넷 사용자들이 도메인 주소를 검색했을 때 IP 주소로 연결되도록 해줌
http://kkms4001.iptime.org/x/index.php?mid=board_wTjd97&category=2131&document_srl=2163
AJAX 특징
페이지의 고침없이 현재 페이지에 데이터를 표시할 수 있음.
비동기 통신을 가능하게 해줌
값을 채워주는 역할
<배경>
홈페이지는 웹문서 형식을 갖고 있지 않고 클라이언트가 호출할 때 생성이 되므로
값을 찾을수가 없음
-> SEO, 봇들이 검색할 수 있게 페이지를 만들어 둠 EX) 메타 정보에 저장(봇용 사이트)
-> 그게 없을때는 서버사이드렌더링을 통해 사이트를 찾음
프론트엔드에서는 AJAX 필수요소
<코드>- 통째로 암기해버릴것! 자주 쓰임
<div id="demo"></div>
<h2>The XMLHttpRequest Object</h2>
<button type="button" onclick="loadDoc()">Change Content</button>
<script>
function loadDoc() {
var xhttp = new XMLHttpRequest();
xhttp.onreadystatechange = function() {
if (this.readyState == 4 && this.status == 200) {
document.getElementById("demo").innerHTML =
this.responseText;
}
};
xhttp.open("GET", "diary.txt", true);
xhttp.send();
}
</script>
<AJAX 진행과정>
1. 웹페이지에서 이벤트 발생 (페이지가 로드되고, 버튼등을 클릭)
2. XMLHttpRequest개체가 자바스크립트에 의해 생성됨
3. XMLHttpRequest개체는 웹서버에게 자료 요청
4. 웹서버는 Request에 응답
5. 요청한 웹페이지로 웹서버는 자료를 전송
6. 자바스크립트로 받은 자료를 해석
7. 자바스크립트에 의해서 페이지의 새로고침 없이 자료를 화면에 출력
<2가지 함수 암기>
stringlit
JSONPARSE -문자를 객체로
<asynce await 알아오기>
async 함수는 항상 promise 객체를 반환하며, 개발자가 명시하지 않더라도 반환값을 자동으로 Promise로 래핑한다
자바스크립트 엔진이 await를 만나면 일어나는 일
1.await 키워드가 붙은 대상이 함수라면 해당 함수를 실행한다.
2.함수가 아니거나/함수의 실행이 끝나면 해당 async 함수를 일시정지하고 콜스택에서 마이크로 태스크 큐로 옮긴다
3.이 때 await의 위치를 기억한다.
4.해당 함수가 콜스택에서 빠져 나왔으니 나머지 콜스택이 실행된다.
5.콜스택이 모두 비워지면 이벤트 루프는 마이크로 태스크 큐에 있는 await 키워드를 만나 옮겨졌던 async 함수를 다시 콜스택으로 옮긴다
6.해당 함수가 await 됐던 시점부터 다시 실행된다.
생활코딩 form : 페이지 새로고침
AJAX는 비동기로 페이지 새로고침이 없음
<GET POST>
http://kkms4001.iptime.org/x/index.php?mid=board_wTjd97&category=2131&document_srl=2166
open(method, url, async) : get/post, 서버와 파일위치, async: true or false
send() : GET 방식으로 서버에 요청
send(string) : POST 방식으로 서버에 요청
값의 의미와 무게를 프론트엔드, 백엔드 입장에서 생각해보기!
< 예를들어 회원가입 할때>
1. 백단에서 JSON파일을 프론트로 받아서 회원 아이디가 있는지 없는지 확인하는 방법- 정보 다 털림
2. 백단에서 ID조회 후 맞는지 틀린지 확인하는 작업 후에 넘기는 작업
클라이언트가 데이터를 가져갔으면 그 이후에 어떤 작업을 해야하는지 생각 해봐야 함
GET/POST 방식이라면 호출할때마다 값을 저장을 해야겠지?
모든 POST는 캐쉬를 사용하지 않는다.
<자바스크립트에서 ip정보 확인하는 방법>
window 객체
즉, 홈페이지를 방문하면 ip정보, mac adress 정보 등을
자바스크립트 referer 확인이 가능=> 링크 이동 전 페이지URL 확인이 가능함