ajax 질문 드립니다.

ajax 질문 드립니다.

QA

ajax 질문 드립니다.

본문

안녕하세요.

기존에 잘 되던 소스코드 였는데 어느순간부터 작동을 안하네요.

디버깅을 해봐도 값을 못가져오네요.

환경 : php7, 크롬

 

startRequest('3197','3197','1','1','1','1','0');

호출해서

 

function handleStateChange() {

if(xmlHttp.readyState == 4) {   ==> 정상

   if(xmlHttp.status == 200) {  ==> 정상imgCourse(xmlHttp.responseXML.getElementsByTagName("name"),xmlHttp.responseXML.getElementsByTagName("img_size_width"),xmlHttp.responseXML.getElementsByTagName("img_size_height"));

 

아래 3개의 값을 못가져오네요.

xmlHttp.responseXML.getElementsByTagName("name")

xmlHttp.responseXML.getElementsByTagName("img_size_width")

xmlHttp.responseXML.getElementsByTagName("img_size_height")

 

 

 

ajax_test.php


<script type="text/javascript">
var xmlHttp;
function createXMLHttpRequest() {
    if (window.ActiveXObject) {
        xmlHttp = new ActiveXObject("Microsoft.XMLHTTP");
    } else if (window.XMLHttpRequest) {
        xmlHttp = new XMLHttpRequest();
    }
}
    
function startRequest(uid,vuid,page_num,vs,pv,vcount,vautobetween) {
    //var vautobetween =  frmjump.autobetween.value;
    createXMLHttpRequest();
    xmlHttp.open("POST", "ajax_test_data.php?uid="+uid+"&vuid="+vuid+"&page_num="+page_num+"&vs="+vs+"&pv="+pv+"&vcount="+vcount+"&vautobetween="+vautobetween, true);
    xmlHttp.onreadystatechange = handleStateChange;
    xmlHttp.send(null);
}
    
function handleStateChange() {
    if(xmlHttp.readyState == 4) {
        if(xmlHttp.status == 200) {
            imgCourse(xmlHttp.responseXML.getElementsByTagName("name"),xmlHttp.responseXML.getElementsByTagName("img_size_width"),xmlHttp.responseXML.getElementsByTagName("img_size_height"));
            setPageNum(xmlHttp.responseXML.getElementsByTagName("page"));
        } 
        else {
            alert('데이터 통신 에러');
        }
    }
}
function setPageNum(the_names) {
    var size = the_names.length;
    var txtNode;
    var nextNode = the_names[0].firstChild.data;
    var pv = frmjump.pv.value;
    
    if(pv != 1 ) { 
        nextNode++; 
    }
    frmjump.page_num.value = nextNode; 
}
function imgCourse(the_names,the_img_size_width,the_img_size_height) {
    var size = the_names.length;
    var txtNode;
    var pv = frmjump.pv.value;
    alert(size);
/*
    if(userid[0].firstChild.data == '') {
        alert('사용자 정보가 존재하지 않습니다.\n다시 보기 버튼를 클릭해 주세요.');
        window.close();
        return false;
    }
*/
    if(pv == 1) {
        var nextNode = the_names[0].firstChild.data;
        document.getElementById("comic_img" + pv + "_1").height = "800";
        document.getElementById("comic_img" + pv + "_1").src = nextNode;
    } 
    else 
    {
        for (var i = 0; i < size; i++) {
            var j = i + 1;
            var nextNode            = the_names[i].firstChild.data;
            var img_size_width        = the_img_size_width[i].firstChild.data;
            var img_size_height        = the_img_size_height[i].firstChild.data;
            // 만화 사이즈 조정하기
            //if(img_size_height > 600 && img_size_height < 800) { img_size_height = 800; img_size_width = 600; }
            //else if(img_size_height < 600) { img_size_height = 700; img_size_width = 500; }
            //alert(img_size_height);
            document.getElementById("comic_img" + pv + "_" + j).height    = img_size_height;
            document.getElementById("comic_img" + pv + "_" + j).width    = img_size_width;
            document.getElementById("comic_img" + pv + "_" + j).src        = nextNode;
        }
    } 
}

startRequest('3197','3197','1','1','1','1','0');
</script>

 

ajax_test_data.php


<?
    $rss_idsu  = '';
    $rss_idsu .= "<?xml version=\"1.0\" encoding=\"UTF-8\" ?>"; 
    $rss_idsu .= "    <response>"; 
    $rss_idsu .= "      <name>aaaaaaaa</name>";
    $rss_idsu .= "      <img_size_width>500</img_size_width>";
    $rss_idsu .= "      <img_size_height>1000</img_size_height>";
    $rss_idsu .= "    <page>50</page>";
    $rss_idsu .= "    </response>"; 
    echo $rss_idsu;
?>

이 질문에 댓글 쓰기 :

답변 2

제 경험상...

XMLHttpRequest() 로 데이터를 로드할 때는 아작스 형태이거나 동기식일 때거나 상관없이

먼저 데이터인 responseText 를 문자열로 불러와서 textarea 안으로 넣어놓고 시작하는 것이

편하더라구요.

다시 말하면 ajax_test_data.php 를 직접 핸들링하는 것이 아니라 ajax_test_data.php 의 전체 문자열을 가져와서 ajax_test.php 안에서 문자열을 파싱하는 것이죠.

 

먼저 ajax_test.php 를 아래처럼 구성합니다.

그럼 textarea 안으로 문자열로 입력됩니다.


<script>
function ajaxData() {
    document.write("<textarea>" + ajaxXhr.responseText + "</textarea>");
}
function ajaxMode() {
    ajaxXhr = new XMLHttpRequest();
    ajaxXhr.open("POST", "ajax_test_data.php");
    ajaxXhr.send();
    ajaxXhr.onreadystatechange = function() {
        if (ajaxXhr.readyState == 4 && ajaxXhr.status == 200) ajaxData();
    }
}
ajaxMode();
</script>

 

문자열을 보면서 상황에 적합한 정규식이나 파싱방법으로 원하는 부분만 변수로 만들어 줍니다.

저는 split() 메소드로 정리를 했습니다. 정리가 끝나면 textarea 는 주석처리하거나 삭제하면 되겠죠.

1번예제


<script>
function ajaxData() {
    //document.write("<textarea>" + ajaxXhr.responseText + "</textarea>");
    myName = ajaxXhr.responseText.split("<name>")[1].split("</name>")[0];
    myWidth = ajaxXhr.responseText.split("<img_size_width>")[1].split("</img_size_width>")[0];
    myHeight = ajaxXhr.responseText.split("<img_size_height>")[1].split("</img_size_height>")[0];
    myPage = ajaxXhr.responseText.split("<page>")[1].split("</page>")[0];
    document.write(myName + "<br>" + myWidth + "<br>" + myHeight + "<br>" + myPage);
}
function ajaxMode() {
    ajaxXhr = new XMLHttpRequest();
    ajaxXhr.open("POST", "ajax_test_data.php");
    ajaxXhr.send();
    ajaxXhr.onreadystatechange = function() {
        if (ajaxXhr.readyState == 4 && ajaxXhr.status == 200) ajaxData();
    }
}
ajaxMode();
</script>

 

2번예제는 my 라는 div 를 감아서 tagName 을 물고 늘어져 원하는 부분만 취한 후 div 를 remove 시켜버리는 방법인데 거의 안 쓰는 방식이고 xml 파일처럼 node 로 이루어져 있는 문서에만 유효한 그냥 저만 사용하는 방식(아마도)입니다.ㅋ


<script>
function ajaxData() {
    document.write("<div id=my>" + ajaxXhr.responseText + "</div>");
    you = my.getElementsByTagName("response")[0].getElementsByTagName("*");
    for (i = 0; i < you.length; i++) document.write(you[i].tagName.toLowerCase() + " : " + you[i].innerText + "<br>");
    my.remove();
}
function ajaxMode() {
    ajaxXhr = new XMLHttpRequest();
    ajaxXhr.open("POST", "ajax_test_data.php");
    ajaxXhr.send();
    ajaxXhr.onreadystatechange = function() {
        if (ajaxXhr.readyState == 4 && ajaxXhr.status == 200) ajaxData();
    }
}
ajaxMode();
</script>

 

애초에 로드하는 문서의 형태가 배열 오브젝트로 이루어진 JSON 이라면 더 쉽고 많은 방법들이 있습니다만... 아마도 rss 를 가져오는 xml 식이라면 어쨌거나 문자열을 직접 보면서 코딩하는 것이 굉장히 편합니다.

post 로 넘기는데 xmlHttp.send(null) 은 이상한 것 아닌가요?

답변을 작성하시기 전에 로그인 해주세요.
전체 790
QA 내용 검색

회원로그인

(주)에스아이알소프트 / 대표:홍석명 / (06211) 서울특별시 강남구 역삼동 707-34 한신인터밸리24 서관 1404호 / E-Mail: admin@sir.kr
사업자등록번호: 217-81-36347 / 통신판매업신고번호:2014-서울강남-02098호 / 개인정보보호책임자:김민섭(minsup@sir.kr)
© SIRSOFT