Egoist

AJAX(Asynchronous JavaScript and XML)은 서버와 비동기적으로 데이터를 주고받는 기술로, 페이지 전체를 새로고침하지 않고도 서버와의 통신이 가능합니다. AJAX는 XML 외에도 JSON, HTML, 일반 텍스트 등 다양한 데이터 형식을 사용할 수 있습니다.

기본적으로 AJAX는 XMLHttpRequest 객체를 사용하여 구현되지만, fetch API와 jQuery 라이브러리를 사용한 방식도 일반적입니다. 각각의 구현 방식을 자세히 살펴보겠습니다.

1. XMLHttpRequest를 사용한 AJAX 요청

XMLHttpRequest 객체는 브라우저에서 서버와 데이터를 주고받기 위해 제공하는 API입니다. 기본 구조는 다음과 같습니다.

설명

• xhr.open(method, url, async): AJAX 요청의 종류(GET, POST)와 URL, 비동기 여부(true/false)를 설정합니다.
• xhr.onreadystatechange: AJAX 요청의 상태가 변경될 때마다 호출됩니다. xhr.readyState는 요청 상태를 나타내며, 4는 요청이 완료되었음을 의미합니다.
• xhr.status: 서버의 응답 상태 코드를 반환합니다. 200은 성공, 404는 리소스를 찾을 수 없음, 500은 서버 오류를 의미합니다.
• xhr.send(data): 서버로 요청을 전송합니다. GET 요청일 경우 data는 필요하지 않습니다. POST 요청일 경우 data에 전송할 데이터를 포함시킵니다.

참고: JSON 형식의 데이터를 전송할 때는 요청 헤더를 설정해야 합니다.

2. Fetch API를 사용한 AJAX 요청

fetch API는 최신 브라우저에서 지원하며, XMLHttpRequest보다 간단하게 사용할 수 있습니다. fetch는 Promise를 반환하므로 비동기 처리를 더욱 쉽게 할 수 있습니다.

설명

• fetch(url, options): 요청할 URL과 추가 옵션을 전달하여 데이터를 가져옵니다. GET 요청의 경우 기본 설정으로 사용하면 되고, POST 요청의 경우 method, headers, body 옵션을 추가합니다.
• .then(response => response.json()): 응답을 JSON 형식으로 변환합니다.
• .catch(error => ...): 요청이 실패했을 때의 에러를 처리합니다.

3. jQuery를 사용한 AJAX 요청

jQuery 라이브러리를 사용하면 AJAX 요청이 간편해집니다. $.ajax 메서드를 통해 요청을 설정하고, success와 error 콜백을 정의할 수 있습니다.

설명

• url: 요청할 서버 URL을 지정합니다.
• type: 요청 방식으로, GET, POST 등을 설정합니다.
• contentType: 서버에 전송할 데이터의 형식을 지정합니다. JSON 데이터를 전송하려면 application/json으로 설정합니다.
• data: 전송할 데이터를 지정합니다. POST 요청의 경우 JSON 데이터를 문자열로 변환하여 전송합니다.
• **success**와 error: 요청 성공 및 실패 시 실행할 콜백 함수를 설정합니다.

추가 팁

• 응답 상태 코드 처리: 각 방식에서 응답 상태 코드(예: 200, 404, 500)에 따라 성공/실패를 처리합니다.
• CORS: AJAX 요청 시 CORS(Cross-Origin Resource Sharing) 정책에 주의해야 합니다. 다른 도메인에서 데이터를 가져오려면 서버에서 CORS를 허용해야 합니다.
• 비동기 처리: AJAX는 비동기 처리되므로, 데이터가 완료되기 전에 다음 코드가 실행될 수 있습니다. Promise, async/await 등을 사용하여 비동기 처리를 쉽게 할 수 있습니다.

사용자의 접속 IP를 확인하는 경우, 기본적으로 다음 코드를 이용하여 사용한다

ip, web header, port 등과같이 웹에서 사용하는 기본적인 정보들은 PHP의 "$_SERVER" API 에서 가져올 수 있다.다음은 "$_SERVER" 함수 로 가져올 수 있는 목록이다.

PHP의 변수는 숫자나 문자를 담아두는 곳이라 생각하면 된다.

