Gizli Iframe Kullanarak Kısmi Sayfa Oluşturma

Kısmi sayfa oluşturma, bir geri gönderme sonucunda tüm web sayfasının yenilenme ihtiyacını ortadan kaldırır. Bunun yerine, sayfanın yalnızca değişen bölgeleri güncellenir. Sonuç olarak, kullanıcılar her geri göndermede tüm sayfanın yeniden yüklendiğini görmezler, bu da Web sayfasıyla kullanıcı etkileşimini daha sorunsuz hale getirir.

Web sayfalarına bu tür davranışlar eklemek isteyen geliştiriciler genellikle zor bir kararla karşı karşıya kalırlar. Tüm bu eylemler çok basit bir çözüm kullanılarak uygulanabilir: kullanıcı etkileşimine yanıt olarak tüm sayfayı yenileyerek. Ancak bu çözüm kolaydır, ancak her zaman arzu edilen değildir. Tam sayfa yenileme yavaş olabilir ve kullanıcıya uygulamanın yanıt vermediği izlenimini verir. Diğer bir seçenek, bu tür eylemleri JavaScript (veya diğer istemci tarafı kodlama teknolojilerini) kullanarak uygulamaktır. Bu, daha karmaşık, daha az taşınabilir kod pahasına daha hızlı yanıt sürelerine neden olur. JavaScript, bir görüntüyü güncelleme gibi basit eylemler için iyi bir seçim olabilir. Ancak, bir tablodaki verileri kaydırmak gibi daha karmaşık eylemler için, özel JavaScript kodu yazmak çok zor bir girişim olabilir.

Bu belge, tam sayfa yenilemenin ve özel JavaScript çözümlerinin dezavantajlarını ortadan kaldıran bir çözüm sağlar. Bu belgede, kısmi sayfa işleme işlevi, bir sayfanın sınırlı bir bölümünü yeniden oluşturma yeteneği sağlar. Tam sayfa oluşturma çözümünde olduğu gibi, kısmi sayfa işleme, orta katmandaki uygulamaya yeni içerikleri getirmek için bir istek gönderir. Bununla birlikte, sayfayı güncellemek için kısmi sayfa işleme kullanıldığında, yalnızca değiştirilen içerik tarayıcıya geri gönderilir. Bu belge, yeni içerikleri web sayfasına geri birleştirmek için gizli bir Iframe ve basit JavaScript kullanarak çözümü sunar. Sonuç, sayfanın özel JavaScript kodu olmadan ve tipik olarak tam sayfa yenilemesiyle oluşan bağlam kaybı olmadan güncellenmesidir.

Giriş:

Web sayfaları genellikle form verilerini girme ve gönderme ve farklı sayfalarda gezinme gibi çeşitli eylemleri destekler. Birçok web sayfası, kullanıcının gerçekten farklı bir sayfaya gitmeden web sayfasının içeriğinde değişiklik yapmasına izin veren başka bir eylem türünü de destekler. Bu tür eylemlerin bazı örnekleri şunları içerir: Bir bağlantıya tıklamak, aynı sayfadaki bir resmi güncelleyebilir. Örneğin, bir otomobil konfigürasyon uygulaması, kullanıcı tercih ettiği renk gibi farklı seçenekleri seçtiğinde bir arabanın görüntüsünü güncelleyebilir. Bir seçim kutusundan bir öğe seçmek, aynı sayfadaki diğer alanlarda değişikliklere neden olabilir. Örneğin, bir araba markası seçmek, görüntülenen mevcut araba modelleri grubunu güncelleyebilir.

Bir bağlantıya tıklamak veya bir seçimden bir öğeyi seçmek, bir tablodaki yeni bir veri sayfasına gitmek için kullanılabilir. Tablodaki bir düğmeyi tıklamak, tabloya yeni bir satır ekleyebilir.

Tüm bu eylemler, aynı sayfanın biraz farklı bir durumda yeniden oluşturulmasına yol açmaları bakımından benzerdir. İdeal olarak, bu değişikliklerin olabildiğince sorunsuz bir şekilde uygulanması gerekir, böylece kullanıcı, eldeki görevden dikkatini dağıtabilecek bir bağlam kaybı yaşamaz.

