URL에 Ajax 요청을 표시하는 방법은 무엇입니까?

URL에 Ajax 요청을 표시하는 방법은 무엇입니까?

내가 원하는 것은 페이지의 일부를 변경하는 링크와 동적 인 URL을 갖는 것입니다. # calendar = 10_2010tabview = tab2와 같은 변수를 지정할 수 있습니다.

정확한 예를 보려면 다음을 확인하십시오. 정확한 데모는 여기를 클릭하십시오.

링크 형식은 다음과 같습니다.

# calendar = 10_2010 & tabview = tab2

내가 로딩하지 않고 단일 페이지에서 여러 가지를 바꿀 수 있도록 캘린더 및 탭뷰와 같은 링크에 변수가 있어야합니다.

또는 http://www.wbhomes.com.au와 같은 또 다른 형식, 이것은 내가 원하는 것입니다. 그러나 첫 번째 형식도 좋지만이 형식은 훨씬 더 아름답습니다.

요구 사항

일부 자료 :

예 :

일부 자습서 :

제발 도와주세요! 이 작업을 수행하는 솔루션을 찾지 못했지만 jquery 나 API 또는 라이브러리를 사용하고 싶지 않습니다. Javascript / AJAX 및 PHP 스크립트를 사용하고 싶습니다.

해결법

1. ==============================

   1.귀하의 질문에 링크되어있는 데모의 경우, 실제로 AJAX를 사용하지 않으므로이 기능을 실제로 구현하는 것이 매우 간단합니다 (AJAX를 믹스에 추가하기 시작하면 나중에 설명하기가 더 어려워집니다). 당신이 그 기능을 달성하기 위해; 해시를 사용하도록 링크를 업그레이드 한 다음 hashchange 이벤트에 바인딩하십시오. 안타깝게도 hashchange 이벤트는 브라우저 간 호환이되지 않습니다. 운 좋게도 많은 "히스토리 / 원격 플러그인"이 있습니다. 지난 수년간 우리가 선호했던 jQuery History, 오픈 소스, 훌륭한 지원 및 적극적으로 개발 된 것들이 있습니다. -).

   귀하의 질문에 링크되어있는 데모의 경우, 실제로 AJAX를 사용하지 않으므로이 기능을 실제로 구현하는 것이 매우 간단합니다 (AJAX를 믹스에 추가하기 시작하면 나중에 설명하기가 더 어려워집니다). 당신이 그 기능을 달성하기 위해; 해시를 사용하도록 링크를 업그레이드 한 다음 hashchange 이벤트에 바인딩하십시오. 안타깝게도 hashchange 이벤트는 브라우저 간 호환이되지 않습니다. 운 좋게도 많은 "히스토리 / 원격 플러그인"이 있습니다. 지난 수년간 우리가 선호했던 jQuery History, 오픈 소스, 훌륭한 지원 및 적극적으로 개발 된 것들이 있습니다. -).

   페이스 북, WBHomes 및 Balupton.com과 같은 사이트와 같은 AJAX 기능을 믹스에 추가하면 심각한 일련의 심각한 문제에 직면하게됩니다. (나는 지난 두 사이트의 수석 건축가였습니다!). 이러한 문제 중 일부는 다음과 같습니다.

   언급 된 극도로 어려운 문제를 해결하려고 시도한 유일한 오픈 소스 및 신뢰할 수있는 프로젝트는 jQuery Ajaxy로 입증되었습니다. 사실 jQuery History 프로젝트의 확장으로서, AJAX 기능을 믹스에 추가하여 멋진 어려움을 해결할 수있는 고급 인터페이스를 제공하므로 걱정할 필요가 없습니다. 또한 앞서 언급 한 마지막 몇 상업 사이트에서 사용 된 솔루션입니다.

   행운을 빌어 요, 더 이상의 질문이 있으면이 답변에 대한 의견을 게시하면됩니다.

   업데이트 : HTML5 해시 기능을 사용하지 않는 HTML5 기록 API (pushState, popState)가 있습니다. 이제 History.js는 jQuery History의 성공자이며 HTML5 기록 API에 대한 교차 브라우저 호환성과 HTML4 브라우저에 대한 선택적 해시 변경 대체 기능을 제공합니다. jQuery Ajaxy가 History.js 용으로 업그레이드 될 예정입니다.

2. ==============================

   2.HTML5에있는 onHashChange 이벤트를 사용하거나 HTML 5가 지원되지 않는 브라우저에서 "해시"동작을 에뮬레이트하는 JavaScript 라이브러리를 사용하면 매우 쉽게 처리 할 수 ​​있다고 생각합니다. 그러한 라이브러리 중 하나는 MooTools onhashchange 일 수도 있지만 많은 다른 것들도 있습니다.

   HTML5에있는 onHashChange 이벤트를 사용하거나 HTML 5가 지원되지 않는 브라우저에서 "해시"동작을 에뮬레이트하는 JavaScript 라이브러리를 사용하면 매우 쉽게 처리 할 수 ​​있다고 생각합니다. 그러한 라이브러리 중 하나는 MooTools onhashchange 일 수도 있지만 많은 다른 것들도 있습니다.

   HTML 5를 인식하는 브라우저 또는 동작을 에뮬레이션하는 라이브러리가있는 경우보다 : window.sethash ( "# newsection"); 유스 케이스 시나리오에 따라 자바 스크립트에서 새로운 무언가로 변경하고, / 또는 onHashChange 이벤트 콜백으로 가로 챌 수 있습니다.

