JqueryローカルリフレッシュプラグインPjax
1731 ワード
PjaxはAjax+pushStateのパッケージで、Webページのajaxロードを実現することができ、WebページのURLを変更してもWebページ全体自体をリフレッシュすることはなく、Webページのほとんどのコントロールとプラグインを再ロードすることを避けることができます.PushStateの機能は、具体的にはurlを変更してページがジャンプせず、履歴に格納されます.
GitHub転送ゲート:https://github.com/defunkt/jquery-pjax/blob/master/jquery.pjax.js
pjax実行プロセス: 1.イベントをトリガーした後、関連文または関数を実行し、ajaxがサーバにデータを要求するようにパッケージする. 2.要求にX-PJAX IDを添付すると、サーバはContainerの内容のみを返す: 3.Containerの内容を更新します. 4.PushStateメソッドは、現在のページのアドレス、タイトルなどの情報をブラウザ履歴 に格納する. 5.replaceStateを使用してブラウザアドレスを更新します.function locationReplace(url) { window.history.replaceState(null, "", pjax.state.url) window.location.replace(url) }
window.history.pushState(state, title, url);
GitHub転送ゲート:https://github.com/defunkt/jquery-pjax/blob/master/jquery.pjax.js
pjax実行プロセス:
options = $.extend(true, {}, $.ajaxSettings, pjax.defaults, options)
pjax.options = optionsvar xhr = pjax.xhr = $.ajax(options)
xhr.setRequestHeader('X-PJAX', 'true')
xhr.setRequestHeader('X-PJAX-Container', context.selector)
function pjaxReload(container, options)
{ var defaults =
{ url: window.location.href,
push: false,
replace: true,
scrollTo: false
}
return pjax($.extend(defaults, optionsFor(container, options)))}
if (xhr.readyState > 0)
{ if (options.push && !options.replace)
{ // Cache current container element before replacing it
cachePush(pjax.state.id, cloneContents(context))
window.history.pushState(null, "", options.requestUrl)
}
fire('pjax:start', [xhr, options])
fire('pjax:send', [xhr, options])
}
return pjax.xhr
}