AJAX WITH JQUERY. Ajax Hikayesi MODULE 11

Transkript

1 MODULE 11 AJAX WITH JQUERY Ajax Hikayesi > Microsoftun IE5 i çıkarması ile başlayan bir serüvendir. Ardından diğer browser üreticileri «durun bir dakika bu çok iyi birşey» demiş ve kendi mimarilerine ekleyerek yeni versiyonlarını hızlıca piyasa sürmüşlerdir. > Ardından Google demiştir ki «Aha! Bu tam bizim haritalara göre birşey! Dahası tüm browserlar da desteklemeye başladı, yapıyoruz!» > Aslında bu kullanım şekli bir devrim idi. Fakat herkes sistemlerinde ufak uygulamalar olarak yervermekten öteye gitmiyordu. > Sonra O geldi.

2 JJG > 2005 in başlarında kimse XML Http Request diye telafuz etmek istemiyordu. Ajax Nedir / Ne değildir? Asynchronous JavaScript And Xml > Yeni bir programlama dili değildir. > Animasyon yapımında kullanılan birşey değildir > Kötü birşey değildir, web sisteminin trafiğini düşürür > Javascript ile yazılır > Kendi başına bir teknoloji değildir, birkaç teknoloji ve yöntemin birada kullanılma konseptine verilen addır. > Kullanıcıyla sunucu arasındaki bilgi alışverişlerinde çoğunlukla XML formatı kullanılmaktadır. Önceden hazırlanan HTML, düz metin, JSON ve EBML dahi olmak üzere herhangi bir format da kullanılabilmektedir

3 DOM Objects > Çalışabilmesi için tarayıcı tarafından desteklenmesi gerekir. > IE6 için Microsoft.XMLHTTP nesnesine ihtiyaç duyar. > Diğer browserlarda ise XMLHttpRequest nesnesi üzerinden çalışmaktadır. (Not: IE7 sonrasında aynı nesne microsoft tarafına da eklenmiştir) Nasıl Çalışır? 1. Yüklenmiş sayfa istenen içeriğe göre javascript yardımıyla başka bir sayfaya string gönderir ki bu opsiyonel olarak string ya da form verisi olabilir. (get / post) 2. Javascript kodumuz bu sırada verinin gelip gelmediğini kontrol edebilir. Bunu status kodu ile kontrol ederiz, eğer status 200 değerine eşitse veri yüklenmiş demektir. 3. Gelen veri bir değişkene atanır (responsetext) 4. Artık buradan sonrası bildiğimiz javascript innerhtml kullanarak id'sini bildiğimiz bir alana veriyi yazdırabilir, ya da herhangi bir formun value'suna eşitleyerek form kutusu içine yazdırabiliriz. İşte bu kadar!

4 XmlHttpRequest > O bir JavaScript Nesnesi, yani bir Object. > Object olduğu için property leri olması gerekir > readystate > responsetext > responsexml > status > statustext XHR Properties

5 Event Handlers >onreadystatechange readystate

6 status Methods

7 Security Security jquery.ajax()

8 Security jquery.ajax() JQUERY.AJAX $.AJAX

9 $.ajax() > jquery ile birlikte gelen ajax() fonksiyonu ne işe yarar? > Asenkron http request i gerçekleştirir. > Yani XMLHttpRequest nesnesinin kolay bir kullanımını sunar. $.ajax(url [, settings])

