Ajax 요청을 URL에 표시하는 방법
와 그 URL이 이 링크에서 URL 등의 할 수 . 여기서 다음과 같은 변수를 지정할 수 있습니다.#calendar=10_2010tabview=tab2
Check this for an exact example: 데모를 보려면 여기를 클릭하십시오.
필요한 링크 형식은 다음과 같습니다.
#calendar=10_2010&tabview=tab2
.calendar ★★★★★★★★★★★★★★★★★」tabview리로드 없이 한 페이지에서 여러 가지를 변경할 수 있습니다.
또는 http://www.wbhomes.com.au과 같은 다른 포맷은 제가 원하는 그대로입니다만, 첫 번째 포맷도 좋지만, 이것이 훨씬 더 아름답습니다.
http://wbhomes.com.au/#/propertiesforsale/houseandland/quinnsbeach-waterland1
요구 사항들
예를 들어 메일이나 URL 바에 쓰는 것만으로 어디서나 액세스 할 수 있습니다.
링크는 이력에 존재하기 때문에 뒤로 또는 앞으로 버튼을 누르면 페이지에 액세스해야 합니다.
페이지 새로 고침도 작동해야 합니다.
일부 자원:
예:
일부 튜토리얼:
발좀저저좀!만, 등은 하고 싶지 인 jquery API, jquery를 .Javascript/AJAX ★★★★★★★★★★★★★★★★★」PHP★★★★★★ 。
질문에 링크된 데모에서는 AJAX를 전혀 사용하지 않기 때문에 이 기능을 실현하는 것은 매우 간단합니다(혼합에 AJAX를 추가하기 시작하면 더 어려워집니다.나중에 설명하겠습니다).이 기능을 구현하려면 해시를 사용하도록 링크를 업그레이드한 다음 해시 변경 이벤트에 바인딩해야 합니다.유감스럽게도 해시 변경 이벤트는 브라우저 간 호환성이 없습니다.다만, 이용 가능한 「이력/리모트 플러그 인」이 다수 있습니다.수년간에 걸쳐, 우리가 선호하는 것은 jQuery History이며, 오픈 소스이며, 큰 서포트를 받아, 적극적으로 개발되고 있습니다:-).
Facebook, WBHomes, Balupton.com 등의 사이트에 AJAX 기능을 추가하면 심각한 문제가 발생하기 시작합니다. (지난 두 사이트에서는 제가 수석 설계자였기 때문에!)다음과 같은 문제가 있습니다.
- History 및 AJAX 기능을 사용하여 해시가 변경되었을 때 검출하기 위해 특정 내부 링크를 우아하고 쉽게 업그레이드하려면 어떻게 해야 합니까?다른 링크도 이전과 동일하게 작동합니다.
- 「www.yoursite.com/myapp/a/b/c」에서 「www.yoursite.com/myapp/#/a/b/c」로 리다이렉트 해, 필요한 3개의 리다이렉트를 가능한 한 부드럽게 실시할 수 있도록, 유저 익스피리언스를 유지하는 방법.
- AJAX를 사용하여 폼 값과 데이터를 제출하고 해시를 업데이트하는 방법 및 Javascript를 지원하지 않는 경우 그 반대도 마찬가지입니다.
- AJAX 요구에 필요한 페이지의 특정 영역을 검출하려면 어떻게 해야 합니까?서브 페이지가 올바른 페이지로 표시되도록 합니다.
- AJAX 상태가 변경될 때 페이지 제목을 변경하려면 어떻게 해야 합니까?기타 페이지 이외의 콘텐츠.
- AJAX 상태가 로드 및 변경되는 동안 인트로/아웃 효과를 제대로 발휘하려면 어떻게 해야 합니까?사용자가 어둠 속에 남겨지지 않도록 합니다.
- AJAX를 통해 로그인 할 때 사이드바 로그인 정보를 업데이트하려면 어떻게 해야 합니까?왼쪽 상단에 있는 로그인 버튼이 더 이상 거기에 있는 것을 원하지 않습니다.
- JS가 활성화되지 않은 사용자를 위해 웹 사이트를 계속 지원하는 방법은 무엇입니까?검색 엔진에서 인덱스를 생성할 수 있도록 적절하게 저하됩니다.
제가 알고 있는 오픈 소스와 신뢰성이 높은 프로젝트는 jQuery Ajaxy뿐입니다.이는 앞서 언급한 jQuery History 프로젝트를 효과적으로 확장한 것으로, 믹스에 AJAX 기능을 추가하여 이러한 어려운 문제를 해결할 수 있는 우아한 고급 인터페이스를 제공하므로 우리는 걱정할 필요가 없습니다.또한 앞에서 언급한 마지막 몇 개의 상용 사이트에서 사용된 솔루션이기도 합니다.
잘 부탁드립니다.더 궁금한 점이 있으시면 이 답변에 댓글을 달아주시면 바로 연락드리겠습니다:-)
이력 popState.HTML4는 HTML5 API(pushState, popState)를 합니다.hashchange기능성.History.js는 이제 jQuery History의 프로세서가 되어 HTML5 History API 및 옵션 브라우저 간 호환성을 제공합니다. hashchangeHTML4 html html htmlj.jAjaxy의 History.js를 조회합니다.
HTML5에 있는 onHashChange 이벤트나 HTML5를 완전히 지원하지 않는 브라우저의 "해시" 동작을 에뮬레이트하는 JavaScript 라이브러리를 사용하면 매우 쉽게 할 수 있다고 생각합니다.이러한 라이브러리 중 하나가 MooTools onhashchange일 수 있지만 다른 라이브러리도 많이 있습니다.
HTML 5 인식 브라우저 또는 동작을 에뮬레이트하는 라이브러리가 있는 경우 다음 명령을 사용합니다.
window.sys(#newsection");to change to something new from javascript, and/or a callback to that onHashChange event to intercept it, depending on your use case scenarios.
CorMVC Jquery Framework는 이와 같은 방식으로 이루어집니다.소스를 파헤쳐 로직을 얻을 수 있는 것은 오픈 소스입니다.
그리고 사실 그것은 꽤 간단하다.아래 동영상에서 크리에이터가 친절하게 말하고 있습니다.
http://www.bennadel.com/resources/jing/2009-12-21_0933.swf
PS 죄송합니다.두 번째 링크를 게시할 수 없습니다.bc 저는 새로운 사용자입니다.
스제바즈..:)
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;
}
이것은 대부분의 새로운 AJAX 개발자를 따돌리는 것입니다.그것은 해결하기에 다소 간단한 문제이긴 하다.
가장 먼저 필요한 것은 jquery.com에서 무료로 제공되는 jQuery 코어입니다.
다음은 Ben Alman의 jQuery hash change even 플러그인이 필요합니다.http://benalman.com/projects/jquery-hashchange-plugin/ html5 hashchange 이벤트를 지원하는 새로운 버전의 브라우저에서는 필요하지 않지만 이전 버전의 브라우저에서는 필요하게 됩니다.이 스크립트를 페이지에 포함시키는 것 이외에는 아무것도 할 필요가 없습니다.나머지는 이것으로 처리됩니다.
이제 링크에 대해 다음과 같은 쿼리 문자열 방식으로 링크를 구성해야 합니다.
<a href="user.php?q=/topic/article" class="dynlnk">Link Text/Image</a>
javascript가 꺼진 경우 페이지 링크로 이동하여 php로 처리할 수 있습니다.초글로벌 $_GET을 사용하여 쿼리 문자열을 해석하여 페이지 내용을 처리하기만 하면 됩니다.
이제 페이지의 javascript에서 링크가 해시 변경을 트리거하도록 해야 합니다.q=를 다음과 같은 #(으)로 대체하면 됩니다.
$(".dynlnk").each(function(){
$(this).attr("href", $(this).attr("href").replace("?q=", "#"));
});
이제 링크가 해시변경을 트리거합니다.이제 남은 것은 해시변경을 어떤 처리를 하는 함수에 바인드하는 것뿐입니다.이것은 다음과 같이 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("/");
});
이제 Ajax와 콘텐츠를 처리하기 위한 코드를 추가합니다.
이제 당신은 페이지가 처음에 해시와 함께 로드되었을 때 해시 변경을 트리거하기 위해 javascript의 마지막 비트만 필요합니다.그래서 당신은 페이지가 로드될 때 윈도우 트리거 함수를 호출하기만 하면 됩니다.
$(window).trigger( 'hashchange' );
이것이 충분히 명확해졌으면 좋겠지만, 그렇지 않다면 주저하지 말고 문의해 주십시오.
해시 링크를 사용하면 페이지를 새로고침하는 대신 북마크 가능/공유 가능 링크가 JavaScript 코드를 트리거할 수 있습니다.Ben Almans jQuery 해시 변경 이벤트를 통해 이벤트 핸들러를 해시 변경 이벤트에 바인딩할 수 있습니다. 이 플러그인은 일반적으로 이를 지원하지 않는 오래된 브라우저에서 작동합니다.해시 변경에 바인드된 이벤트핸들러는, 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이 변환됩니다.
mysite/#company.page=mysite.color=빨간색
다음 JavaScript 개체로:
오브젝트 {company=company, page="company", color="red"}
선택한 요소에서 jQuery의 show() 또는 hide() 함수를 실행하는 것만으로 충분합니다.
이것은 jQuery 이외의 JavaScript로 변환될 수 있지만, 그러면 Ben Alman이 제공하는 기능을 잃게 됩니다.이것은 휴대용 솔루션에 있어서 매우 중요합니다.
당신이 원하는 것은 에서 역사를 지원하는 방법입니다.AJAX기존의 많은 라이브러리를 사용하여 실행할 수 있습니다.역사에 관한 YUI 3페이지를 읽는 것을 추천합니다.
언급URL : https://stackoverflow.com/questions/3205900/how-to-show-ajax-requests-in-url
'it-source' 카테고리의 다른 글
| 드라이버 클래스 com.mysql.jdbc를 로드하지 못했습니다.드라이버 (0) | 2023.02.25 |
|---|---|
| iOS의 NSDictionary에서 JSON 문자열 생성 (0) | 2023.02.25 |
| 리액트 라우터를 사용한 여러 파라미터 (0) | 2023.02.25 |
| 리액트 테스트 라이브러리를 사용하여 요소 내부에 텍스트 확인 (0) | 2023.02.22 |
| 대응: 컴포넌트의 컨스트럭터를 한 번만 호출하는 이유는 무엇입니까? (0) | 2023.02.22 |