Ajax - örnekler. ajax komut

ağ protokolleri, bireysel komut çağrı mekanizmalarının, bilginin iletimi / alımı aracılığıyla erişim - İnternet ziyaretçinin bir ağda barındırılan her kaynağın görünürlük ve tarayıcı sağlar. benzersiz bir bağlantı (alan adı benzersiz düğüm adresi) - siteyi oluşturan sayfaların alan ortak bir köke sahiptir.

kaynak statik veya dinamik ziyarete tepki olursa olsun bir yanıt oluşturur. Şekli ve sayfaların içeriği herhangi bir koşul, haberleşme sunucusunun bölünmez biriminin ve istemci (tarayıcı) bağlı olsa bile bitmiş HTML kodlu belge, görüntü, stil sayfaları ve diğer dosyaları gerekli içerik ve ortamıdır. şey yanlış, tarayıcı bu ayrıştırmak ve yürütmek elde etmek için "yönetilen" tüm görüntüler.

Birçok umut verici teknolojiler uzun süre ortaya çıkmıştır, fakat haksız yere unutulmuş veya doğru kullanıldığında edilmemiştir. İlk AJAX (örnekler XMLHttpRequest nesnesini kullanın) yıllar önce ortaya çıktı, ancak başarı ve şöhret daha sonra geldi.

Tüm yoksa sadece ihtiyacınız olanı

Sitenin klasik versiyonunda - adı, IP adresi ve bağlantı (İnternet uzayda aynı belirlemeyi tüm eş). Ne bu ana sayfaya arkasında yatan - düşündük: kendi inisiyatifleriyle bu kadar neden bile sormadı modern "tasarımcı"? Site neden başka alabilirsiniz hangi ana sayfası? Bu seçenek - açıkça değil idealdir, öyle belirli içerik ve gerçek işlevsellik.

Sadece bir kişinin bir diş hekimi ihtiyacı varsa, oldukça ameliyata değil istişare terapist için kütüphaneye mutfağa yerine, belirli bir amaç için doğru adres, koydu. bu bir çıktı yerde, gördüğü, ancak tam olarak bir diş kliniği almaz. doktora kayıt ve yönünü (tam yol) - bir ziyaretçiyi bekleyebiliriz iyi. Ve (vardıklarında) yerinde bir doktor ve hedef olarak değişebilir.

Ama burada genellikle her zaman tam mühimmat yüklü sitesi, hiçbir şey Ama gerçek bir hayat kliniği, yeterince bilgi sayfasını vermek için yeni bir müşteri ziyaret ilk kez durumunda ... dikkate birisi geldiğini zaman ayırdığınız, yükleme sırasında değiştirir var siteye ziyareti dışı saatlerde yapıldığını doktor tarafından reçete olarak, kişiler ve ... pencere kayıt sağlanabilir geçici atama farklı bir ofiste yapılır, kullanılamaz ...

İnternet alanında Noktası

ziyaretçinin isteği üzerine, bir site sayfasını (genellikle ev) ve daha sonra diğer sorunu bir isteğine yanıt olarak - İnternet alan kaynağın klasik tepkisi. Site Server ayrıca tüm PHP-files sayfaları yapmak, bazıları alacak, işleyecek ve bilgi göndermek için :. AJAX isteklerine yanıt verebilir Değil görüntüleri, stiller, JavaScript kod komut dosyalarını, PHP, vb içerir.

Bir komut dosyası bir çırpıda yaz. Ama İnternet uzayda kontrol noktasına alma, etkin olduğunu ad, IP adresi ve bağlantı kim ve ele ne sebeple belirlemek mümkün değildir. Ağ üzerindeki herhangi bir hareketi esasen bir tarayıcı üzerinden değil, aynı zamanda eylemin diğer siteleri aracılığıyla farklı Kalkış ve varış robotlar aracılığıyla, yazılım gerçekleşir.