10 Fetching Data with $.getjson $.getjson( ' ); function(data) { } alert('fetched ' + data.length + ' items!'); Fetching Data with $.getjson function(data) { $.each(data.results, function() { $('<div></div>').hide().append('<img src="' + this.profile_image_url + '" />').append('<span><a href=" +this.from_user + '">' + this.from_user + '</a> ' + this.text + '</span>').appendto('#tweets').fadein();

11 The jquery Ajax $.ajax({ type: 'GET', url: 'getdetails.php', data: { id: 142 }, success: function(data) { // grabbed some data! }; $.ajaxsetup({ type: 'POST, url: 'send.php', timeout: 3000 Common Ajax Settings

12 Example $.get("getinfo.php", function(data) { alert("got your data:" + data); $.post("setinfo.php", {id: 2, name: "DJ Darth Fader" jquery Ajax Events > When making Ajax requests with jquery, a number of events are fired. > These can be handled anytime we d like to do some extra processing $.ajax({ url: "test.html", error: function() { } alert('an error occurred!');

13 Example.progress { background: #fff url(progress.gif) no-repeat center right; } $('#ajaxinprogress').ajaxstart(function() { $(this).addclass('progress'); }).ajaxstop(function() { $(this).removeclass('progress'); Consuming XML <?xml version="1.0" encoding="utf-8"?> <celebs> <celeb id="421"> <name>johnny Stardust</name> <image>johnny_200.jpg</image> </celeb> <celeb id="422"> <name>kellie Kelly</name> <image>kellie_200.jpg</image> </celeb> </celebs>

14 Consuming XML success: function(data) { } $(data).find('celebs').children().each(function() { var node = $(this); var id = node.attr('id'); var name = node.find('name').text(); var image = node.find('image').text(); Sending Form Data <form> <input type="text" name="name" /> <input type="text" name="tags" /> <input type="hidden" name="id" /> <input type="button" value="update" /> </form>

15 Sending Form Data var form_data = $("form").serialize(); $.post(this.set_url, form_data, function() { $('#status').text('update successful!'); Sending Form Data using ajax Call $.ajax({ type: "POST", url: this.url, data: form_data, beforesend: function() { }, }, $('#ajaxdetails').addclass('progress'); error: function() { $('#status').text('update failed try again.').slidedown('slow');

16 Sending Form Data using ajax Call success: function() { $('#status').text('update successful!'); }, complete: function() { $('#ajaxdetails').removeclass('progress'); settimeout(function() { $('#status').slideup('slow'); }, 3000); } Simple Form Validation $(':submit').click(function(e) { $(':text').each(function() { if ($(this).val().length == 0) { } e.preventdefault(); $(this).css('border', '2px solid red');

17 Simple Form Validation $(':input').blur(function() { if ($(this).val().length == 0) { } $(this).addclass('error').after('<span class="error">this field must </span>'); $(':input').focus(function() { $(this).removeclass('error').next('span').remove(); The submit Event $("form").submit(function() { var error = false; $(this).find(":text").each(function() { if ($(this).val().length == 0) { } if (error) { } alert("textboxes must have a value!"); $(this).focus(); error = true; return false; // Only exits the each loop return false; return true;

18 Form Validation with Validation Plugin <div id="signup"> <h2>sign up</h2> <form action=""> <div> </div> <div> </div> <div> </div> <label for="name">name:</label> <input name="name" id="name" type="text"/> <label for=" "> </label> <input name=" " id=" " type="text"/> <label for="website">web site URL:</label> <input name="website" id="website" type="text" /> Form Validation with Validation Plugin <div> <label for="password">password:</label> <input name="password" id="password" type="password" /> </div> <div> <label for="passconf">confirm Password:</label> <input name="passconf" id="passconf" type="password" /> </div> <input type="submit" value="submit!" /> </form> </div>

19 Form Validation with Validation Plugin $('#signup form').validate({ rules: { name: {required: true, }, { required: true, true }, website: { url: true }, password: { minlength: 6, required: true }, passconf: { equalto: "#password" } }, success: function(label) { label.text('ok!').addclass('valid'); } YARDIMCI AJAX FONKSIYONLARI

20 Loading Remote HTML > $('div:first').load('test.html'); > $('#biography').load('computadors.html div:first'); > $('#biography').html('loading ').load(url); Advanced loading $('div#results').load('search.php','q=jquery&maxresults=10'); $('div#result').load('feed.php', function(data, status, response) { // Post-processing time!

21 Loading External Scripts with $.getscript $.getscript(' jquery.color.js', function() { $('body').animate({'background-color': '#fff'}, 'slow'); GET and POST Requests $.get(url, data, callback, datatype); $.post(url, data, callback, datatype); > The type parameter lets you specify the data type that will be passed on to the callback function xml, html, script, json, jsonp, or text