mozilla

Einführung

Es gab einen Skriptfehler auf dieser Seite. Während dieser von Website-Redakteuren bearbeitet wird, können Sie im Folgenden Teile des Inhalts ansehen.

Bu makalede, AJAX temelleri bir giriş sağlar ve bir ilk içgörü sağlayan iki basit ve pratik örnekler anlatılmaktadır.

AJAX nedir?

AJAX "Asynchronous JavaScript ve XML" anlamına gelir. Kabaca söylersek, standart dışı kullanımı XMLHttpRequest sunucu tarafı komut ile iletişim kurmak için nesne. XML, HTML, ve hatta metin dosyaları: Hem veri gönderilen ve alınan, ve çeşitli biçimlerde olabilir. Ancak, en çekici özelliği işlemleri idam sayfa yükleme olmaksızın olabilir anlamına gelir AJAX "asenkron" dir. Bu bir kullanıcı olaylara yanıt bir sayfanın biraz güncellemek için izin verir.

Iki söz teknikler olabilir

  • Sayfayı yeniden olmadan sunucuya isteklerini yerleşmek
  • XML belge ayrıştırma ve düzenleme

Adım 1 - Nasıl bir HTTP isteği yapmak

JavaScript kullanarak bir sunucuya bir HTTP isteği yapmak için, bu işlevselliği sağlayan bir sınıfın bir örneğini gerekir. Denilen Böyle bir sınıf XMLHTTP aslında bir ActiveX nesnesi olarak Internet Explorer'da tanıtıldı. Daha sonra Mozilla, Safari ve diğer tarayıcılar denilen bir sınıf uygulanan XMLHttpRequest yöntemleri ve Microsoft orijinal ActiveX nesnesi özelliklerini destekler.

Şimdi gerekli sınıf bir çapraz tarayıcı örneğini oluşturmak için, aşağıdakileri yapabilirsiniz:

eğer (window.XMLHttpRequest) {// Mozilla, Safari, ...
    http_request = new XMLHttpRequest ();
} Else (window.ActiveXObject) {// IE ise
    http_request = new ActiveXObject ("Microsoft.XMLHTTP");
}

(Bir XMLHTTP örneğini oluşturmak için basitleştirilmiş yukarıdaki örnekte gösterilen kod göstermek için. Bir gerçek hayat Mesela 3. Adım bakınız)

Sunucudan yanıt yok XML Bazı Mozilla tarayıcıları bazı sürümleri düzgün çalışmaz mim tipi başlığındaki olduğunu. Durumda mim türü değil - Bunu önlemek için, sunucu tarafından gönderilen başlık geçersiz kılmak için ekstra bir yöntem çağrısı kullanabilirsiniz metin / xml olduğunu.

http_request = new XMLHttpRequest ();
http_request.overrideMimeType ('text / xml');

Bir sonraki adım isteğinize sunucu yanıtı aldıktan sonra ne karar vermektir. HTTP isteği nesneye sahip bu noktada yanıtı işlemek için hangi JavaScript işlevi söylemek. Bu elde edilir onreadystatechange Bu gibi kullanmak istediğiniz JavaScript işlevini çağırır yanı sıra nesnenin özelliği:

http_request.onreadystatechange = nameDerFunktion;

Bu fonksiyon adından sonra hiçbir parantez olduğunu not etmek önemlidir ve fonksiyon hiçbir parametre geçirilir sahiptir. Buna ek olarak, bunu gibi, yerine "on the fly", işlevini bir işlev adı belirterek tanımlayabilirsiniz:

http_request.onreadystatechange = function () {
    // Bir şeyler yap
};

Alınan tepki ile ne açıkladıktan sonra, istek kesilmelidir. Sen yöntemleri aramak gerekir (açık) ve send () şöyle HTTP isteği sınıfı:

