AJAX란
AJAX란 자바스크립트를 이용해서 비동기식으로 서버와 통신하는 방식이다. 이 때 ison이나 XML을 이용한다.
비동기식이란 여러가지 일이 동시적으로 발생한다는 뜻으로, 서버와 통신하는 동안 다른 작업을 할 수 있다는 의미이다.
예를 들면 카카오톡 채팅의 경우 새로 고침을 하지않아도 실시간으로 채팅이 올라온다. 즉, AJAX(비동기 통신) 이다.
진행과정
1. 웹페이지에서 이벤트 발생
2. XMLHttpRequest 객체가 자바스크립트에 의해 생성됨
3. XMLHttpRequest 객체는 웹서버에게 자료 요청
4. 웹서버는 Request에 응답
5. 요청한 웹페이지로 웹서버는 자료를 전송
6. 자바스크립트로 받은 자료를 해석
7. 자바스크립트에 의해서 페이지의 새로고침 없이 자료를 화면에 출력
Method
| new XMLHttpRequest() | XMLHttpRequest 객체를 생성 |
| abort() | 현재 요청을 취소 |
| getAllResponseHeaders() | 헤더 정보 반환 |
| getResponseHeaders() | 특정 헤더 정보 반환 |
| open(method, url, async, user, psw) | 요청을 정의 method : GET or POST url : 파일의 위치 async : true(비동기) or false(동기) user : 사용자 이름(옵션) psw : 비밀번호(옵션) |
| send() | GET 방식을 사용하여 서버에 자료를 요청 |
| send(string) | POST 방식을 사용해 서버에 자료를 요청 |
| setRequestHeader() | 헤더에 이름/값의 쌍을 추가 |
Property
| onreadystatechange | readyState property 를 변경 할 때 불려질 함수를 정의 |
| readyState | XMLHttpRequest의 정의된 상태값 0 : 요청이 최기화 되지 않음 1 : 서버 연결이 성립됨 2 : 요청 전송됨 3 : 요청 처리중 4 : 요청 완료 및 새로운 요청 대기 |
| responseText | 요청 자료를 문자열로 반환 |
| responseXML | XML로 요청자료를 반환 |
| status | 요청 상태 정의 값 200 : "OK" 403 : "Forbidden" 404 : "Not Found" |
| statusText | 상태를 알려주는 문자열을 전송 |
예제
<body>
<div id="demo"></div>
<h2>AJAX</h2>
<button type="button" onclick="loadDoc()">Change Content</button>
<script>
function loadDoc(){
var xhttp = new XMLHttpRequest(); // 웹 객체 생성
xhttp.onreadystatechange = function(){ //onreadystatechange : readyState property를 변경할때 불려질 함수를 정의
if (this.readyState == 4 && this.status == 200){ // 에러가 없는지 확인하는 과정
// myObj = {"name" : "zard"}
let myObj = JSON.parse(this.responseText); // this.responseText = ajax_info.json
document.getElementById("demo").innerHTML = myObj.name;
}
}
xhttp.open("GET", "ajax_info.json", true); // get방식으로 비동기방식으로 읽어와
xhttp.send();
}
</script>
</body>
비동기 영역에 있는것들은 동기 영역에 있는것들을 건드릴 수 없다.
따라서 밖에 있는 함수를 비동기 영역에서 불러 쓸 수 없다.
비동기안에서 처리될 것들은 모두 비동기 영역 안에 작성해야한다.
<div id="infoArea"></div>
<script>
window.onload = function(){
const ajax_E = new XMLHttpRequest();
ajax_E.onreadystatechange = function(){
if(this.readyState == 4 && this.status == 200){
const printInfo = (items) => {
document.getElementById('infoArea').innerHTML = items;
}
const jsonData = JSON.parse(this.responseText);
let domAddress = '';
let domPart = '';
jsonData.address.forEach((v) => {
domAddress += `<p>${v}</p>`
});
for(let partString in jsonData.part){
domPart += `<p>${partString} : ${jsonData.part[partString]}</p>`;
};
const domString = `
<h1>${jsonData.name}</h1>
<div>${domAddress}</div>
<div>${domPart}</div>
`;
printInfo(domString);
}
}
ajax_E.open("GET", "a.json", true);
ajax_E.send();
}
</script>
반응형