문제는 코드 위

-4

<html> 
<head> 

    <script src="http://ajax.googleapis.com/ajax/libs/jquery/1.10.1/jquery.min.js"> 
    </script> 
    <script type="text/javascript"> 
    $(document).ready(function() { 
     $('#page1').click(function() { 
      $('#content').load('one.html'); 
      return false; 
     }); 
     $('#page2').click(function() { 
      $('#content').load('two.html'); 
      return false; 
     });  
    }); 
    </script> 
</head> 
<body> 

<a href="#" id="page1">page 1</a> | <a href="#" id="page2">page 2</a> 
<div id="content"> 
</div> 
</body> 
</html>

here 문제는 코드 위

질문에서 가져옵니다? 나는 AJAX (Asynchronous JavaScript and XML)에 대해서만 알고 있었고, 위 코드를 비아 잭스로 바꿀 수 있었기 때문에 아약스 코드와 비 아약스 코드의 차이점을 알 수 있었 을까?

출처

2013-07-06 user2294256

내부적으로'ajax' 호출을 사용합니다 .. – Red

http://api.jquery.com/load/에서 어떤 일이 벌어지고 있는지 더 잘 알 수 있습니다. –

AJAX는 비동기 적으로 (페이지가로드 된 후) .load()이 정확하게 수행합니다. 이것이 바로 Ajax로 간주되는 이유입니다. 나는 심지어 뒤에서 .ajax()을 사용한다고 생각한다.

아약스를 피하려면 두 파일을 사이트의 컨테이너에로드하고 jquery를 사용하여 가시성을 변경하는 것이 좋습니다.

이

HTML :

<div id="content1" style="display:none;"><?php include 'one.html';?></div> 
<div id="content2" style="display:none;"><?php include 'two.html';?></div>

이 당연히 동 기적으로 HTML 페이지의 내용을로드합니다 (다른 서버 측 LANG을 사용할 수 있지만 PHP를 사용하여) 예를 들어

. 비동기 호출을 피하려면 HTML 페이지의 모든 데이터를 포함해야합니다.

jQuery를 :

$(document).ready(function() { 
     $('#page1').click(function() { 
      $('#content1').show(); 
      $('#content2').hide(); 
     }); 
     $('#page2').click(function() { 
      $('#content2').show(); 
      $('#content1').hide(); 
     });  
    });

내가 차이에 더 정교한 것입니다. AJAX를 사용할 때 모든 데이터를 고급 페이지에로드 할 필요가 없습니다. 예를 들면 one.html과 two.html은 매우 긴 HTML 파일을 포함하고 있습니다. 각각 500kb라고 가정 해 봅시다. 내가 제공 한 비 AJAX 메소드를 사용한다면, 사용자는 페이지를보기 위해 둘 다 다운로드 될 때까지 기다려야합니다 (1MB 다운로드). 질문에서 쓴 것처럼 코드를 사용하면 내용이 아닌 페이지의 구조 만로드하기 때문에 페이지 로딩 시간이 실제로 매우 낮습니다. 사용자가 버튼 중 하나를 클릭하면 관련 파일 즉, 500kb를로드하고 페이지가로드되는 동안 멋진 "로드 중"애니메이션을 표시 할 수 있습니다. 본질적으로 이것은 주요 차이점입니다 - 전체 데이터를 고급으로로드하거나 필요할 때 관련 데이터 만로드하십시오.

팁에서 코드를 향상시키는 팁. 사용자가 .load() 페이지를 방문한 후 데이터를 어딘가에 저장하면 사용자가 동일한 버튼을 다시 클릭하면 다시 .load() 번만 입력하지 않고 저장된 사본을 사용할 수 있습니다.

출처

2013-07-06 04:32:11

귀하의 설명에 감사드립니다. 내가 작성한 코드를 써 보았습니다. 하지만 아약스 코드 (원래 코드)와 비 아약스 코드 (예 : U)의 차이점은 무엇입니까? 속도? 나는 그 차이를 말할 수 없다. 그래서 더 설명 할 수 있을까요? 덕분에 – user2294256

나는 더 자세한 exlanation을 추가했습니다. 희망이 도움이됩니다. –

문제는 코드 위

답변

관련 문제