http_request.open ('GET' http://www.beispiel.org/eine.datei ', true);
http_request.send (boş);
  • yöntem çağrısı ilk parametre açık () , POST, KAFA kullanılması gerektiğini başka bir yöntemi ve ne sunucusu tarafından desteklenen GET - HTTP istek yöntemidir. Aksi (Firefox gibi) bazı tarayıcılar isteği işlemek değildir; yöntem, HTTP standardına göre büyük harfle. Olası HTTP isteği yöntemleri hakkında daha fazla bilgi için W3C özelliklerine başvurulan.
  • İkinci parametre istenen sayfanın adresidir. Güvenlik nedenlerinden dolayı, hiçbir sayfalar 3. parti etki üzerine talep edilebilir. Bu tam etki alanı adı her tarafta kullanılan sağlanmalıdır; Aksi takdirde, çağrılırken bir hata 'izin engellendi' olsun açık () . Ortak bir hatadır, alanadı.tld tarafından talep sayfayı ama 'www.biralan.tld bir sayfayı çağırmak için.
  • Üçüncü parametre isteği uyumsuz olup olmadığını belirtir. Ne zaman gerçek ayarlanır, JavaScript işlevi sunucunun cevabı hala beklemede iken devam edecektir. Bu AJAX'ta A'dır.

parametreleri gönderme () yönteminin herhangi bir veri POST üzerinden sunucuya gönderilecek olabilir. Eldeki gibi bir sorgu dizesi, şeklinde formüle edilmelidir:

isim = değer & böylece = daha başka isim = değer ve diğer

POST verilerini geçerken şöyle isteği MIME tipi ayarlanması gerektiğine dikkat etmek önemlidir:

http_request.setRequestHeader ('Content-Type', 'application / x-www-form-urlencoded');

Aksi takdirde, sunucu POST verileri üzerinden iletilen verileri göz ardı edecektir. Bu panelin ardından 'setRequestHeader' fonksiyonlu Open' fonksiyonlu görüntülenir önemlidir, aksi takdirde bir hata oluşur.

Adım 2 - sunucudan yanıt işleme

Isteği gönderirken, bir JavaScript işlevi adı yanıtını işliyor, hangi verildi unutmayın.

http_request.onreadystatechange = nameDerFunktion;

Şimdi bu fonksiyonu ne yapması gerektiğini görelim. İlk olarak, işlev talebinin durumunu sorgulamak gerekiyor. 4 değeri sunucu yanıtı tamamen alındığını gelir ve onlar şimdi düzenlenebilir olduğunu vardır.

Eğer (http_request.readyState == 4) {
    // Pekala, yanıt alındıktan
} Else {
    // Hazır değil
}

tam listesi readyState şöyle değerleri ise:

  • 0 (başlatılmadı)
  • 1 (şarj)
  • 2 (yüklü)
  • 3 (interaktif)
  • 4 (tam)

( Quelle )

Daha sonra, HTTP sunucusunun cevabı kontrol edilmelidir. Tüm olası kodlar üzerinde W3C sitesinde listelenen. Bizim amaçlarımız için biz sadece ilgilenen yanıt kodu olan 200 Tamam .

Eğer (http_request.status == 200) {
    // Mükemmel!
} Else {
    // Talep hataları içeriyordu;
    // Cevap, örneğin, 404 (bulunamadı) oldu
    // Veya 500 (Internal Server Error)
}

Şimdi istek ve HTTP durum durumu incelendi ki, bir ne istediğinizi sunucu tarafından gönderilen verileri ile yapabilirsiniz. Verilere erişim için, iki seçenek vardır:

  • http_request.responseText - Bir metin dizesi olarak geri sunucudan yanıt gösterir
  • http_request.responseXML - bir gibi yanıt verir XMLDocument JavaScript DOM işlevlerini kullanarak işlenebilir olan, geri nesne

Adım 3 - Basit Bir Örnek

Şimdi biz her şeyi bir araya getirmek ve basit bir HTTP isteği yapmak. Bizim JavaScript adında bir HTML belgesi test.html metin talep "Ben bir test değilim." içerir. Sonra geçti alert () bu dosyanın içeriğini.

<Script type = "text / javascript" language = "javascript">

    var http_request = false;

    fonksiyonu macheRequest (url) {

        http_request = false;

        eğer (window.XMLHttpRequest) {// Mozilla, Safari, ...
            http_request = new XMLHttpRequest ();
            Eğer (http_request.overrideMimeType) {
                http_request.overrideMimeType ('text / xml');
                // Bu satır aşağıya bakın
            }
        } Else (window.ActiveXObject) {// IE ise
            {deneyin
                http_request = new ActiveXObject ("Msxml2.XMLHTTP");
            } Catch (e) {
                {deneyin
                    http_request = new ActiveXObject ("Microsoft.XMLHTTP");
                } Catch (e) {}
            }
        }

        if (! http_request) {
            alert ('sonu :( XMLHTTP örneği oluşturulamıyor');
            return false;
        }
        http_request.onreadystatechange = alertInhalt;
        http_request.open ('GET', url, true);
        http_request.send (boş);

    }

    fonksiyon alertInhalt () {

        Eğer (http_request.readyState == 4) {
            Eğer (http_request.status == 200) {
                alert (http_request.responseText);
            } Else {
                alert ('isteği bir sorun oldu.');
            }
        }

    }
</ Script>
<Yayılma
    style = "imleç: işaretçi; text-decoration: underline; color: blue"
    onclick = "makeRequest ('test.html')" yerleşmek> bir istek yapın
</ Span>

Bu örnekte açıklama:

  • kullanıcı tarayıcıyı tıkladığında, "bir istek yapın" bağlantısını tıklayın;
  • Bu yöntem çağırır makeRequest () , bir parametre ile - aynı dizinde bir HTML dosyasının adını ( test.html )
  • istek yapılmış ve sonra (bir onreadystatechange ) 'dir alertContents () idam;
  • alertContents () çekler yanıt alındı ​​ve eğer Tamam (statü 200) olup ve sonradan olan () uyarı dosyası içeriğini test.html gelen.

Not : satır httpRequest.overrideMimeType ('text / xml'); daha da yukarı Firefox 1.5 veya sonraki hatalar JavaScript konsolu, yay gibi {{Bug (311.724)}} Bu hata oluşur, tarif İstediğiniz sayfa geçerli XML (sayfa gövde metin gibi, ise) değildir.

Not 2 : Bir isteği gönderilir ise, XML gerekir döndü - Statik XML dosyaları aksine - Internet Explorer sayfası çalışır, böylece Yanıt Başlıkları ayarlanır. : Hayır başlığındaki Eğer Content-Type: application / xml seti, IE elde etmek XML öğesi erişimi denemeden sonra dışarı bir JavaScript hatası 'Beklenen Nesne' olduğunu. Başlık Eğer Cache-Control: no-cache   ayarlı değil, tarayıcı cevap saklar ve hata ayıklama meydan böylece isteği yeniden olmaz.

Not 3 : Eğer http isteği değişkeni global kullanılan yazma gibi, aramaları işlev görebilir makeRequest () birbirini dışlar. Eğer http isteği değişken lokal ve içinden kullanılan () alertContents işlevi kullanıldığında, bu karşılıklı üzerine yazılmasını engeller.

4 Not : Geri arama işlevi için onreadystatechange hiçbir argüman geçirilebilir kayıt. Aşağıdaki kod, bu nedenle çalışmaz:

httpRequest.onreadystatechange = alertContents (http isteği); // (Çalışmıyor)

Başarıyla fonksiyonu kaydetmek için, bir anonim işlev da kullanılabilir veya HttpRequest bir global değişken olarak kullanılabilir. Sadece aşağıdaki örnekte olduğu gibi:

httpRequest.onreadystatechange = function () {alert içerik (http isteği); }; // 1 (Eş zamanlı istek)
httpRequest.onreadystatechange = alertInhalt; // 2 (globale Değişken)

Yöntem 1 Yöntem 2 kullanılırken, aynı anda yürütülür birden fazla sorgu sağlayan http isteği bir global değişken olduğu gibi.


5 Not : Bir iletişim hatası (web sunucusu örneğin kullanılamamasıdır) varsa içinde, bir istisna onreadystatechange yöntemi atılır Eğer .status değişkene ulaşmak için çalışıyorsanız,. Bu eğer ... o deyimi deneyin içinde yer aldığını ... catch sağlanmalıdır. (Bkz: {{Bug (238.559)}}).

Fonksiyon alertInhalt (HttpRequest) {

        {deneyin
            Eğer (httpRequest.readyState == 4) {
                Eğer (httpRequest.status == 200) {
                    alert (httpRequest.responseText);
                } Else {
                    alert ('talebi ile ilgili bir sorun vardı.');
                }
            }
        }
        catch (e) {
            alert ('Yakalanan İstisna:' + e.description);
        }

    }

Adım 4 - XML ​​Tepki işlemek

HTTP isteğine yanıt alındıktan sonra önceki örnekte, responseText istek nesnesinin özelliği dosya içeriği, kullanılan test.html içeriyordu. Şimdi deneyelim responseXML özelliği.

Öncelikle, daha sonra gerekli geçerli bir XML belgesi oluşturmak. Belge ( test.xml ) içeriği şu şekildedir:

<? Xml version = "1.0"?>
<Root>
    Ben bir test duyuyorum.
</ Root>

Senaryoda sadece satırı gerekir makeRequest () aşağıdaki gibi okumak için:

...
onclick = "macheRequest ('test.xml')">
...

Sonra gerekir alertContents () çizgi uyarısı (http_request.responseText); ile değiştirin:

var xmldoc = http_request.responseXML;
. var root_node = xmldoc.getElementsByTagName ('root') madde (0);
alert (root_node.firstChild.data);

Şimdi DOM yöntemleri gibi XML belge, veri okumak için kullanılan XMLDocument tarafından verilen nesne responseXML okundu. Dosya test.xml yapabilirsiniz Buraya görünümü, modifiye test script burada .

DOM yöntemleri hakkında daha fazla bilgi için belgelemek için Mozilla DOM uygulaması başvurulan.

{{Diller ({"ca": "ca / AJAX / Primers_passos", "en": "tr / AJAX / Getting_Started", "es": "es / AJAX / Primeros_Pasos", "tr": "tr / AJAX / Premiers_pas "," o ":" Bu / AJAX / Iniziare "," ja ":" ja / / Getting_Started AJAX "," ko ":" ko / AJAX / Getting_Started "," pl ":" pl / Ajax / Na_pocz \ u0105tek "," pt ":" pt / AJAX / Como_come \ u00e7ar "," zh-cn ":" cn / Ajax / \ u5f00 u59cb \ "," ru ":" ru / AJAX / \ u0421_ \ u0447 \ u0435 \ u0433 \ u043e_ \ u043d \ u0430 \ u0447 \ u0430 \ u0442 \ u044c "," zh-tw ":" zh_tw / Ajax / \ u4e0a \ u624b \ u7bc7 "})}}

{{users of the application ;"})}}

HRC Telekom

Sebir Teknoloji

HurCloud

HurNet

ÖmürTech

Schlagwörter des Dokuments und Mitwirkende

Schlagwörter: 
Mitwirkende an dieser Seite: fscholz, Takenbot, Diskostu, Gerhard, Dundanox, hrctelekom
Zuletzt aktualisiert von: hrctelekom,