Senaryo, doğru sadece bilemez, kontrol kazanmak: ziyaretçi geldi hangi tarayıcıyı aracılığıyla bir ziyaret, bir referansla hangi IP adresleri ve kurabiye varlığından. Ana sayfa oluşturacak şekilde sadece ikinci bilgi verebilir, ancak ziyaretçi zaten burada yapıldığı durumlarda geçerlidir. Diğer tüm durumlarda, sunucudan sadece genel yanıtı oluşturmak mümkündür. Internet üzerinde bulmak kolaydır AJAX örnekleri dikkatle kullanılmalıdır. izlemek için XMLHttpRequest nesnesinin (kullanım) hataları kolay değildir.

genel yanıt ve özel diyalog

sunucudan genel yanıt - ortak bir sayfa, dizin olarak adlandırılan müdür olarak adlandırılan ve mevcut diğer sayfalara olan bağlantıları ile ters olan bir site ile başlar. Ziyaretçi diğer sayfalara isimlerini bilen Ancak, bunlar tek belirlenen geliştirici daha az önemli olacaktır anlayışı içindedir. Tüm ziyaretçiler odaklanır genel tasarım ve işlevsellik: Burada tek seferde klasik modeldir.

Özel diyalog - ziyaretçinin önceki oturumun devamı. site zaten o sayfayı görüntülemesi ne ilgi ve onun anısına koydu, tarayıcı çerezleri bir şey yazdı ki ne yaptığını bilir.

POST ve GET: Bu siteyi indirmek ve onunla çalışmak için sunucuya iki temel isteği kullandı. sorgu sonucu bir bütün sayfası. Ortaya çıkan sayfada, ziyaretçinin belirli sayfa elemanlarının eylem yapılandırılır Bu veya diğer olayları etkinleştirebilirsiniz.

Olaylar sayfa öğeleri

Bir metin alanının içeriğini almak ve bir ziyaretçinin yazdığı bulmak için - sayfa eleman bilgiler, anlamını bulmak için anahtar olabilir. Olay bir menü öğesi, resim, metin kutusuna oluşabilir. Her durumda, JavaScript işlevi aşağıdaki gibi AJAX isteği gerçekleştirebileceği, idare edilecek:

InitXML ( '../ Mphp / scSrvPhpWord.php? CTask = GoPage' + 've cOwnerCode =' + cOwnerCode
+ 'Ve CSessionCode =' + cSessionCode + '& cActiveItem =' + cActiveItem);

aşağıdaki gibi Böylece InitXML () işlevi, (değişken var scXHR işlev dışında açıklanacaktır) tanımlanır:

işlev InitXML (scURL) {

scXHR = null;

Eğer (window.XMLHttpRequest)
try {
{ScXHR = new XMLHttpRequest ();
} Yakalama (e) {}
} else
Eğer (window.ActiveXObject)
try {
{ScXHR = new ActiveXObject ( 'Msxml2.XMLHTTP');
} Yakalama (e)
try {
{ScXHR = new ActiveXObject ( 'Microsoft.XMLHTTP');
} Yakalama (e) {}
}
}
Eğer (scXHR)
{
scXHR.open (GET '', scURL);
scXHR.onreadystatechange = WaitReplySC;
scXHR.send (boş);
};
}

Bu fonksiyon, bir URL alır ve bunun için bir istek başlatır. , Ve sunucu XML yanıtın girişine gider WaitReplySC () fonksiyonu, başlayacak - Asenkron cevap (sitenin köküne ../Mphp/ klasör göreli bulunan scSrvPhpWord.php, bu durumda) URL'de belirtilen komut yerine getirecek en kısa sürede gelecektir başlık ve içerik de dahil olmak üzere.

sunucu yanıtı

Aslında sunucu PHP-script - gerekli imkanları, geliştirici amaçları bağlıdır tedavi öncesi, indir, esansiyel koşulların yüklemesiyle başlayan bir programdır:

ad PhpOffice \ PhpWord;

