ajax serasi dengan sejarah

Masalah utama ajax ialah ia tidak dapat menyokong operasi ke hadapan dan ke belakang penyemak imbas Oleh itu, Gmail awal menggunakan iframe untuk mensimulasikan operasi ke hadapan dan ke belakang bagi ajax.

Kini, H5 popular dan pjax sangat popular ialah teknologi yang digabungkan dengan ajax+history.pushState Menggunakannya, anda boleh menukar kandungan halaman dengan pergi ke hadapan dan ke belakang melalui penyemak imbas.

Periksa keserasian dahulu.

Ia boleh dilihat bahawa IE8 dan 9 tidak boleh menggunakan sejarah H5 Anda perlu menggunakan pengembangan API Sejarah HTML5 shims untuk pelayar yang tidak menyokong pushState, replaceState.

pjax

pjax mudah digunakan dan hanya memerlukan tiga API berikut:

• history.pushState(obj, title, url) bermaksud menambahkan entri sejarah ke penghujung sejarah halaman Pada masa ini, history.length akan menjadi +1.

  #🎜🎜. #
• history.replaceState(obj, title, url) bermaksud menggantikan item sejarah semasa dengan item sejarah baharu Pada masa ini, history.length kekal tidak berubah.
  .
• window.onpopstate hanya dicetuskan apabila penyemak imbas bergerak ke hadapan dan ke belakang (history.go(1), history.back() dan location.href="xxx" semuanya dicetuskan), pada masa ini ia boleh Dapatkan keadaan yang baru dimasukkan ke dalam history.state, iaitu objek obj (jenis data lain juga boleh diterima).

history.length 值为1, history.state 为空. 如下:

1) 为了在onpopstate事件回调中每次都能拿到 history.state , 此时需要在页面载入完成后, 自动替换下当前url.

history.replaceState("init", title, "xxx.html?state=0");

2) 每次发送ajax请求时, 在请求完成后, 调用如下, 从而实现浏览器history往前进.

history.pushState("ajax请求相关参数", title, "xxx.html?state=标识符");

3) 浏览器前进和后退时, popstate 事件会自动触发, 此时我们手动取出 history.state , 构建参数并重新发送ajax请求或者直接取用state值, 从而实现无刷新还原页面.

window.addEventListener("popstate", function(e) {
    var currentState = history.state;
    //TODO 拼接ajax请求参数并重新发送ajax请求, 从而回到历史页面
      //TODO 或者从state中拿到关键值直接还原历史页面
});

popstate 事件触发时, 默认会传入 PopStateEvent#🎜#🎜🎜

. rrreee 2) Setiap kali permintaan ajax dihantar, selepas permintaan selesai, perkara berikut dipanggil untuk memajukan sejarah penyemak imbas. rrreee 3) Apabila penyemak imbas bergerak ke hadapan dan ke belakang, acara popstate akan dicetuskan secara automatik Pada masa ini, kami mengeluarkan binaan history.state parameter dan hantar semula permintaan ajax atau Akses terus nilai keadaan untuk memulihkan halaman tanpa menyegarkan.

Apabila acara popstate dicetuskan, objek acara PopStateEvent akan dihantar secara lalai Objek ini mempunyai sifat berikut.