Kısmi sayfa oluşturma, gizli bir Iframe ve minimum JavaScript kullanılarak çok basit bir çözümle uygulanabilir. Sayfanın herhangi bir bölümü, HTML’de bir div veya tablo etiketleri kullanılarak kısmen oluşturulabilir.

YPR Sırasında Değişebilecek Sayfa Öğeleri:

Verileri Yeniden Oluştur: Aynı alanlar yeniden çizilir ancak verileri güncellenir. Örnekler arasında Verileri Yenile eylem düğmesi veya bir tablodaki toplamları yeniden hesaplama sayılabilir.
Bağımlı Alanları Yeniden Oluştur: Alanlar eklenebilir, kaldırılabilir veya sırayı değiştirebilir ve veriler güncellenebilir. Örnekler arasında, farklı adres alanları görüntüleyebilen Ülke seçimi listesi ve Basit ve Gelişmiş Arama arasında geçiş yer alır.
İçeriği Gizle / Göster: Hem alanlar hem de veriler görünümün içine ve dışına geçiş yapar.

PPR Sırasında Değişmeyen Sayfa Öğeleri:

Bazı sayfa öğeleri, sayfada görüntülenen içerikten bağımsız olarak her zaman bir sayfayla ilişkilendirilir.

Genel bir kural olarak, sayfa başlığının yukarısındaki öğeler (mesaj kutuları hariç) sabit kalır ve konum değiştirmez, ancak altbilgi sabitindeki öğeler, ancak sayfa içeriğindeki değişikliklere uyum sağlamak için sayfada yukarı veya aşağı hareket edebilir. PPR başlatıldığında aşağıdaki öğeler asla değişmez:

Markalaşma
Global düğmeler
Sekmeler, Yatay Gezinme, Alt Sekmeler
Konum bulma öğeleri: Breadcrumbs, Train, Next / Back Locator
Hızlı Linkler
Sayfa başlıkları (birinci düzey başlık)
Sayfa altbilgisi
Sekmeler ve Sayfa Başlığı arasındaki ayırıcı çizgiler

Çoğu durumda, değiştirilen öğeleri barındırmak için sayfada yukarı veya aşağı hareket etme dışında aşağıdaki öğeler de değişmeyecektir. Bununla birlikte, belirli durumlarda sayfadaki eylemler yeniden çizilmelerini gerektirebilir:

Bir Gizle / Göster denetimi içermediği sürece Yan Gezinme.
Alt sekmeler
Bağlamsal bilgi
Sayfa düzeyinde işlem / gezinme düğmeleri
Sayfa düzeyinde Talimat metni
Sayfa düzeyinde Sayfa damgaları
Sayfa düzeyinde Anahtar Gösterimi

Yukarıdaki tüm senaryolarda bu çözüm, web sayfalarının iyi performansını ve kullanıcı etkileşimini elde etmek için kullanılabilir.

PPR’nin Kullanılmaması Gereken Bağlamlar:

PPR doğru bir şekilde uygulandığında, uygulama performansını önemli ölçüde artırır. PPR ile performans iyileştirmesi mümkün olmadığında, bu uygulanmamalıdır, böylece gereksiz kod şişkinliği önlenir, başka bir sayfaya (farklı bir başlık ile) giderken PPR kullanılamaz.

Kısmi Sayfa Oluşturma Çözümü:

Kısmi Sayfa Oluşturmaya basit gizli iframe ve JavaScript kullanılarak sağlanan çözüm, bu, tüm Kısmi Sayfa Oluşturma senaryolarına genelleştirilmiş bir çözüm olarak kullanılabilir. Aşağıda, biri sunucu tarafından oluşturulacak basit bir tabloyu göstermek için iki düğme ve tabloyu kaldırmak için başka bir düğme olacak ana html (Tablo 1.1) bulunmaktadır.