다른 언어와 달리 식별자(int, char....) 없이 바로 사용할 수 있다.

다음 예제는 변수를 연산하고 출력하는 예제이다. 

//는 주석으로 //뒤에 나오는 내용은 프로그램으로 인식하지 않는다.

부연설명이라고 생각하면 된다.

위와 같이 $a 변수에 숫자를 넣어 연산에 사용할 수 있다.

유저로그인시 일정시간동안 유지를 하기 위해 사용하는 기능

PHP의 세션 지원은 지속적인 접근시 (다름 웹페이지에서) 어떤 데이터를 유지하는 방법이다.

웹 페이지에서 세션을 생성하면 다른 웹 페이지에서 데이터를 가져다 사용할 수 있다.

웹 종료 되면 파괴되며, 코드상으로도 세션을 파괴할 수 있다.

일반적으로 다음과 같이 사용한다.

Page1

Page2

이와 같이 사용하면 Page2에서 Page1에서 입력한 정보를 사용할 수 있다.

다음은 세션을 파괴하는 코드이다.

스크롤하여 WebPage 맨 밑(끝?)으로 가는 경우, 추가 적인 기능을 수행해야 하는 경우가 종종 존재합니다~

예를들어, 모모 소셜 사이트에서 스크롤하여 webPage의 바닥까지 내려가는 경우, 추가적인 데이터를 로딩한다던가..

Google Image 검색시 이미지를 구경하다가 맨 밑까지 내려갔을 시, 추가적인 이미지가 로드되는 경우처럼 말이죠~

위의 두개가 같은 경우라고 해야하나요?ㅎㅎ 아무튼!! 스크롤 시에 바닥을 확인하는 경우는 분명 종종 필요합니다~

그럴때 아래와 같은 방법으로 웹 페이지의 바닥 여부를 판단할 수 있습니다.~

$(window).scroll(function() {
   if($(window).scrollTop() + $(window).height() == $(document).height()) {
       alert("bottom!");
   }
});

HTML Useful Character Entities

Note: Entity names are case sensitive!

HTML 의 iframe 내부의 Page를 iframe을 담고있는 페이지에서 바꾸는 방법이 필요했다.

이런저런 방법을 찾아보다가 iframe 의 src를 바꾸는 방법으로 가능함을 알았다.

다음은 iframe의 src를 바꾸는 방법이다.

javascript 에서 다음과 같이 선언한다.

function changeIframeUrl(url)

{

    document.getElementById("main_frame").src = url;

}

그리고 나의 경우에는 button을 선택시 iframe 내부의 페이지가 이동되기를 원하기 때문에

다음과 같이 HTML 에서 javascript 함수를 호출한다.

<input type="button" value='New Page'  onclick = "changeIframeUrl('New.php')"></input>

이런방식으로 iframe 내부의 src를 바꿀수 있다.

참고코드

- 내가 사용한 HTML 내의 Iframe 코드

<iframe src = "./login.php" width="100%" height="500" frameborder="0" border="0" scrolling="yes" bgcolor=#EEEEEE bordercolor="#FF000000" marginwidth="0" marginheight="0" name="main_frame" id="main_frame"></iframe> 

src를 바꾼다는 생각을 못해 키워드를 찾지 못해 찾는데 꽤 시간이 걸렸다..

검색을 iframe 내부 페이지 바꾸기 이런식으로 검색했더니 안나오더라..

여기 올린 글 내용도 검색엔진에서 찾아주나 모르겠다..

PHP 일자연산 방법

위의 경우 $list['used_time'] 에는 YYYY-mm-dd H:m:s 형식 스트링의 데이터가 들어있다.

이런 데이터를 PHP의 date 형식으로 변환하기 위해서 위와같이 date 방식으로 변환해서 $used_date 변수에 넣는다.

PHP date 단위 연산을 위해서는 date 변수형으로 변경되어야 하기 때문!!

그리고 다시 strtotime을 이용하여 연산이 가능하다.

Ex) strtotime(YYYY-mm-dd, -1 day)

이런방법으로 사용이 가능하다.

마찬가지로 계속 찾아보기 귀찮아서 ㅎㅎ

# Html Table 내부에 <td> 태그와 <tr> 태그의 속성