2012-11-19 5 views
1

"Head first Ajax"책의 샘플 코드로 놀고 있습니다. 여기에 코드의 두드러진 부분은 다음과 같습니다Ajax 함수가 전체 코드를 반환하는 이유는 무엇입니까?

Index.php는이 - HTML 조각 :

<body> 
    <div id="wrapper"> 
    <div id="thumbnailPane"> 
     <img src="images/itemGuitar.jpg" width="301" height="105" alt="guitar" 
      title="itemGuitar" id="itemGuitar" onclick="getDetails(this)"/> 
     <img src="images/itemShades.jpg" alt="sunglasses" width="301" height="88" 
      title="itemShades" id="itemShades" onclick="getDetails(this)" /> 
     <img src="images/itemCowbell.jpg" alt="cowbell" width="301" height="126" 
      title="itemCowbell" id="itemCowbell" onclick="getDetails(this)" /> 
     <img src="images/itemHat.jpg" alt="hat" width="300" height="152" 
      title="itemHat" id="itemHat" onclick="getDetails(this)" /> 
    </div> 

    <div id="detailsPane"> 
     <img src="images/blank-detail.jpg" width="346" height="153" id="itemDetail" /> 
     <div id="description"></div> 
    </div> 

    </div> 
</body> 

Index.php는 - 스크립트 :

function getDetails(img){ 
    var title = img.title; 
    request = createRequest(); 
    if (request == null) { 
    alert("Unable to create request"); 
    return; 
    } 
    var url= "getDetails.php?ImageID=" + escape(title); 
    request.open("GET", url, true); 
    request.onreadystatechange = displayDetails; 
    request.send(null); 
} 
function displayDetails() { 
    if (request.readyState == 4) { 
    if (request.status == 200) { 
     detailDiv = document.getElementById("description"); 
     detailDiv.innerHTML = request.responseText; 
    }else{ 
     return; 
    } 
    }else{ 
    return; 
    } 
    request.send(null); 
} 

그리고 Index.php는 :

<?php 
$details = array (
    'itemGuitar' => "<p>Pete Townshend once played this guitar while his own axe was in the shop having bits of drumkit removed from it.</p>", 
    'itemShades' => "<p>Yoko Ono's sunglasses. While perhaps not valued much by Beatles fans, this pair is rumored to have been licked by John Lennon.</p>", 
    'itemCowbell' => "<p>Remember the famous \"more cowbell\" skit from Saturday Night Live? Well, this is the actual cowbell.</p>", 
    'itemHat' => "<p>Michael Jackson's hat, as worn in the \"Billie Jean\" video. Not really rock memorabilia, but it smells better than Slash's tophat.</p>" 
); 
if (isset($_REQUEST['ImageID'])){echo $details[$_REQUEST['ImageID']];} 
?> 

이 코드는 누군가가 미리보기 이미지를 클릭하면 해당 텍스트 설명이 페이지에 표시됩니다.

여기 내 질문입니다. 안에 getDetails.php 코드를 가져 오려고 시도했으며 var url"Index.php?ImageID="... 이되도록 getDetails 함수를 수정했습니다. 그렇게하면 다음과 같은 문제가 발생합니다. 함수는 배열의 텍스트 스 니펫을 표시하지 않습니다. 대신 전체 코드 (웹 페이지 등)를 재생 한 다음 맨 아래에 예상 텍스트 조각을 재생산합니다.

왜 그럴까요?

추신 : 이제 두 가지 답변 덕분에 문제가 해결되었습니다. 내가 "Index.php?ImageID="...이라는 URL을 부를 때, 나는 $_GET에 해당하는 부분을 로딩하는 것이 아닙니다. null이 아닌 $_GET 값을 가진 전체 페이지를로드하고 있습니다. 이렇게하면 왜 내가 추가하고 싶은 것들을위한 별도의 페이지가 필요한지 분명하게 알 수 있습니다.

+0

글쎄, 전체'index.php'에서 어떤 조건에 따라 나머지 컨텐츠를 반환하도록 지시하지 않으셨습니까? 당신은 그 안에 옮겨진 snippits 대신에 실제 전체'index.php'를 공유 할 수 있습니까? – David

답변

2

이미지 정보 요청을 인식하면 데이터가 유출되지만 나머지 스크립트는 실행되지 않습니다. 당신은 내가 이미지 정보에 대해 별도의 URL을 사용하는 것이 좋습니다 것, 또

if (isset($_REQUEST['ImageID'])){ 
    echo $details[$_REQUEST['ImageID']]; 
    exit; 
} 

처럼 뭔가

if (isset($_REQUEST['ImageID'])){echo $details[$_REQUEST['ImageID']];} 

을 변경할 수 있습니다. 결국 URL은 거기에있는 리소스를 설명해야합니다.

1

글쎄, 전체 페이지를 요청하고, Ajax가 성공했으며, 요청한대로 페이지를 사용자에게 반환하기 때문입니다.

Ajax는 동일한 페이지 요청을위한 것이 아닙니다. 처리 파일을 색인 파일과 별도로 보관하십시오.

관련 문제