[html]
[kafa]
[title] Ana Belge [/ title]
[script language = “JavaScript”]
[! –
function showTable () {
hiframe.location = “./ table.htm”;
}
function removeTable () {
document.getElementById (“tableId”). innerHTML = “”;
}
// -]
[/senaryo]
[/ head]
[vücut]
[iframe id = “hiframe” style = “visibility: hidden; display: none”] [/ iframe]
[tablo]
[tr]
[td] Tablo :: [/ td]
[td] [/ td]
[/ tr]
[tr]
[td colspan = “2”] [div id = “tableId”] [/ div] [/ td]
[/ tr]
[tr]
[td] [input type = “button” value = “Tabloyu Göster”
onclick = “showTable ()”] [/ td]
[td] [input type = “button” value = “Tabloyu Kaldır”
onclick = “removeTable ()”] [/ td]
[/ tr]
[/ tablo]
[/vücut]
[/ html]

Tablo 1.1

[iframe id = “hiframe” style = “visibility: hidden; display: none”] [/ iframe]

Bu iframe etiketi, Kısmi Sayfa Oluşturma İsteğinin hedefi olarak kullanılır. [İnput type = “button” value = “Tabloyu Göster” onclick = “showTable ()”] etiketi, kullanıcıya bir tablonun içeriğini sunucudan alma eylemi verir, bu çözümde örnek html tabloyu oluşturmak için sağlanır, sunucu tarafından üretilmesi gerekiyordu.

[İnput type = “button” value = “Tabloyu Kaldır” onclick = “removeTable ()”] etiketi, kullanıcının tabloyu kullanıcı arayüzünden kaldırmasını sağlar.

JavaScript
function showTable () {
hiframe.location = “./ table.htm”;
}

İçeriği sunucudan almak için kullanılır, satır hiframe.location = “./ table.htm”; GET isteğini sunucuya gönderir ve yanıt olarak iframe HTML’yi alır. Gereksinim, Kısmi Sayfa Oluşturma Yanıtı için bir POST isteği göndermekte ısrar ediyorsa, bu, html form öğesi hedef özniteliğini gizli iframe adı olarak ayarlayarak gerçekleştirilebilir.

Gönderi isteğinin kodu [form method = “post” action = “/ myaction” target = “hiframe”] gibi görünüyor

Kısmi Sayfa Oluşturma Sunucusu Yanıtı:

Tablo 1.2, Kısmi Sayfa Oluşturma için sunucudan alınan örnek yanıtı göstermektedir. Bu yanıt, HTML’yi gizli iframe’den ana sayfaya aktarmak için JavaScript koduna sahiptir.

[html]
[kafa]
[script language = “JavaScript”]
[! –
function iframeLoad () {
parent.document.getElementById (“tableId”). innerHTML =
document.getElementById (“tableId”). innerHTML;
}
// -]
[/senaryo]
[/ head]
[body onload = “iframeLoad ()”]
[div id = “tableId”]
[tablo]
[tr]
[td] 1 [/ td]
[td] Bir [/ td]
[/ tr]
[tr]
[td] 2 [/ td]
[td] İki [/ td]
[/ tr]
[/ tablo]
[/ böl]
[/vücut]
[/ html]

Tablo 1.2
[Div id = “tableId”] etiketi, gizlenenden aktarılacak içeriği kapsar
iframe ana sayfaya.
[tablo]
[tr]
[td] 1 [/ td]
[td] Bir [/ td]
[/ tr]
[tr]
[td] 2 [/ td]
[td] İki [/ td]
[/ tr]
[/ tablo]
Bu, tabloyu kullanıcıya gösterecek içeriktir.

İşlemi tetiklemek için [body onload = “iframeLoad ()”] kodu kullanılır
içeriği aktarmak için.

function iframeLoad () {
parent.document.getElementById (“tableId”). innerHTML =
document.getElementById (“tableId”). innerHTML;
}

Bu JavaScript işlevi, verileri gizli iframe’den ana sayfaya aktarır. parent.document.getElementById (“tableId”). innerHTML Bu bölüm, ana sayfadaki div html kimliğini etiketlemeye ve bu bölüm document.getElementById (“tableId”). innerHTML, Kısmi Sayfa Yanıtının HTML’sini ifade eder.

Sonuç:

Daha zengin, kullanıcı eylemlerine daha duyarlı ve geleneksel istemci uygulamaları gibi davranan Web sayfalarıyla kullanıcı deneyimini iyileştirin. Tam sayfa yenilemelerini azaltın ve sayfa titremesini önleyin. İframe kullanarak kısmi sayfa oluşturma çok basit bir çözümdür.