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) 은 이상한 것 아닌가요?
// xmlHttp.send(null) 주석처리 해도 값을 못가져오네요