3. ==============================

   3.코어 MVC Jquery Framework는 이러한 방식으로 수행됩니다. 오픈 소스이므로 소스를 파고 논리를 가져올 수 있습니다.

   코어 MVC Jquery Framework는 이러한 방식으로 수행됩니다. 오픈 소스이므로 소스를 파고 논리를 가져올 수 있습니다.

   그리고 실제로 그것은 꽤 솔직합니다. 제작자는이 비디오에서 다음과 같이 멋지게 이야기합니다.

   http://www.bennadel.com/resources/jing/2009-12-21_0933.swf

   추신 : 미안 해요 두 번째 링크를 게시 할 수 없습니다. bc 저는 새로운 사용자입니다.

4. ==============================

   4.안녕 .. .. :)

   안녕 .. .. :)

   HTML

   <a href="/bye.php?user=abc&page=messages" 
      onclick="return goToWithAjax(this);">bye</a> 
   

   자바 스크립트

   function goToWithAjax(hash) {
     hash = hash.href ? hash.getAttribute("href", 2) : hash;
     ajax( hash, function( response ) {
       document.getElementById("content").innerHTML = response;
     });
     hash = ("#!/" + hash).replace("//","/");
     window.location.hash = hash;
     return false;
   }
   
   //////////////////////////////////////////////////////////////////////////////
   
   function getXmlHttpObject() {
       var xmlHttp;
       try {
           xmlHttp = new XMLHttpRequest();
       } catch (e) {
           try {
               xmlHttp = new ActiveXObject("Msxml2.XMLHTTP");
           } catch (e) {
               xmlHttp = new ActiveXObject("Microsoft.XMLHTTP");
           }
       }
       return xmlHttp;
   }
   
   function ajax(url, onSuccess, onError) {
       var xmlHttp = getXmlHttpObject();
       xmlHttp.onreadystatechange = function () {
           if (this.readyState == 4) {
               // onError
               if (this.status != 200) {
                   if (typeof onError == 'function') {
                       onError(this.responseText);
                   }
               }
               // onSuccess
               else if (typeof onSuccess == 'function') {
                   onSuccess(this.responseText);
               }
           }
       };
       xmlHttp.open("GET", url, true);
       xmlHttp.send(null);
       return xmlHttp;
   }​
   

5. ==============================

   5.이것은 AJAXian 개발자 중 가장 새로운 개발자를 제외한 것입니다. 해결하는 것이 다소 간단한 문제이지만 말입니다.

   이것은 AJAXian 개발자 중 가장 새로운 개발자를 제외한 것입니다. 해결하는 것이 다소 간단한 문제이지만 말입니다.

   제일 먼저 jquery.com에서 무료로 제공되는 jQuery 코어가 필요하다.

   그 다음엔 Ben Alman이 만든 jQuery 해시 변경 플러그인이 필요합니다. http://benalman.com/projects/jquery-hashchange-plugin/ html5를 지원하는 최신 버전의 브라우저에는이 옵션이 필요하지 않습니다. hashchange 이벤트를 사용하지만 이전 버전의 브라우저를 사용하게됩니다. 당신은 아무것도하지 않아도되지만이 스크립트를 페이지에 포함 시키면 나머지는 처리합니다.

   이제 귀하의 링크를 위해 다음과 같이 쿼리 문자열 형식으로 구성해야합니다.

   <a href="user.php?q=/topic/article" class="dynlnk">Link Text/Image</a>
   

   이제 페이지로 이동하는 링크가 있고 자바 스크립트가 꺼져있는 경우 PHP에서 처리 할 수 ​​있습니다. super global $ _GET을 사용하고 쿼리 문자열을 구문 분석하여 페이지 내용을 처리하면됩니다.

   이제 페이지의 자바 스크립트에서 링크가 해시 변경을 트리거해야합니다. ? q =를 #와 같이 바꾸면됩니다.

   $(".dynlnk").each(function(){
       $(this).attr("href", $(this).attr("href").replace("?q=", "#"));
   });
   

   이제 귀하의 링크가 hashchange를 트리거합니다. 할 일은 hashchange를 무언가를하는 함수에 바인드하는 것입니다. 이것은 jQuery로 다음과 같이 매우 간단하게 할 수 있습니다 :

   $(window).bind( 'hashchange', function(e){
   
       //this splits the part after the hash so you can handle the parts individually.
       //to handle them as one just use location.hash
       pageparts = location.hash.split("/");
   
   });
   

   이제 아약스와 컨텐트를 처리하기 위해 코드를 추가하십시오.

   이제 페이지가로드 될 때 윈도우 트리거 함수를 호출하기 위해 페이지가 해시로로드 된 경우를 대비하여 hashchange를 트리거하는 자바 스크립트의 마지막 비트가 필요합니다.

   $(window).trigger( 'hashchange' );
   

   바라기를 바란다면 충분합니다. 그렇지 않다면 저에게 연락하여 더 많은 질문을 주저하지 마십시오.

