2009-09-24 2 views
2

로드해야하는 데이터 로딩에만 집중하는 웹 사이트를 구축합니다. 여기 예제를 작성했으며 wegpage를 빌드하는 좋은 방법인지 알고 싶습니다. 그런 사이트를 구축 할 때 몇 가지 문제가 있습니다 (예 :아약스 기반 웹 페이지 - 좋은 방법?

index.html을

: 그래서 여기 (내용이기 때문에 기본적으로 정말 연결되지 않음)
  • 역사 SEO 앞뒤로
  • 가는

    • 즐겨 찾기
    • 은 예입니다
      <html> 
      <head> 
      <title>Somebodys Website</title> 
          <!-- JavaScript --> 
          <script type="text/javascript" src="jquery-1.3.2.min.js"></script> 
          <script type="text/javascript" src="pagecode.js"></script> 
      </head> 
      <body> 
      <div id="navigation"> 
      <ul> 
          <li><a href="#" class="nav" id="link_Welcome">Welcome</a></li> 
          <li><a href="#" class="nav" id="link_Page1">Page1</a></li> 
      </ul> 
      </div> 
      <div id="content"> 
      </div> 
      </body> 
      </html> 
      

      pagecode.js

      var http = null; 
      $(document).ready(function() 
      { 
      // create XMLHttpRequest 
      try { 
          http = new XMLHttpRequest(); 
      } 
      catch(e){ 
          try{ 
           http = new ActiveXObject("MS2XML.XMLHTTP"); 
          } 
          catch(e){ 
           http = new ActiveXObject("Microsoft.XMLHTTP"); 
          } 
      } 
      // set navigation click events 
      $('.nav').click(function(e) 
          { 
          loadPage(e); 
          }); 
      }); 
      
      function loadPage(e){ 
          // e.g. "link_Welcome" becomes "Welcome.html" 
          var page = e.currentTarget.id.slice(5) + ".html"; 
      
          http.open("POST", page); 
          http.setRequestHeader("Content-Type", "application/x-www-form-urlencoded"); 
          http.setRequestHeader("Connection", "close"); 
          http.onreadystatechange = function(){changeContent(e);}; 
          http.send(null); 
      } 
      
      function changeContent(e){ 
          if(http.readyState == 4){ 
          // load page 
          var response = http.responseText; 
          $('#content')[0].innerHTML = response; 
          } 
      } 
      

      당신이 볼 수 있듯이 그래서, 탐색 섹션에서 링크의 ID를 기반으로 내용을로드하고있어

      <b>Welcome</b> 
      <br /> 
      To this website.... 
      

      welcome.html 페이지

      . 그래서 "Page1"네비게이션 아이템을 링크 가능하게 만들려면, 그 안에 몇 가지 내용이 담긴 "Page1.html"파일을 만들어야합니다.

      웹 페이지의 데이터를로드하는이 방법이 잘못 되었습니까? 그렇다면 더 좋은 방법은 무엇일까요? 시간에 대한

      감사

      편집 :

      이것은 단지 아주 짧은 예를하고 있었고, 난 (추가로)는 전체 페이지를 제공하는 것은 여전히 ​​가능하다 자바 스크립트를 사용할 수있는 사용자를 위해 그런 말을하고 싶습니다 정적 형태로. 예 :

      <li><a href="static/Welcome.html" class="nav" id="link_Welcome">Welcome</a></li> 
      

      이 welcome.html 페이지는 기본 index.html 파일의 모든 오버 헤드가 포함됩니다. 이렇게하면 페이지의 버전을 사용하는 아약스는 특별한 기능이 될 것입니다. 그렇지 않습니까?

    +3

    간단히 말해서, Ajax를 사용하여 전체 웹 사이트를 구축하는 것은 매우 잘못된 일입니다. 전통적인 방법은 여전히 ​​최고입니다;) – Duroth

    답변

    5

    아니요, 좋지 않습니다.

    Ajax는 가벼운 터치로 가장 잘 사용되는 도구입니다.

    프레임을 다시 사용하면 단순히 고아 페이지의 문제를 검색 엔진 (및 JS를 지원하지 않거나 비활성화 된 다른 에이전트)에 대한 완전한 보이지 않는 것으로 대체한다는 점을 제외하고는 모두 the problems of frames을 다시 만듭니다.

    이렇게하면 페이지의 버전을 사용하는 아약스가 추가 기능이 될 것입니다. 그렇지 않습니까?

    번호 사용자 통지하지 않습니다, 당신은 등 북마크, linksharing을

    +0

    "아니야?" 어떤 질문에 대답하고 있습니까? –

    +0

    음. 제목에있는 것. 나는 그것이 명백했다라고 생각했다. – Quentin

    +0

    아, 제 사과. OP에는 두 가지 질문이 있습니다. 1. "좋은 방법?" (제목에서); 2. "웹 페이지의 데이터를로드하는 방식이 잘못 되었습니까?" (몸에). 나는 이전을 놓쳤다. –

    0

    어때요? (또는 어떻게 호출해야합니까?)

    사용자가 어떤 이유로 든 자바 스크립트를 사용하지 않으면 Welcome와 Page1이있는 목록 만 표시됩니다.

    5

    AJAX (또는 그 문제에 대해서는 자바 스크립트)를 사용하는 것이 잘못되었습니다 (다른 문제 인 ajax를 사용하는 방법을 배우지 않는 한)은 잘못 사용했습니다.

    자바 스크립트를 사용하는 것이 좋으며 (대부분 브라우저 창 내부에 맞춤형 사용자 인터페이스를 구축하는 경우) AJAX가 실제로 빛나는 경우가 있습니다. 하지만 자바 스크립트로 정적 웹 페이지를로드하는 것은 매우입니다. 먼저 JS를 실행할 수있는 브라우저로 자신을 묶습니다. 둘째로 서버 및 클라이언트 측의로드가 증가합니다.

    +0

    사용자 인터페이스 지점은 정말 좋습니다. 나는 여전히 다른 프론트 엔드에서 눈에 띄지 않게 그것을 구현하는 방법이 있다고 생각한다. – Daff

    0

    이 네 잘못이야 휴식. JavaScript가없는 사용자는 어떻습니까? 왜 이런 종류의 일을 서버 측에서하지 않습니까? 단일 파일 가져 오기에서 다운로드 할 수 있도록 서버 측 파일을 포함하는 대신 여러 HTTP 요청의 비용을 지불하는 이유는 무엇입니까? 왜 자바 스크립트를 사용할 수없는 고객이 내 물건을 볼 수 없으면서 비용을 지불해야합니까? (Google의 거미는이 접근 방식으로 소외되는 중요한 사용자입니다.) 왜? 왜?

    +0

    글쎄,이 기본 개념은 필요한 것만로드하는 것이 었습니다. 이것이 문제가 될 것이라는 것을 알고 있었지만 대부분의 경우 해결 방법이 있습니다. js가없는 사용자 - 페이지의 정적 백업 버전을 제공합니다 (검색 엔진 부분도 해결 함) – gabtub

    1

    더 기술적 인 세부 사항 :

    함수 loadPage이 jQuery를 사용하여 다시 작성해야

    : $ 게시물을(). 이것은 테스트되지 않은 임의의 샷입니다.

    function loadPage(e){ 
        // e.g. "link_Welcome" becomes "Welcome.html" 
    
        var page = e.currentTarget.id.slice(5) + ".html"; 
        $.post(page, null, function(response){ 
         $('#content')[0].innerHTML = response; 
        }); 
    } 
    

    경고 할 것이므로이 기능을 약간 잘못 할 수 있습니다. 하지만 ... dud, 당신은 이미 jQuery를 사용하고 있습니다 - 지금 그것을 악용하십시오! :)

    +0

    감사합니다. 감사합니다. – gabtub

    +0

    게시 이유는 무엇입니까? 간단한 "get"에 대한 잘못된 점은 무엇입니까? – elcuco

    +0

    완성도를 위해 http://docs.jquery.com/Ajax를 참조하십시오. – Samuel

    1

    웹 사이트에서 AJAX 패턴을 구현하려는 경우 먼저 질문해야합니다. 왜? AJAX를 구현해야하는 몇 가지 좋은 이유가 있지만 달성하려는 대상에 따라 몇 가지 나쁜 이유가 있습니다.

    예를 들어, 귀하의 웹 사이트가 페이스 북과 같은 경우, 사용자가 채팅에서 친구의 응답을 즉시 볼 수있는 리치 사용자 인터페이스를 제공하려는 경우, 사용자가 무언가를 벽에 게시하거나 사진, 전체 페이지를 새로 고칠 필요없이, AJAX는 훌륭합니다!

    그러나 주요 콘텐츠 영역이 AJAX를 사용하여 최상위 메뉴 항목마다 변경되는 웹 사이트를 만드는 경우 이는 여러 가지 이유로 나쁜 생각입니다. 첫째, 내가 매우 중요하다고 생각하는 것은, SEO (검색 엔진 최적화)는 으로 최적화되어 있지 않습니다. 검색 엔진 크롤러는 앵커 태그의 onclick 이벤트를 통해로드되지 않는 한 AJAX 요청 을 따르지 않습니다. 궁극적으로이 예에서 은 풍부한 경험치에서 가치를 얻지 못하고 잠재적 인 시청자 수는 입니다.

    두 번째로 사용자는 AJAX 호출에 매핑 할 URL을 구문 분석하는 스마트 방법을 구현하지 않는 한 페이지를 북마크하는 데 어려움을 겪습니다.

    세 번째로 사용자는 내역 관리를 위해 사용자 지정 클라이언트 측 메커니즘을 구현하지 않은 경우 뒤로 및 앞으로 단추을 사용하여 올바르게 탐색하는 데 문제가 있습니다.

    마지막으로, 각 브라우저는 자바 스크립트를 다르게 해석하고, 에 더 많은 자바 스크립트 당신은, 당신이 프레임 워크를 구현하지 않는 크로스 브라우저 호환성을 잃고 거기에있는 잠재적 쓰기 그러한 jQuery를, 도장, EXT, 또는 핸들 Mootools의 등 대부분 당신을 위해.

    +1

    저는 일반 사용자, 시각 장애인, 귀가 먹은 사람, 손가락이없는 사람, 더 중요한 것은 읽을 수있는 사이트를 만드는 데 신념을 갖고 있습니다. ** 로봇 **. AJAX는 주로 사용자 환경을 개선하고 페이지로드 시간을 줄이는데 사용됩니다. DATA 또는 CONTENT를로드 할 수있는 링크에는 검색 엔진에서 읽을 수있는 정적 버전이 있어야합니다. IE의 제품 페이지에서 "다음"링크가 콘텐츠를 동적으로로드하는 경우 ... 자바 스크립트 호환 브라우저 (읽기 : 로봇)를 사용하는 사용자가 귀하의 페이지를 조회 할 때로드 할 정적 링크가 있어야합니다 그 데이터는 AJAXy 요청이 아닙니다. – snicker

    +0

    멋진 글쓰기. 공유 해줘서 고마워, snicker. – pixelbobby

    1

    gabtub 북마크, Back/Forward 버튼 (일반적으로 내비게이션 내비게이션), JavaScript 비활성화 (사이트 중복 방지), 액세스 가능 ...으로 작업하는 AJAX 집중 웹 사이트 SEO 호환 가능 ...

    하나의 문제가 있습니다. 서버 중심으로 돌아 가야합니다.

    일부 "하우투"here을 얻을 수 있습니다. 그리고 ItsNat을 살펴보십시오.

    관련 문제