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
</p>
<p><script type="text/javascript">
var xmlHttp;</p>
<p>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('데이터 통신 에러');
}
}
}</p>
<p>function setPageNum(the_names) {
var size = the_names.length;
var txtNode;
var nextNode = the_names[0].firstChild.data;
var pv = frmjump.pv.value;
</p>
<p> if(pv != 1 ) {
nextNode++;
}
frmjump.page_num.value = nextNode;
}</p>
<p>function imgCourse(the_names,the_img_size_width,the_img_size_height) {
var size = the_names.length;
var txtNode;
var pv = frmjump.pv.value;</p>
<p> alert(size);</p>
<p>/*
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;</p>
<p> // 만화 사이즈 조정하기
//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;
}
}
}</p>
<p>
startRequest('3197','3197','1','1','1','1','0');
</script>
ajax_test_data.php
</p>
<p><?
$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;
?></p>
<p>답변 2개
제 경험상...
XMLHttpRequest() 로 데이터를 로드할 때는 아작스 형태이거나 동기식일 때거나 상관없이
먼저 데이터인 responseText 를 문자열로 불러와서 textarea 안으로 넣어놓고 시작하는 것이
편하더라구요.
다시 말하면 ajax_test_data.php 를 직접 핸들링하는 것이 아니라 ajax_test_data.php 의 전체 문자열을 가져와서 ajax_test.php 안에서 문자열을 파싱하는 것이죠.
먼저 ajax_test.php 를 아래처럼 구성합니다.
그럼 textarea 안으로 문자열로 입력됩니다.
</p>
<p><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></p>
<p>
문자열을 보면서 상황에 적합한 정규식이나 파싱방법으로 원하는 부분만 변수로 만들어 줍니다.
저는 split() 메소드로 정리를 했습니다. 정리가 끝나면 textarea 는 주석처리하거나 삭제하면 되겠죠.
1번예제
</p>
<p><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 + "
" + myWidth + "
" + myHeight + "
" + 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></p>
<p>
2번예제는 my 라는 div 를 감아서 tagName 을 물고 늘어져 원하는 부분만 취한 후 div 를 remove 시켜버리는 방법인데 거의 안 쓰는 방식이고 xml 파일처럼 node 로 이루어져 있는 문서에만 유효한 그냥 저만 사용하는 방식(아마도)입니다.ㅋ
</p>
<p><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 + "
");
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></p>
<p>
애초에 로드하는 문서의 형태가 배열 오브젝트로 이루어진 JSON 이라면 더 쉽고 많은 방법들이 있습니다만... 아마도 rss 를 가져오는 xml 식이라면 어쨌거나 문자열을 직접 보면서 코딩하는 것이 굉장히 편합니다.
답변에 대한 댓글 1개
댓글을 작성하려면 로그인이 필요합니다.
답변에 대한 댓글 1개
댓글을 작성하려면 로그인이 필요합니다.
답변을 작성하려면 로그인이 필요합니다.
로그인
위 소스로 수정해 보겠습니다.