6. ==============================

   6.해시 링크를 사용하면 페이지를 다시로드하는 대신 책갈피 / 공유 가능 링크에서 JavaScript 코드를 트리거 할 수 있습니다. Ben Almans의 jQuery hashchange 이벤트를 사용하면 이벤트 핸들러를 hashchange 이벤트에 바인딩 할 수 있습니다.이 플러그인은 일반적으로이를 지원하지 않는 구형 브라우저에서 작동합니다. hashchange에 바인드 된 이벤트 핸들러는 url의 해시 부분을 읽고 모든 함수를 호출 할 수 있습니다.

   해시 링크를 사용하면 페이지를 다시로드하는 대신 책갈피 / 공유 가능 링크에서 JavaScript 코드를 트리거 할 수 있습니다. Ben Almans의 jQuery hashchange 이벤트를 사용하면 이벤트 핸들러를 hashchange 이벤트에 바인딩 할 수 있습니다.이 플러그인은 일반적으로이를 지원하지 않는 구형 브라우저에서 작동합니다. hashchange에 바인드 된 이벤트 핸들러는 url의 해시 부분을 읽고 모든 함수를 호출 할 수 있습니다.

   // register event handler
   function bindHashchange() {
   
       $(window).bind('hashchange', function(event) {
           event.preventDefault();
           var label = location.hash.substring(1);
           handleLabel(label);
       });
   
       // trigger event so handler will be run when page is opened first time
       // otherwise handler will only run when clicking on hash links
       $(window).trigger('hashchange');
   }
   
   // read and handle hash part of url
   function handleLabel(label) {
   
       if ( label.length > 0 ) {
           // using label from url
           switchPage(label);
       } else {
           // use the default label, if no hash link was present
           switchPage('start');
       }
   }
   
   // in this case, load hidden <div>'s into a <div id="content">
   function switchPage(label) {
       if ( label == 'start ) {
           $('div#content').html($('div#start'));
       } else if ( label == 'some_other_page' ) {
           // do something else
       }
   }
   

   이 다른 이벤트 처리기는 동일한 URL에서 점 ( '.')으로 구분 된 2 개의 인수를 처리 할 수 ​​있습니다.

   function processHash() {
   
       var str = location.hash.substring(1);
       var pos = $.inArray('.', str);
   
       var label = '';
       var arg = '';
   
       if ( pos > -1 ) {
           label = str.substring(0, pos);
       } else {
           label = str.substring(0);
       }
   
       if ( pos > 1 ) {
           arg = str.substring(pos+1);
       }
   
       if ( label.length == 0 ) {
           // the default page to open of label is empty
           loadContent('start');
       } else {
           // load page, and pass an argument
           loadContent(label, arg);
       }
   }
   

   정규 표현식을 사용하면 모든 문자 조합을 파싱 할 수 있습니다.

   var registry = {};
   
   // split on character '.'
   var args = label.split(/\./g);
   
   for ( i in args ) {
       var arg = args[i];
   
       // split on character '='
       var temp = arg.split('=');
       var name = temp[0];
       var value = temp[1];
   
       // store argument in registry
       registry[name] = value;
   }
   // registry is loaded, ready to run application that depends on arguments
   

   그러면 URL이 변환됩니다.

   다음 자바 스크립트 개체에

   그런 다음 선택한 요소에서 jQuery의 show () 또는 hide () 함수를 실행하는 것만으로 문제가됩니다.

   이것은 비 jQuery JavaScript로 변형 될 수 있지만 Ben Alman이 제공하는 기능을 잃어 버릴 수 있습니다. 이는 휴대용 솔루션에 중요합니다.

7. ==============================

   7.당신이 원하는 것은 이미 많은 기존 라이브러리를 사용하여 수행 할 수있는 AJAX의 히스토리를 지원하는 방법입니다. 나는 역사에 유이 3 페이지를 읽는 것이 좋습니다 것입니다.

   당신이 원하는 것은 이미 많은 기존 라이브러리를 사용하여 수행 할 수있는 AJAX의 히스토리를 지원하는 방법입니다. 나는 역사에 유이 3 페이지를 읽는 것이 좋습니다 것입니다.

from https://stackoverflow.com/questions/3205900/how-to-show-ajax-requests-in-url by cc-by-sa and MIT license