JQuery, amacı "daha az yaz, daha fazlasını yap" olan bir JavaScript kütüphanesidir. JQuery siteye bağlanmak ve kullanmaya başlamak kolaydır. JQuery'yi kullanarak, sitenizde javascript kullanmak çok daha kolay hale gelir.
jQuery, JavaScript kodunun bir buzz'ı ortadan kaldırır ve bu satırı yalnızca bir yöntemle uygulamanıza izin verir.
Ajax nedir?
Ajax bir asenkrondur (yani bir tarayıcı, bir istek gönderme, örneğin bir yanıt bekleyen bir mesaj gösterebilir, sayfayı kaydırma, sayfayı vb.) JavaScript ve XML. Dinamik ve hızlı web sayfaları oluşturmak için kullanılır. AJAX, tüm sayfanın tamamını yeniden başlatmadan Web sayfasının bir bölümünü güncellememizi sağlar.
Peki ya jquery ve ajax?
JQuery ve Ajax kombinasyonu güçlü işlevsellik sağlar. Dan jquery kullanarak Ve Ajax, XML, HTML ve hatta normal metin de dahil olmak üzere çeşitli formatlarda bir istek yapabilir ve bilgi alabilirsiniz. Verileri değiştirmek için JSON formatını kullanabilirsiniz. AJAX isteğinin alındığı veriler HTML sayfamızda kullanabiliriz.
jQuery, mevcut bir tarayıcı AJAX API'yi daha güçlü ve kullanımı daha kolay hale getirir. JavaScript kullanarak her zamanki gibi AJAX çağrıları oluşturun, biraz zor: Çeşitli tarayıcıların bir XMLHTTPRequest nesnesi oluşturmak için farklı yaklaşımlar gerektirdiğini dikkate almanız gerektiğinden. Ek olarak, örneğin, Formlardan veri göndermek, Ajax'u aramak için normal javascript kullanırsanız, daha zorlaşır.
jQuery, JavaScript AJAX yöntemlerini genişleten basit ve güçlü bir işlevsellik sağlar ve daha esnek bir yaklaşım sağlar.
Bu küçük makalede size göstereceğim jQuery ve Ajax nasıl kullanılır? basit php. form. Hadi ... JQuery ve Ajax'ı kullanmak için, iki dosyaya ihtiyacımız var, ilk dosya, AJAX sorgusunun derleneceği HTML / PHP kodunu içerecektir. İkinci dosyada, AJAX sorgusunu işleyeceğiz ve sonucu ilk sayfaya iade edeceğiz.
Adım 1. Bir okul.php dosyası oluşturun ve aşağıdaki kodu içine yerleştirin:
Yukarıdaki kodda, öğrencinin adını ve numarasını alırız ve jquery ve ajax kullanarak, bunları ayrıntılara göndeririz.php.
| ADINIZ: | ||
| Rulo numarası: | ||
Adım 2: Detaylar oluşturun.php ve aşağıdaki kodu içine yerleştirin:
Yukarıdaki kodda, sekans numarasını ve adını kullanarak öğrencinin adresini alırız.
Bu örnek için, bir okul veritabanı ve öğrenci tablosu oluşturmanız gerekir. Öğrenci tablosu isimler, sıra numarası ve adres içeren alanları içerir.
Umarım bu makale sizin için yararlı olacaktır.
POST () yöntemi genellikle sunucuya veri göndermek için tasarlanmıştır (örneğin, formdan).
Posta yönteminin bağlamında, bahsetmeye değer json. - JavaScript'e göre metin formatı. Neredeyse her programlama dilinde kullanılabilir.
jQuery, AJAX Talep Posta Yöntemi
jquery.post (URL ,,,)- İlk argüman (URL), talebin gönderildiği belgenin URL'sidir;
- İkinci argüman (veriler), sunucuya, bir nesne js olarak sunulan bir kural olarak gönderilen verilerdir;
- Üçüncü argüman (geri arama (veri, textstatus, jqxhr)), sunucu yanıtından sonra adlandırılan F-i'dir. Argüman olarak bu özellik İsteğin nasıl yapıldığını ve durumuna cevap olarak sunucu tarafından gönderilen verileri alır.
jSON_DECODE () ve JSON_ENCODE ()
İÇİNDE php dili (5,2'den itibaren), JSON desteği, JSON_DECODE () işlevleri biçiminde çekirdeğe (JSON String'i çözer) ve JSON_encode (), JSON veri türlerini uygun olana dönüştürür. php türleri. ve tam tersi.
1, "B" \u003d\u003e 2); Echo json_encode ($ arr); ?\u003e.Sonuç
("A": 1, "B": 2, "C": 3, "D": 4, "E": 5)PHP Örnek Operasyonu JSON_DECODE
$ json \u003d "(" A ": 1," B ": 2)"; Var_dump (JSON_DECODE ($ json, true)); $ Arr \u003d json_decode ($ json, true); Eko ""$ Arr [" a "]."
"$ Arr [" b "]."
";
Sonuç
Dizi (5) (["a"] \u003d\u003e int (1) ["B"] \u003d\u003e int (2)) 1 2Ajax sorgusunun POST yöntemiyle çalışmasına bir örnek
Biz ne yaptık:
Gönderilen (Gönder İstek Ajax) verilerinin doğruluğunu kontrol edin (kullanıcı tarafından veri girilir). Veri doğruysa, bir mesaj görüntüleyin. Aksi takdirde, alanlara kırmızı bir arka ışık yapın. Her şey zaman uyumsuz çalışır, yani sayfayı yeniden başlatmadan. kullanabilirsiniz bu ilkeÖrneğin, veritabanındaki yorumların eklenmesiyle bir yorum sistemi oluşturmak için.
jquery.
$ (Belge) .Ready (işlev () (function () (vaR working \u003d false; / * Bu bayrak, birkaç yorum göndermeyi önler: * / $ ("Form"). Gönder (işlev (e) (e.preventDefault (); ) False döndürün; çalışma \u003d doğru; $ ("# Gönder"). Val ("Bekle. (bu) .Serialize (), işlevi (MSG) (/ * Gönderimde şekil değerleri gönderin.). Durum) // Veriler doğruysa, bir mesaj ekleyin (Console.log (msg.status), $ (msg.html) .Hide (). insertBefore ("Form"). Slidedown ();) başka (// Hatalar varsa, nesneyi nesneye geçiyoruz // msg.Errors tarafından geçiyoruz ve bunları $ .Each sayfasına (MSG.Errors, Function (K, V) ($ ("#" + K) .AddClass ( "Hata"); // alert (k);));))), "json");));));Html
Php.
// Ajax $ arr \u003d $ _POST tarafından gelen verileri kabul ediyoruz; $ arr \u003d $ _POST; Eğer (filtre_var ($ arr, filtre_validate_email) && filter_var ($ arr, filtre_validate_int)) (ECHO JSON_ENCODE (Dizi ("Durum" \u003d\u003e 1, "HTML" \u003d\u003e "Bu yazıda, kullandığım kod örnekleri göndermek. ajax istekleri etrafındaki sunucuya jquery.. Görevleri farklı olabilir, böylece yazı kodunu basitleştiren farklı işlevleri kullanabilirsiniz.
Yük fonksiyonunu kullanarak HTML veri isteği
Bu, HTML verilerini elde etmek için jquery aracılığıyla en kolay AJAX sorgusudur ve bunları ID \u003d "sonuç" ile DOM elemanına yerleştirin (elemanın içeriği değiştirilir):
$ ("# Sonuç"). Yük ("
Yükün daha gelişmiş bir sürümü:
$ ("# Sonuç"). Yük ("
Bu örnekte, sunucu ayrıca parametreleri de iletir ve cevabı aldıktan sonra, hata olmadığı takdirde kontrol edilmedi (örneğin, sunucunun yanıtı alınmadı) ve çeşitli eylemler gerçekleştirin.
AJAX İstekleri GET ve POST FONKSİYONLARI
Bu işlevler AJAX sorgusu HTTP yöntemleri tarafından gönderilir ve gönderin. Onların kullanımına birkaç örnek vereceğim.
$ .get ("
Veri iletimi gerekli değildir, yanı sıra, sunucudan yanıtı aldıktan sonra herhangi bir işlem yapmanın yanı sıra, yani. Bu durumda, gerekirse dizeler 3 ve 4-6 çıkarılabilir ve böylece kodu azaltır.
Sunucudan elde edilen verilerin türü, veri türü eklenerek belirtilebilir (aşağıdakilere bakın) - Varsayılan olarak otomatik olarak belirlenir.
Gönderi kullanmak benzerdir, ancak aşağıdaki örnekte, sunucudan bir cevap aldıktan sonra bir işlev çağrısı kullanıyorum.
$ .post ("
Aslında, GET ve POST işlevleri, aşağıda ele alınacak AJAX işlevi için kısaltılmış seçeneklerdir.
Getjson json verileri
getjson - GET yöntemini kullanarak ve JSON olarak veri alma Ajax sorgusunun kısaltılmış bir varyantı. Yöntem, örneğin, verilerle bir dizi elde etmek için uygundur ve daha sonra onunla çalışın.
$ .getjson (" Sunucu tarafında, program bir dizi oluşturur ve örneğin aşağıdaki gibi bir JSON String'e dönüştürür: $ arr \u003d dizi (); $ arr \u003d dizi ("id" \u003d\u003e 10, "Text" \u003d\u003e "Test Hattı 1"); $ arr \u003d dizi ("id" \u003d\u003e 20, "metin" \u003d\u003e "Test Hattı 2"); $ arr \u003d dizi ("id" \u003d\u003e 30, "Metin" \u003d\u003e "Test Hattı 3"); Echo json_encode ($ arr); Benzer şekilde, STDCLASS nesneleri sunucudan aktarılabilir, bunları JSON String'e dönüştürebilir. Şimdi basit bir GET sorgu işlevi AJAX'in bir örneğini vereceğim ve HTML verilerini alacağım. $ .Ajax (URL: " Sunucuya talebi, GET yöntemini gerçekleştirir, çünkü İstek türünden sorumlu olan parametre, varsayılan tür olsun. Olayların yöntemi ve işlenmesi ile posta veri iletimi ile bir sorgu işlevi AJAX yürütme örneği. Aşağıda tarif edeceğim ekstra seçenekleren sık uygulanır. $ .Ajax (URL: " Veri Gönderme Düğmesi:
Örnekte, düğme düğmesine tıkladığınızda, düğmenin durumu ilk değişiklikler (üzerindeki metin, "Gönderme ..." (Gönderme ... "olarak değişir ve aktif olmaz) BEFORESEND parametresi kullanılarak yapılır. Ardından, istek istenen verilerin transferine gönderilir. Cevap sunucudan alındıktan sonra, düğme durumu aynı şekilde döndürülür (metni "Gönder" olarak değişir). Cevap JSON verisi olarak elde edilir. En sık kullanışlı olan AJAX isteği gönderme parametrelerini kısaca tanımlayın: Aşağıda AJAX sorgularını kullanmanın birkaç örneğini vereceğim. Örnek HTML kodu:
Ajax işlevini kullanarak jquery ile basit ajax sorgusu
JQuery üzerinden AJAX isteği daha karmaşık bir örneği
url
AJAX Talep Adresi Gönderme
tip
Gönderme Yöntemi İstek almak. veya gönderi.
veri.
Veri verileri gönderildi. PAR1 \u003d VAL1 & PAR2 \u003d VAL2 & ..., jQuery nesnesi, örneğin $ ("giriş") veya diğer verilerdeki parametreler ve değerleri olan bir dize olabilir.
veri tipi
Sunucudan veri türü. HTML, JSON, Metin, Script ve XML olabilir.
Önbellek.
Sorgu tarayıcısını önbelleğe almak (yanlış - önbelleğe alınmaz).
asenkron.
Asenkron Sorgu Yürütme, yani Program, sunucu yanıtını beklemeden yürütülmeye devam ediyor. Yanlış belirtirseniz, sorgu senkronize olarak yürütülürken, sayfa sunucudan gelene cevap alınana kadar sayfa yanıt vermez.
veri işleme.
URL formatına gönderilen verileri dönüştürme. Verilerin dönüştürülmemesi gerekiyorsa, yanlış olarak yükleyin. Örneğin, bir sunucuya veya XML verisine bir resim gönderirken.
İçerik türü.
İletilen veri türü, varsayılan "Uygulama / X-WWW-Form-urlencoded; Charset \u003d UTF-8". Yanlış belirtirseniz, başlık, örneğin sunucuya bir resim gönderirken gerekli olabileceği türünü geçmez.
before
AJAX isteğini göndermeden önce yürütülen fonksiyon.
tamamlayınız.
Sunucudan gelen cevabı aldıktan sonra gerçekleştirilen işlev (herhangi bir, başarılı veya değil).
başarı.
Başarılı sorgu ile yapılan fonksiyon.
hata
Bir hata durumunda yapılan fonksiyon.
JQuery ile tüm veri ajax isteği ile bir form gönderme
Javascript kodu:
$ ("# MyForm"). Gönder (e.preventDefault (E); $ .AJAX ((Tip: $ (this) .ATTR ("Yöntem"), URL: "
Sayfanın "Gönder" düğmesine tıklayarak yeniden başlatılacak şekilde, önce kullanan standart tarayıcı işlemlerini iptal edin. e.preventDefaults () .
Veri parametresinde, kullanarak tüm form alanlarını geçeriz. $ (this) .Serialize () - Bu özellik, tüm girişleri ve SELECT-S'leri sunucuya göndermek için uygun bir dize dönüştürür.
Ayrıca, parametre burada kullanılır. async: Yanlış. Böylece, form sunucuya gitmezken, başka bir şeye basın veya yapılmaz.
JQuery ile bir resim veya Ajax sorgu dosyası gönderme
Sayfayı yeniden başlatmadan sunucuya bir dosya veya resim gönderme görevi oldukça sık görülür. Bu örnekte, bir kerede 2 fişlerin saçmalıkları: düğmeye basarak dosyayı seçinistediğiniz gibi çerçevelenebilir ve bir dosyayı aktarırken ilerlemeyi görüntüleyin AJAX istek sunucusu.
hTML kodu böyle olacak:
#addfile (Konum: Bağıl; Taşma: Gizli; Genişlik: 180px; Yükseklik: 34px;) #load_file (Konum: Mutlak; Üst: 0; Sol: 0; Genişlik: 180px; Yükseklik: 34PX; Yazı Tipi Boyutu: 0px; Opaklık; : 0; Filtre: Alpha (Opaklık: 0);) #load_file: Hover (İmleç: İşaretçi;)
Fikrin özü, bir dosya seçmek için standart girişin ekranın üstünde görüntülenmesidir, ancak tamamen saydamdır ve bir düğme olarak aynı boyutlara sahiptir. Böylece, kullanıcı düğmesini görür, ancak imleç ona yol açtığında, aslında girişe yol açar. Buna göre, düğmeye bastığında, aslında giriş dosyası seçimine basar. Dosyayı seçtikten sonra imleci yanıp sönmemek için, yazı tipi boyutu 0PX olarak ayarlanır.
Şimdi JavaScript, ilerleme göstergesiyle bir sunucuya dosya kodu gönder:
$ (Fonksiyon () ($ ("# load_file"). Açık ("Değişim", LoadFile);)); Fonksiyon loadfile () () ($ ("# addfile span"). HTML ("% 0 yüklendi"); dosyalar \u003d $ ("# load_file"). Dosyaları; var formu \u003d yeni formdata (); form.append ("yükleme" , Dosyalar); $ .ajax ((URL: "
Dosya sunucuya yüklendiğinde, butonun zaten sunucuya ne kadar aktarıldığı gösterilecektir. İndirme işlemi tamamlandıktan sonra, düğmenin adı, olduğu gibi iade edilir ve girişin değeri ve dosyanın değeri boş ayarlanır, böylece tekrar yeni bir dosya seçebilirsiniz.
PHP'deki sunucu parçası örneği (Eugene isteğinde):
$ mesaj \u003d ""; İf (boş ($ _ dosyaları ["yükleme"] ["name"]) || $ _FILES ["yükleme"] \u003d\u003d "Yok") ($ mesaj \u003d "Dosya seçmediniz";) _Files ["yükleme"] ["Boyut"] \u003d\u003d 0 || $ _FILES ["yükleme"] ["Boyut"]\u003e 9437184) ($ mesaj \u003d "Dosya boyutu standartlara uymuyor (maksimum 9 MB) ";) Başka biri varsa (($ _Files [" yükleme "] [" Tip "]! \u003d" Image / JPEG ") && ($ _FILES [" yükleme "] [" Tipi "]! \u003d" Görüntü / PJPEG ") && ($ _Files ["yükleme"] ["Tipi"]! \u003d "Image / Gif") && ($ _Files ["yükle"] ["Tip"]! \u003d "Image / png")) ($ mesaj \u003d "izin verilen Yalnızca resimleri indirmek için jpg, gif ve png. ";) eğer (! is_uploaded_file ($ _ dosyaları [" yükleme "] [" tmp_name "]] [" TMP_NAME "])) ($ mesaj \u003d" bir şey yanlış gitti. Dosyayı tekrar indirmeye çalış. ";) Başka ($ ftype \u003d $ _Files [" yükleme "] [" yükleme "], $ fname \u003d" NewName_Image. ". ($ Ftype \u003d\u003d" görüntü / gif "?" GIF ": ($ ftype \u003d\u003d" Görüntü / png "?" PNG ":" jpg ")); eğer (Move_uploaded_file ($ _ dosyaları [" yükle "] [" tmp_name "], $ _Server [" Document_root "]." / Dosyaları /".f fname) ) ($ mesaj \u003d "başarıyla yüklendi.";) başka ($ mesaj \u003d "bir şey buna gitmedi için. Dosyayı tekrar indirmeye çalışın. ";)) Çıkış ($ mesaj);
İndirilen görüntü hakkında bilgi $ _FILES ["UPLOAD"], çünkü Komut dosyası dosyası aşağıdaki gibi eklendi: Form.Append ("Yükle", Dosyalar); Buna göre, PHP programından gereken tek şey, dosyanın beklenen parametrelere karşılık geldiğini, dosyayı aktardığını doğrulamaktır. İstediğiniz klasör (Dosyalar klasöründeki örnekte) Aşağıdaki adın altında (NewName_Image örneğinde) ve cevabı tarayıcıya geri döndürün, bu da örneğimde kullanıcı uyarısı (mesaj) komutu tarafından görüntülenir;
Ajax sorgularını, çok ve hepsi burada kullanabileceği ve hatta ihtiyaç duyabilecekleri durumlar sökülmez. Bununla birlikte, eğer öneriler varsa, diğer örnekler buraya eklemek için neler ifade eder, yorumlarda yazın.
gönderemiyorum en basit istek Pervane için jQuery ile. Ancak aynı zamanda, formu yoldan gönderirsem, her şey bir patlama ile çalışır. Aşağıda, bir kullanıcı girişi göndermek istediğim index.html veriyorum. Talebin kendisi, SerletStore.java'nın kendisi kendisi kendisi olan login.js. Ve tüm projenin yapısı.
login.js. Sadece daha az çalışan URL \u003d "http: // localhost: 8080 / Testservlet / Post" ve onlar "/ TestServlet / Post", "TestServlet / Post", "/ POST," POST ", bir hata 404'e neden olur.
İşlevi addNvoting () () (var xhr \u003d new xmlhttprquest (); var gövdesi \u003d "name \u003d" + "+" & SURNAME \u003d "+ kodluduricomponent (" soyadı "); xhr.open (" Post "," http: // localhost: 8080 / TestServlet / Post ", true) xhr.setrequestheader (" İçerik tipi "," Uygulama / X-www-form-urlencoded ") XHR.SEND (vücut);); Fonksiyon AddNewVoting1 () (Var user \u003d ("FirstName": "Vlad") var jsonstring \u003d json.Stringify (kullanıcı); var url \u003d "http: // localhost: 8080 / TestServlet / Post"; $ .AJAX ((URL : URL, Yöntem: "Gönder", Veri: JSSONSTRING, CONTICTYPE: "Uygulama / JSON", Hata: İşlev (Mesaj) (Mesaj (Mesaj);), Başarı: İşlev (Veri) (VER) jsonObject \u003d json.parse (veriler); konsol.log (jsonobject);), Başlıklar: ("kabul": "Uygulama / JSON", "Kabulü": "TR", "Önbellek Kontrolü": "Max- yaş \u003d 3600 "))););
İkinci işlevi ararken görüntüler:
index.html
Servletstore.java.
Javax.servlet.servletexception; javax.servlet.annotation.webservlet; İthalat javax.servlet.http.httpservlet; İthalat javax.servlet.http.httpservletrequest; Javax.servlet.http.httpservletresponse; Java.io.ioException; İthalat java.io.printwriter; @Webservlet (NAME \u003d "POST", URLPATTERNS \u003d "/ POST") Public Score Servlet (@Override Korumalı Void Doget (HTTPServletRequest Req, HttpservletResponse Resp) ServletException, IOException (Printwriter Writer \u003d Resp.Getwriter (); yazar. Baskı ("Merhaba");) @Override Korumalı Void Dopost (HTTPServletRequest Req, HttpservletresServletRequest REQ) ServletException, IOException (SUPER.DOPOST (REQ, SPEN);))
Proje Yapısı.
Örneklerde, Sunucuya basit asenkron Ajax isteklerinin oluşturulmasını düşünecek. İstekleri iletmek için bir yöntem olarak, hem GET yöntemini hem de posta yöntemini kullanacağız. Sunucuda, PHP komut dosyalarını kullanarak istekleri uygulayacaksınız.
AJAX Asenkronsuz Talep Nedir?
AJAX teknolojisi temel olarak sunucuya eşzamansız istekler oluşturmak için kullanılır. Asenkron sorgu, arka planda gerçekleştirilen ve kullanıcının sayfayla etkileşime girmesini engellemez bir istekdir.
Eşzamansız bir istek gönderirken, tarayıcı (sayfa) "Dondurulmuş" değildir, yani. Bununla, daha önce olduğu gibi çalışabilirsin. Ancak, cevap sunucudan ne zaman geldiğinde nasıl bililir. Bunu belirlemek için, ReadyState tarayıcısının özelliğini (hazır olma durumu) izlemelisiniz. Bu tesis, hangi aşamadaki sorgulamanın değerini yargılayabileceği bir sayı içermektedir. Aşağıdaki tablo, ReadyState özelliğinin ve ilgili durumların ana değerlerini gösterir.
Şunlar. ReadyState özelliğinin değeri 4'e eşit olduğunda izlememiz gerektiği ortaya çıktı. Bu, sunucunun Gönderilen'e yanıt verdiği anlamına gelir. Uygulamadaki kalan değerler oldukça nadiren kullanılır ve bazı tarayıcılar onları desteklemeyebilir.
Hangi aşamada bir sorgu olduğunu belirlemek için, XMLHTTPRequest OnreadyStateChange nesnesini kullanmanız gerekir. Bu olay, ReadyState özelliğinin değeri değiştiğinde meydana gelir. Sonuç olarak, bu olayın işleyicisinde (Niliyetsiz veya Adlandırılmış İşlev), bu özelliğin (4), örneğin, örneğin sayfaya verilip çıkış sunucusu yanıtı olup olmadığını kontrol edecek eylemleri kaydedebilirsiniz.
Asenkron Ajax Sorgusu Oluşturma (Yeminli)
Asenkron oluşturulmasını düşünün Ajax isteği Örnekte, kullanıcıyı açmak ve IP adresini görüntülemek için sayfayı indirdikten sonra olacaktır.
Bunu yapmak için, sunucuda bir dizinde 2 dosya oluşturmanız gerekir:
- welcome.html - Kullanıcıya görüntülenecek HTML sayfası. Aynı sayfada, istemci tarafındaki AJAX çalışması için gerekli tüm eylemleri gerçekleştirecek olan komut dosyasını yerleştirin.
- sunucu tarafındaki talebi işleyecek ve bir cevap oluşturacak olan PHP dosyası. Welcome.html dosyasının temel yapısını oluşturmaya başlayalım.
Ajax örneği
Müşteri tarafında gerçekleştirilmesi gereken eylemlerin sırasını düşünün (JavaScript kodunda):
- Sunucuya gönderilecek olan yöntem (GET, POST).
- Sunucu isteğini işleyecek URL.
- İstek türü: senkron (yanlış) veya asenkron (doğru).
- Gerekirse ad ve şifre.
Bir XHR nesnesinin bir onreadystateChange olayına abone olun ve işleyiciyi anonim veya adlandırılmış bir işlev olarak işaretleyin. Bundan sonra, bu işlev içinde kod oluşturun, yanıt durumunu kontrol edecek ve sayfadaki belirli adımları uygulayacaktır. Sunucudan gelen cevap her zaman yanıtTelft özelliğindedir.
Ayrıca, ReadyState özelliğinin 4 numarasının geçerli değeri ile durum özelliğini kontrol edebilirsiniz. Bu özellik, sorgu durumunu belirler. 200 ise, o zaman her şey yolunda. Aksi takdirde, bir hata oluştu (örneğin, 404 - URL bulunamadı).
Sunucuya Gönder () yöntemini kullanarak bir istek göndereceğiz.
Bir sorgu göndermek için GET yöntemini kullanırsanız, verileri parametreye iletin. bu method yapamaz. URL'nin bir parçası olarak iletilirler.
Bir sorgu göndermek için posta yöntemini kullanırsanız, veriler Gönder () yöntemini kullanarak parametre olarak aktarılmalıdır. Ek olarak, bu yöntemi çağırmadan önce, içerik türü başlığını yüklemeniz gerekir, böylece sunucunun hangi kodlamanın isteğine geldiğini bilmesi ve deşifre edebildiği için.
Sunucudaki talebi yürütmek için gereken verileri hazırlayın. Sunucuda yürütmek için herhangi bir veriye ihtiyacınız yoksa, bu adım atlanabilir.
Bir XHR nesnesinin (XMLHTTPRequest) örneğini içerecek bir değişken oluşturun.
Açık () yöntemini kullanarak bir istek yapılandırın.
Aşağıdaki parametreler belirtilmiştir:
Komut Dosyası Öğesi İçeriği:
// 2. Bir istek oluştur Var İsteği \u003d Yeni XMLHTTPRequest (); // 3. Request.Open sorgusu ("get", "processingleme.php", true); // 4. Bir onreadystateChange olayına abone olun ve anonim fonksiyon talebini kullanarak işleme koyun. ("ReadyStateChange", işlev () () (sorgu 4 durumu ve istek durumu 200 (Tamam) ise (Request.ReadyState \u003d\u003d) 4) && (Request.Status \u003d\u003d 200)) (// Örneğin, XHR nesnesini konsol.log tarayıcı konsoluna geri çekin; // ve Alert Console.log'daki sunucudan gelen Cevap (metin) pencere (Request.ResponSetext);); // 5. REAVE.SEND () sunucusuna bir istek gönderme;
Sonuç olarak, Welcome.html dosyası aşağıdaki kodu olacaktır:
Ajax örneği
Sunucuda (PHP kullanarak):
- Veriler alıyoruz. Veriler, GET yöntemiyle gönderilirse, daha sonra Global Array $ _get ["Ad"]. Ve veriler posta yöntemi kullanılarak iletilirse, daha sonra Global Array $ _post ["İsim"].
- Bu verileri kullanarak, sunucudaki bazı işlemleri yürütün. Bunun bir sonucu olarak bir cevap alıyoruz. Yankı ile çekin.
Asenkron Ajax Sorgusu Oluşturma (Posta Yöntemi)
Yukarıdaki örneği değiştirin. Şimdi Sunucuya AJAX sorgusu düğmesine bastıktan sonra gerçekleştirilecektir. Kullanıcıya girilen giriş öğesine giren adı alacak ve posta yöntemiyle sunucuya gönderecek. Sunucudan bir yanıt aldıktan sonra, sayfadaki DIV öğesinin içeriğini değiştirin.
Ajax örneği
