일 | 월 | 화 | 수 | 목 | 금 | 토 |
---|---|---|---|---|---|---|
1 | 2 | 3 | 4 | |||
5 | 6 | 7 | 8 | 9 | 10 | 11 |
12 | 13 | 14 | 15 | 16 | 17 | 18 |
19 | 20 | 21 | 22 | 23 | 24 | 25 |
26 | 27 | 28 | 29 | 30 | 31 |
- promise
- 동기
- database
- mysql
- addEventListener
- slow and steady
- Import
- 혼프
- eport
- db
- 비동기
- async
- js
- 게임
- object
- JS #프로젝트
- 참고블로그
- setTimeout()
- https://m.blog.naver.com/tt2t2am1118/221010125300
- execCommand
- await
- https://youtube.com/playlist?list=PLuHgQVnccGMA5836CvWfieEQy0T0ov6Jh&si=FTaYv8m21EhO-A2K
- Project
- Porject
- ajax
- json
- sql
- prj
- webpack
- callback
- Today
- Total
C-log
⚡PHP change_id : Ajax 본문
앞시간에 우리는 js스크립트로만 URL의 id 값을 변경하는 것을 시도해봤다. 이번에는 js안에서 Ajax를 활용해서 URL의 id값을 변경해보려고 한다. 전체 코드는 아래와 같다.
<!DOCTYPE html>
<html>
<head>
<title>Change URL with Ajax</title>
</head>
<body>
<input type="text" id="newIdInput" placeholder="Enter a new ID">
<button id="changeURLButton">Change URL</button>
<script>
document.getElementById("changeURLButton").addEventListener("click", function() {
try {
let newId = document.getElementById("newIdInput").value;
if (newId) {
let xhr = new XMLHttpRequest();
let newURL = window.location.href.split('?')[0] + "?id=" + newId;
xhr.open("GET", newURL, true);
xhr.onreadystatechange = function() {
if (xhr.readyState === 4 && xhr.status === 200) {
console.log("URL changed successfully.");
window.location.href = newURL;
}
};
xhr.send();
}
} catch (error) {
console.error("An error occurred: " + error.message);
}
});
</script>
</body>
</html>
xhr.open(method,url,async)
xhr.open함수는 XHR객체를 초기화하고 서버와의 통신을 설정하는 역할이다. xhr.open함수의 인자들은 세가지를 가진다. method는 HTTP에 요청하는 방식이다.(GET,POST,PUT...) url은 요청을 보낼 URL이다. async는 비동기 여부를 나타내는 부울 값이다. 이렇게 호출하고 요청이 완료되면 onreadystatechange이벤트 핸들러 함수로 넘어간다.
XMLHttpRequest & onreadystatechange
text속성인 input태그에 원하는 값을 넣고 버튼을 눌렀을 때 addEventListener의 함수가 발동 한다. 여기서 try, catch문을 상용해서 예외처리를 준비하게 구성했다. ajax의 기본 구조인 XMLHttpRequest()는 웹 브라우저에서 HTTP 요청을 보내고 받을 수 있는 js 객체이다. 따라서 xhr.onreadystatechange라는 이벤트 핸들러 기능을 콜백함수의 형태로 만들었다. onreadystatechange는 XMLHttpRequest의 상태가 변경 될 때마다 호출을한다.
if (xhr.readyState === 4 && xhr.status === 200)
if문의 xhr.readyState는 요청의 현재 상태를 나타낸다. HTTP요청은 여러 단계를 거치는데 아래 표로 정리 하였다.
0 | 초기화 (open() 함수가 호출 되기 전 상태) | |
1 | 로드 중 (open() 함수가 호출된 후, send() 함수 호출 전 상태) | |
2 | 로드 완료 (send() 함수가 호출된 후, 서버 응답 받기 전) | |
3 | 상호 작용 중 (서버 응답 데이터를 받는 중) | |
4 | 완료 (서버 응답 데이터를 모두 받은 후) |
즉, if문의 조건은 4인 상태인 완료가 되었을 때 이다.
xhr.status는 서버에서 받은 HTTP 응답 상태 코드를 나타낸다. 성공적으로 요청을 처리하면 200이라는 상태코드를 받을 수 있다. 즉, 이상태의 코드를 받아 현재 서버와 수신 상태를 파악 할 수있다.
fetch()
최근에는 Ajax를 XML이 아닌 fetch() API로 대체되는 추세이다. 아래 코드는 fetch api를 사용해서 만든 코드이다.
<!DOCTYPE html>
<html>
<head>
<title>Change URL with Fetch API</title>
</head>
<body>
<input type="text" id="newIdInput" placeholder="Enter a new ID">
<button id="changeURLButton">Change URL</button>
<script>
document.getElementById("changeURLButton").addEventListener("click", function() {
let newId = document.getElementById("newIdInput").value;
if (newId) {
let newURL = window.location.href.split('?')[0] + "?id=" + newId;
fetch(newURL, {
method: "GET"
})
.then(response => {
if (response.status === 200) {
console.log("URL changed successfully.");
window.location.href = newURL;
} else {
console.error("An error occurred. Status: " + response.status);
}
})
.catch(error => {
console.error("An error occurred: " + error.message);
});
}
});
</script>
</body>
</html>
구상과 형식은 우리가 이전에 배웠던 fetch() api 포스트를 참고하면 좋을 듯 하다. 이제 우리가 진행하고 있던 작업을 오늘 배운 방법과 결합해서 페이지를 구축해보자.
'Server > ⚡ver0' 카테고리의 다른 글
⚡PHP API : 날짜 그리고 나의 위치 (0) | 2023.10.30 |
---|---|
⚡PHP select_id : JS&PHP&MySQL (0) | 2023.10.23 |
⚡PHP select_id : DATABASE (0) | 2023.10.22 |
⚡PHP change_id (0) | 2023.10.21 |
⚡PHP로 URL의 id값 가져오기 : GET/POST (0) | 2023.10.18 |