URL로 간다면 브라우저를 풀 페이지로 리프레시하지 않는 방법은?

Question

나는 사용자가 클릭 할 때 전체 페이지를 새로 고치지 않도록 브라우저에 요청하는 방법인지 이해하려고 시도했다. 해시 추가 메소드가 표시됨 - 해시가없는 링크로 작업하는 또 다른 메소드가 필요합니다. 헤더를 보내야합니까? 아니면 다른 것?

모든 페이지가 아닌 HTML (또는 특수한 js 명령)의 일부만 리턴하는 GET 쿼리를 처리하고 AJAX 스타일로 처리하려고합니다.

<span style="cursor:pointer;" onclick="loadPage('mypagename');">My Link</span> 

기능은 다음과 같다 : :

Answer 1

jquery를 통해 링크를 완화 할 수 있습니다. 이런 식으로 뭔가 :

$('a.ajax').click(function(ev){ 
    ev.preventDefault(); 
    var target=$(this).attr('data-target'); 
    var url=$(this).attr('href'); 
    $(target).load(url+' '+target); 
} 

이 다음과 같은 HTML과 전도에 사용할 수 있습니다

<div id="output"> 
Hello <a href="world.html" class="ajax" data-target="#output">World</a> 
<div> 

당신이 필요 world.html 내부

은이합니다 : 이론이에서

<div id="output"> 
    Foo bar baz boo 
</div> 

을 "세계"파일의 내용을 첫 번째 파일 안의 div에로드해야하지만 시도하지는 않았습니다. 나는 그것이 당신이 필요로하는 것이라고 생각합니다. 일반 링크가 여전히 존재하기 때문에, Google은이 바이어스 아약스를 적절하게 색인화하여 사용자가 페이지 변경의 일부를 보게 될 것입니다.

Answer 2

당신은 이런 일을 '가짜'링크를 만들 수 해시를 사용하지 않고 URL을 변경

는

function loadPage(pageName){ 
    // do ajax call here using pageName var 
} 

Answer 3

HTML5의 역사 달성 할 수 API : http://html5demos.com/history

이전 버전의 브라우저에서는 지원되지 않으므로 항상 대체해야합니다.

Answer 4

사용자가 URL이있는 하이퍼 링크를 클릭 할 때 탐색을 방지 할 수 없습니다. 해시 값을 사용하여 탐색하거나 하이퍼 링크에서 JavaScript를 호출하는 것은 일반적으로 단일 페이지 내에 탐색을 추가하는 방법입니다.

이 방법으로 설계된 기존 페이지를으로 변환하려는 경우 하이퍼 링크를 수정하여 JavaScript가 Ajax를 호출하도록 수정해야합니다. 예를 들면 다음과 같습니다.

var links = document.getElementsByTagName('a'); 
for (var i = 0; i < links.length; i++) { 

    var oldUrl = links[i].getAttribute('href'); 
    links[i].setAttribute('href', 'javascript:void(0)'); 

    links[i].onclick = (function(url) { 
     return function() { 
      // Then you can do your AJAX code here 
     } 
    })(oldUrl); 
} 

나는 이런 식으로하지 말고 AJAX 디자인을 염두에두고 페이지를 작성하는 것이 좋습니다.