ini_set ( 'display_errors', 1);
error_reporting (E_ALL ^ E_NOTICE);

ignore_user_abort (doğru);
set_time_limit (12);

PhpOffice \ PhpWord \ MphpObj \ scDocuments kullanımı;

Require_once 'PhpOffice / PhpWord / Autoloader.php';
\ PhpOffice \ PhpWord \ otomatik yükleyici :: yazmacı ();

12 saniye - kullanıcı oturumu kapattığında ve vaka döngü gerçekleştirerek bir zaman limiti belirler zaman hataları gösteren bir işaretin başlangıcını temsil senaryo durdurma yasaklamaktadır. belgeler için Sonraki bağlantı kitaplığı PhpOffice \ PhpWord * .docx.

AJAX meydan üzerinde gösterildiği gibi, ( '... cTask = GoPage' + 've cOwnerCode =' + cOwnerCode + '& cSessionCode =' + cSessionCode + '& cActiveItem =' + cActiveItem) - Dört GET değişkenler, olmayabilecek gerçek durumunu kontrol etmelidir:

$ CTask = (isset ($ _ GET [ 'cTask']))? $ _GET [ 'cTask']: '';
$ COwnerCode = (isset ($ _ GET [ 'cOwnerCode']))? $ _GET [ 'cOwnerCode']: '';
$ CSessionCode = (isset ($ _ GET [ 'cSessionCode']))? $ _GET [ 'cSessionCode']: '';
$ CActiveItem = (isset ($ _ GET [ 'cActiveItem']))? $ _GET [ 'cActiveItem']: '';

gerçekleştirdikten sonra hazırlık action script karar verir:

Anahtar ($ cTask) {

case 'GoPage': // (bu başlangıç indirilirken bir zorluktur veya sayfayı yenileyin)

$ COwnerCode = 'cOwner';
$ CSessionCode = 'cSession';
$ CContents = 'cContents';
$ CStatus = 'cStatus';
$ CHTML = iconv ( 'UTF-8', 'CP1251', 'elemanını kodlayan ");
$ CActiveItem = iconv ( 'UTF-8', 'CP1251', 'değişkenleri');

$ CReply = "scSrvRM | GoPage | seti | {$ cOwnerCode}` {$ cSessionCode} | {$ cContents} `{$ cStatus} | {$ cHTML'yi} | {$ cActiveItem}";

break;

}

ve senaryonun son bölümü:

başlığı ( "Content-Type: text / xml; accept-charset = utf-8");
başlığı ( "Cache-Control: no-cache");
'' echo;
$ CReply = iconv ( 'CP1251', 'UTF-8', $ cReply); // 'UTF-8' in 'CP1251' dönüşüm
echo $ cReply;

Müşteri tepkisini alma

tarayıcıya yüklendiğinde sayfasında, sunucunun bir yanıt hazırlayacak en kısa sürede, bu fonksiyon WaitReplySC işlenecektir bulunmuştur:

{) (WaitReplySC işlev

try {

Eğer (scXHR.readyState == 4) {
(ScXHR.status == 200) {// yanıt işleme durumunda

var TestReply = scXHR.responseText;

if ((TestReply.indexOf ( 'Çözümleme hatası')> 0) ||
(TestReply.indexOf ( 'Bildirim')> 0)) alert (scXHR.responseText);

var CData = scXHR.responseText;
var ADATA = cData.split ( '|');

var cCmd = A-DATA: [1];
var CPOs = A-DATA: [2];
var aOwnerSession = A-DATA: [3] .split ( ''');
cOwnerCode = aOwnerSession [0];
var cSessionCode = aOwnerSession [1];
var aContentStatus = A-DATA: [4] .split ( ''');
var cContent = aContentStatus [0];
var cStatus = aContentStatus [1];
var cHTML = A-DATA: [5] terkibi; // sunucu HTML yanıtı
var cVarValues = A-DATA: [6]; Formlar için // değişkenleri

Anahtar (cCmd) {

case 'GoPage':

var dTestLine = Document.getElementById ( 'scTestLine');
dTestLine.innerHTML = 'Cevap = [' + cOwnerCode + ''
+ CSessionCode + ''
+ CContent + ''
+ CStatus + ''
+ CHTML + ''
+ CVarValues + ']';

break;
}

} Başka {
. Document.getElementById ( 'scAreaStatus') innerHTML = "Hata !!!";
}
}
} Yakalama (e) {}

}

Bu nedenle, AJAX örneklerle, sayfa (scTestLine elemanında) elde tarayıcıda yüklenir:

Cevap = [cOwner, cSession, cContents, cStatus, elemanlar değişken değerleri kodlayan]

Kod, jQuery ve WordPress temsil Açık

Kullanım iconv () fonksiyonu için tarayıcı ve UTF-8 ile yazılmış senaryo metni, Sayfa Rus karakterleri dönüştürün. kodla temsil iskeletin kalanı çok basittir ve kolayca herhangi bir özel amaç için tekrarlanabilir.

Konu sadece işleme sunucusu yanıtı WaitReplySC () fonksiyonu ve yanıt oluşturur gerçek script kodunu değiştirmek. (Belirli bir scURL ve ona uygun veriler için) Aramalar InitXML işlevi sayfa öğeleri olay işleyicileri yerleştirilir ve bu elemanların anlamını tanımlamak vardır.

arasında Sunan örnekler için "el" teknoloji kullanımı AJAX odaklı.

Çeşitli içerik yönetim sisteminde (SMS) yetenekleri belirli bir özgüllük tarzında, bir kural olarak, farklı şekillerde tarif edilmiştir. jQuery.get () ve jQuery.post (): Örneğin, jQuery AJAX çağrı olanakları jQuery.ajax () ya daha yüksek bir seviyeye işlevler gerçekleştirilir. Parametre (tuşu + değer çiftleri grubu) URL ve ayarları iletilir. jQuery.ajax () XMLHttpRequest-nesnesini geri gönderir.

JQuery önerilen fonksiyon-yöntemlerin sonuçlarını izlemek için: XHR.done () - Talep başarıyla tamamlanmasını. XHR.fail () - hata işleme.

AJAX talebinin jqXHR.done () metodu yavlyatsya alternatif işleyici başarıyla tamamlanması. eski jqXHR.success () metodu değiştirir.

Benzer şekilde, Wordpress AJAX teknolojisine kullanımı. Burada her şey içerik yönetim sistemi kendini implante etti, sadece önerilen yapıyı kullanmak gerekir. belgeler ayrıntılı bir açıklama sağladı.

kılavuzu versiyonu paralel olarak ya da seçilen içerik yönetim sistemi, bir ya da jQuery'nin başka sürümüne ek olarak kullanılabilir, ancak AJAX Uygulama, seçilen araçları esas olarak bağlıdır. İkincisi neredeyse tüm modern SMS kullanın çünkü kendi başlarına çalışmak yararlıdır, ancak kendi yolunda her.

Uygulama klasik bir örneği,

AJAX Basit ve üstel kullanım - Sepet online mağaza. gerçekte onlar olmayabilir ama mağaza sayfaları her zaman, mal ile doldurulur. Genellikle Reloading önemli bir zaman alır, ama bir ziyaretçinin bir ürün seçtiğinde, o zaman sadece ona kadar verebilirsiniz veya site hızla görüntülemek için daima arzu edildiğini, seçilmiş biri değiştirin.

Genellikle seçilen öğelerin etrafında sepet ve iz şeklinde yapılmaktadır. Bu öğelere AJAX dinamik değişikliklerin kullanımı olmadan problemlidir.

/ Eklemek sepetinize öğeleri kaldırmak için mekanizmalar uygulamak AJAX komut, birçok SMS fiilen oldu.

AJAX formu ile normal veri iletimi (adı ve şifresini girmek için) geleneksel bir şekilde oluşturulabilir için: