이 두가지 AJAX 코드가 왜 IE8에선 동작하지 않을까요? 블록

첫번째는 일단 자바스크립트 오류가 뜨면서 IE8에서 동작하지 않고 다른 브라우저에선 제대로 동작합니다. 제가 구글에서 {'JSON'이 정의되지 않았습니다} 란 오류메시지를 찾아서 다른 파일을 인클루드하는 방식으로 이걸 동작시켜 보려고 했지만 실패했구요 두번째 소스는 IE8에서 어떠한 오류 메시지도 뜨지 않지만 버튼을 클릭하면 아무 반응이 없습니다. 두번째 소스도 다른 브라우저에선 정상적으로 동작을 합니다. 무슨 문제일까요? ㅡ_ㅡ;

참고로 IE8에서 해당 소스가 어떻게 동작하는지 알고 싶으신 분은 아래 링크를 클릭하시면 됩니다. ^^;

첫번째 소스 동작: http://bit.ly/1GLdkxh
두번째 소스 동작: http://bit.ly/1TKPY1I

[첫번째 소스 - json1.html]
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
32
33
34
35
36
37
38
39
40
41
42
43
44
45
46
47
48
49
50
51
<!DOCTYPE html> 
<html> 
<head> 
<script> 
function loadXMLDoc() 
    var xmlhttp; 
    var params="str1="+escape("오늘은 2015년 3월 7일입니다!")+"&str2="+escape("시간은 오후 7시 59분입니다!"); 
  
    if(window.XMLHttpRequest){ // code for IE7+, Firefox, Chrome, Opera, Safari 
        xmlhttp=new XMLHttpRequest(); 
    }else// code for IE6, IE5 
        xmlhttp=new ActiveXObject("Microsoft.XMLHTTP"); 
    } 
    xmlhttp.open("POST","http://run.iptime.org:81/eight/php/study/json_info.php",true); 
    //Request에 따라서 적절한 헤더 정보를 보내준다 
    xmlhttp.setRequestHeader("Content-type","application/x-www-form-urlencoded"); 
    xmlhttp.send(params); 
  
    xmlhttp.onreadystatechange=function(){ 
        if (xmlhttp.readyState==&& xmlhttp.status==200){ 
            myFunction(xmlhttp.responseText); 
        } 
    } 
  
