728x90
e7e샘의 나만의 Ajax
<!DOCTYPE html>
<meta charset="UTF-8">
<div id="disp"></div>
<button onclick="fAjax()">아작스</button>
<button onclick="fAjax2()">아작스2</button>
<button onclick="fAjax3()">아작스3</button>
<script>
//매개 변수들을 한 덩어리로 보내면 훨씬 플렉서블 해짐!!
//어쩌다 마주 친 그대 봤는뎅 재미있음. (멜로 아니공 스릴러)
const $={}; //빈 객체 생성(내맘) -> 네임스페이스용
// $객체의 메소드롱 ajax를 만듬, 이제 부터 $.ajax라고 써야함
// 요따구로 해성 $.ajax(jQuery)가 만들어짐(역시 별거 아니었음!)
$.ajax=function(pSet){
let xhr = new XMLHttpRequest();
xhr.open(pSet.method,pSet.url,pSet.async);
xhr.onreadystatechange = function(){
if (xhr.readyState == 4 && xhr.status == 200){
if(pSet.dataType =="json"){
pSet.success(JSON.parse(xhr.responseText));
}else{
pSet.success(xhr.responseText);
}
}
}
xhr.send();
}
const myDisp = document.querySelector('#disp');
// DRY(Do Not Repeat Yourself) 반복하지마랑!
function fDry(pURL,pCallback){ //매개변수를 갯수에 영향받지 않게 더 플렉시블하게 만들 수 잇음!
let xhr = new XMLHttpRequest();
xhr.open('GET',pURL,true);//세번쨰 매개변수로 (true) 비동기,(fals)동기 구분
xhr.onreadystatechange = function(){
if(xhr.readyState==4 && xhr.status==200){
//가져온 결과 xhr.responseText
//달라야 하는 부분
pCallback(xhr.responseText);
alert("현학이 메롱!");
}
}
xhr.send();
console.log("값 보이냥?",xhr.responseText); //요걸 이해했낭?
alert("병철이 메롱!");
}
//3개 함수가 다 똑같음!...
function fCommon(pRslt){
myDisp.innerHTML = pRslt;
}
function fAjax(){
$.ajax({
method:"get",
url : "data.csv",
async : true,
success: function(rslt){
myDisp.innerHTML = rslt;
}
})
//fDry("data.csv",fCommon);
}
function fAjax2(){
$.ajax({
method:"get",
url : "data.html",
async : true,
success: function(rslt){
myDisp.innerHTML = rslt;
}
})
//fDry("data.html",fCommon);
}
function fAjax3(){
$.ajax({
method:"get",
url : "data.json",
async : true,
dataType : "json",
success: function(rslt){
//CSR(Client Side Rendering) vs SSR(Server Side Rendering)
console.log("결광:",rslt);
//rslt 결과를 table(<table>)형태로 disp에 출력하시오
let tbleStr = '<table border="1">';
tbleStr+= "<tr><th>이름</th><th>나이</th><th>별명</th></tr>"
for(let i=0; i<rslt.length; i++){
tbleStr+= `<tr><td>${rslt[i].name}</td><td>${rslt[i].age}</td><td>${rslt[i].alias}</td></tr>`
}
tbleStr += '</table>';
myDisp.innerHTML=tbleStr;
//let jsonData = JSON.parse(rslt);
//myDisp.innerHTML =`${rslt[0].name}는${rslt[0].alias}`;
}
});
/*
fDry("data.json",function(pRslt){
let jsonData = JSON.parse(pRslt); //문자열을 JSON으로 변환
myDisp.innerHTML =jsonData[2].name + "는 " + jsonData[2].alias;
});
*/
}
/*
function fAjax3(){
let xhr = new XMLHttpRequest();
xhr.open('GET',"data.json",true);
xhr.onreadystatechange = function(){
if(xhr.readyState==4 && xhr.status==200){
console.log(xhr.responseText);
// 객체(배열,json) 문자열이라면 객체로 변환해서 쓰는 것이
// 편해서 정신건강에 아주 좋음.
console.log(JSON.parse(xhr.responseText));
}
}
xhr.send();
}
function fAjax2() {
//바로 테스트, 서버에서 data.html을 아작스롱 가져와삼
//disp안에 넣으시옹! 제한시간 10초
let xhr = new XMLHttpRequest();
xhr.open('GET',"data.html",true);
xhr.onreadystatechange = function(){
if(xhr.readyState == 4 && xhr.status == 200){
console.log("항상 결과체크",xhr.responseText);
myDisp.innerHTML += xhr.responseText;
}
}
xhr.send();
}
function fAjax(){
//지역변수로 사용함당!!
let xhr = new XMLHttpRequest(); //통신 심부름꾼 아저씨 생성
//컴터에선 맘대로 생성 가능(요금 없음)
//xhr("방식","장소","비동기 여부"); //할일 지정
xhr.open("get","data.csv",true); //할일 지정
//시킨일이 끝났는지 모니터링(이벤트 기반)
xhr.onreadystatechange = function(){
//중간과정은 관심이 없엉!(무시, 끝났는지만 관심)
if(xhr.readyState == 4 && xhr.status == 200){
console.log("가져온 결과값: ",xhr.responseText);
}
}
//이벤트 등록을
xhr.send(); //시킨대로 하시오
}
*/
//ajax(Asynchronous Javascript XML)의 중요성은 말로 다 표현할 수 없음
// 가장 근본 모양
//전역 변수? 머겅, 현실에 비유하면 심부름꾼 1명을 이지매하겠다는 이야기
//그래서 아작스 변수는 전역변수로 쓰지 않는당!(기본!!!)
//결론은 항상 함수속에 들어가 있어야 된다는 이야깅!
</script>
'JSP > Muzi' 카테고리의 다른 글
| [Javascript] 구조분해 (0) | 2024.08.26 |
|---|---|
| [Javascript] 즉각실행 함수 (0) | 2024.08.26 |
| [Javascript] 배열식 접근법 (1) | 2024.08.26 |
| [Javascript] 콘솔로그 console.log() 맛있게 쓰는법 (0) | 2024.08.22 |
| [Javascript] history.back 이슈(오류) (0) | 2024.08.20 |
