JavaScript와 php와의 통신

php와 통신할 XMLHttpRequest 객체 생성 및 동작 설정

 

var xhr = new XMLHttpRequest();
xhr.open('GET', 'uri');
xhr.onreadystatechange = function(){ //상태의 변화가 나타났을 시 함수 실행
    if(xhr.readyState === 4 && xhr.status === 200){ //4=연결완료, 200=요청한 문서가 서버에 존재
    	// 동작
        console.log(xhr.responseText); //php파일에서 php코드영역(<?php...?>)의 echo값과 php코드영역 외의 내용을 반환
    }
};
xhr.send(); //GET 방식은 인자가 없다.

 

 

요청 방식별 send 함수의 형식

Get 방식 : send() 함수에는 인자가 들어가지 않고, uri에 querystring을 포함하여 넣는다. (url의 뒤에 ?+querystring을 붙인것)

Post 방식 : send() 함수의 인자에 querystring을 넣는다.

※ querystring 형식 : "?name=kimcoder&age=23"

 

예) post 방식을 이용할 경우의 send 함수

xhr.setRequestHeader("Content-Type", "application/x-www-form-urlencoded"); //http 헤더, 서버로 전송할 데이터가 포함되어있음
xhr.send("name=kimcoder&age=23");

 

 

php에서 변수 받는 법/ 반환 하는 법

$name = $_Post['name']; //Get방식일 경우에는 $_Get

echo "이름은 ".$name." 입니다"; //php는 문자열을 .(점)으로 이어붙임

 

 

주기적인 Ajax 요청

self는 window객체 자체를 뜻한다.

selfTmeout 메소드는 몇 밀리초 후에 어떤 메소드를 실행할 것인지 정할 수 있다.

function sendRequest() {
  var xhr = new XMLHttpRequest();
  xhr.open('GET', 'uri');
  xhr.onreadystatechange = function(){
    if(xhr.readyState === 4 && xhr.status === 200){
    console.log(xhr.responseText);
    self.setTimeout("sendRequest()", 500); //응답을 받은 후 0.5초 후에 첫 번째 인자에 해당하는 함수를 실행
    }
  };
  xhr.send();
}
sendRequest();

이렇게 주기적인 요청을 하게 되면 응답 내용이 캐시로 남게 되고, 네트워크와 서버의 자원을 많이 소모한다.

이를 해결하기 위한 2가지 방법을 소개한다.

 

1) php 파일에 캐시 설정 헤더 추가

<?php
    header("Pragma: no-cache");
    header("Cache-Control: no-cache,must-revalidate");
	...
?>

 

2) abort 메소드

XMLHttpRequest 객체에는 abort 메소드가 있다.

abort 메소드는 Ajax 요청에 대한 응답이 도착하기 전에 요청을 취소할 수 있다.

function abortRequest() {
    httpRequest.abort();
}