function myFunction(response) { 
    var arr = JSON.parse(response); 
    var i; 
    var out = "<table>"
  
    for(i = 0; i < arr.length; i++) { 
        out += "<tr><td>" + 
        unescape(arr[i].str1) + 
        "</td><td>" + 
        unescape(arr[i].str2) + 
        "</td><tr>"
    } 
    out += "</table>"
    document.getElementById("myDiv").innerHTML = out; 
</script> 
</head> 
<body> 
  
<div id="myDiv"><h2>AJAX로 이 문장을 화면 깜빡임 없이 바꿔보자!</h2></div> 
<button type="button" onclick="loadXMLDoc()">Change Content</button> 
</form> 
  
</body> 
</html>
cs

[첫번째 소스 서버측: json_info.php]
1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
<?
header("Content-Type: application/javascript; charset=utf-8");
 
$arr1=array("AJAX는 새로운 프로그래밍 언어가 아니다.","AJAX는 빠르고 동적인 웹페이지를 만들 수 있는 기술이다.");
$arr2=array($str1,$str2);
 
$jsontable=array($arr1,$arr2);
 
$outp = "[";
for($i=0;$i<count($jsontable);$i++) {
    if($outp != "[") {$outp .= ",";}
    $outp .= '{"str1":"'.$jsontable[$i][0].'",';
    $outp .= '"str2":"'.$jsontable[$i][1].'"}'
}
$outp .="]";
 
echo $outp;
?>

=========================================================================================

[두번째 소스 - json3.html]
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
32
33
34
35
36
37
38
39
40
41
42
43
44
45
46
47
48
49
50
51
52
53
<!DOCTYPE html>  
<html> 
<head> 
<title>jQuery Ajax Example with JSON Response</title> 
<script src="http://www.blrun.net/bbs/syntaxhighlighter/scripts/jquery-1.7.1.min.js" type="text/javascript"></script> 
<!-- 여기에 자바스크립트 코드를 기술한다 --> 
<script type="text/javascript"> 
$(document).ready(function(){ 
    $(':button').on('click', function() { // 이것은 버튼이 클릭됐을 때 발생하는 이벤트 
        var button = $(this).val(); 
        $.ajax({ // ajax 호출 시작 
            type: "POST", 
            url: "http://www.blrun.net/eight/php/study/serverside.php", // JQuery가 serverside.php를 로드함 
            dataType: "json", // JSON datatype을 설정 
            data: {"button":escape($(this).val())} // 클릭된 버튼의 값을 보내준다 
        }) 
        .done(function(data) { // 변수 data는 서버사이드로부터 받은 데이타를 담고 있다. 
            $('#wines').html(''); // #wines div 값을 초기화 한다. 
            if (button == '모든') { // 클릭된 버튼이 all 이라면 모든 와인을 표시해 준다. 
                for (var i in data.red) { 
                    $('#wines').append('Red wine: ' + data.red[i] + '<br/>'); 
                } 
                for (var i in data.white) { 
                    $('#wines').append('White wine: ' + data.white[i] + '<br/>'); 
                } 
            } 
            else if (button == '빨강') { // 클릭된 버튼이 red 라면 빨간 와인을 표시해 준다. 
                for (var i in data.red) { 
                    $('#wines').append('Red wine: ' + data.red[i] + '<br/>'); 
                } 
            } 
            else if (button == '흰색') { // 클릭된 버튼이 white 라면 흰색 와인을 표시해 준다. 
                for (var i in data.white) { 
                    $('#wines').append('White wine: ' + data.white[i] + '<br/>'); 
                } 
            } 
        }); 
        return false; // 페이지가 리프레쉬되지 않게 유지해 준다.  
    }); 
}); 
</script> 
</head> 
<body> 
<form method="post" action=""> 
    <button value="모든" type="button">모든 와인들을 가져온다!</button> 
    <button value="빨강" type="button">빨간 와인들을 가져온다!</button> 
    <button value="흰색" type="button">흰색 와인들을 가져온다!</button> 
</form> 
<div id="wines"> 
<!-- 현재 페이지에서 작업을 끝마쳤을 때 Javascript가 여기에 data를 프린트할 것이다. --> 
</div> 
</body> 
</html>

[두번째 소스 서버측: serverside.php]
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
<?php
header("Content-Type: application/javascript; charset=utf-8");
 
// 클릭된 버튼의 값을 가져온다.
$button = $_POST['button'];
 
// 빨간색, 흰색 와인 테이블
$red = array('Chianti(치안티)''Barolo(바롤로)''Pinot Noir(피놋 노이르)');
$white = array('Chardonnay(차돈네이)''Cava(카바)''Chablis(채블리스)');
 
// 흰색과 빨간색 테이블을 하나의 다중배열 테이블로 결합한다.
$winetable = array(
    "red" => $red,
    "white" => $white
);
 
// 마지막으로 버튼값에 따라 와인테이블을 JSON 인코딩을 해주고 그것을 출력한다.
if ($button == "빨강") {
    print json_encode($red);
}
else if ($button == "흰색") {
    print json_encode($white);
}
else {
    print json_encode($winetable);
}
?>

덧글

  • 차범근 2015/06/27 08:43 # 삭제 답글

    약 안 먹냐?
  • 희망의빛™ 2015/07/12 17:29 # 답글

    첫번째 소스는 제로보드4 lib.php를 고쳐 라이센스를 삽입하는 부분 첫머리에 <!DOCTYPE html> 을 기술해 주고 나서 해결이 됐습니다. 이렇게 고치면 제로보드 게시판의 모양이 좀 이상해지지만 Ajax와 jquery가 IE8과도 잘 동작하기 때문에 여러분들도 이렇게 일단 고치고 나서 이상해진 모양을 IE8과 호환되도록 고쳐나가시기 바랍니다.
댓글 입력 영역
* 비로그인 덧글의 IP 전체보기를 설정한 이글루입니다.


웹로그 검색