Ajax : 비동기 방식으로 웹서버와 js 객체 간의 통신. 웹서버로 부터 부분 데이터를 수신
내가 이해한 Ajax의 예시
연관검색어, 상품에 마우스를 오버했어 상품정보를 서버에 요청해서 db에서 상품에 대한 정보를 select로 넘겨서 xml이나 json같은걸로 넘기면 html이 아니라 js에서 넘겨받아서 상품 정보를 띄워줌.
구글지도 => 한번에 대용량의 지도 이미지를 불러오지 않고 작은 용량의 이미지를 준 다음에 사용자가 지정하는 이벤트에 따라 고용량의 데이터를 송수신함
spa를 쓰려면 ajax가 필요함, 이렇게 ajax를 쓰면 활용할 수 있는게 너무 많음
버튼을 눌렀을 때 새로고침 버튼이 안 깜빡거리면 ajax를 쓴거임
아래는 실습파일.
<head>
<script>
window.onload = function () { // 윈도우 로딩과 동시에 실행
document.getElementById("btnOk1").onclick = function () {
sijak();
}
document.querySelector("#btnOk2").onclick = sijakXML;
document.querySelector("#btnOk3").onclick = sijakJSON;
}
function sijak() {
xhr = new XMLHttpRequest(); // 비동기 방식 처리 클래스
//xhr 은 XMLHttpRequest의 줄임말, XHR을 사용하면 페이지의 새로고침 없이도 URL에서 데이터를 가져올 수 있음. 사용자의 작업을 방해하지 않고 페이지의 일부를 업데이트할 수 있다는 말.
//alert(xhr);
//xhr.open("요청방식(겟 혹은 포스트)", "요청파일명", true) // true:비동기방식, false:동기방식
//let fname = "js20.txt";
let fname="js20csv.txt";
xhr.open("get", fname, true);
xhr.onreadystatechange = function () {
//생성자로 XMLHttpRequest 객체를 생성 후, open() 과 send() 메서드를 사용해 요청.
//onreadystatechange 이벤트로 통신 상태의 변화를 감지해 서버의 응답을 확인 후 결과를 수행하는 흐름으로 사용한다.
console.log(xhr.readyState);
/*
readyState 속성값
0: 초기화이전(uninitialized) - 객체 생성만 되고 초기화 이전, 즉, open 수행전
1: 로딩중(loading) - 객체 생성 및 초기화, 그러나 send 수행전
2: 로딩완료(loaded) - send 수행 되었으나 헤더와 status 값 미도착
3: 서버 처리중(interactive) - 데이터 일부만 도착
4: 처리완료(completed) - 데이터 전부 도착
status 속성값
200: 성공 (OK)
403: 접근거부 (Forbidden)
404: 파일 없음 (Not Found)
500: 서버 내부 오류 (Internal Server Error)
*/
if(xhr.readyState == 4){
//=통신상태 양호
//alert(xhr.status);
if(xhr.status == 200){ // 요청 성공
processFunction();
}
}
}
xhr.send(null); // get방식이니 null(찾아봤는데 그냥 암기인듯)
}
function processFunction(){
let data = xhr.responseText;
//xhr의 결과를 text로 반환함, 다른 방법으론 xml로 반환하는 방법이 있음
//document.querySelector("#disp").innerText = data;
//let my = document.createTextNode(data); // DOM사용
//document.querySelector("#disp").appendChild(my);
//행은 엔터로 구분
let rowData = data.split(String.fromCharCode(13)); // ascii 코드 13:CR
//alert(rowData.length);
let str = "";
for(let i = 0; i < rowData.length; i++){
let colData = rowData[i].split(","); // 열은 콤마로 구분
for(let j=0; j<colData.length; j++){
str += colData[j] + " ";
}
str += "<hr>";
}
document.querySelector("#disp").innerHTML = str;
}
function sijakXML() {
alert("b");
}
function sijakJSON() {
alert("c");
}
</script>
</head>
<body>
<h2>* Ajax 처리 *</h2>
<button id="btnOk1">Ajax 원리 이해</button><br>
<button id="btnOk2">Xml 읽기</button><br>
<button id="btnOk3">Json 읽기</button><br>
<hr>
<div id="disp"></div>
</body>
</html>
같이 일하고 싶은 개발자가 되어야지