Beginning Ajax. Asynchronous JavaScript and XML. توسط Jeese James Garrett. Ajax. Kaveh Ahmadi Beginning Ajax 2

Size: px

Start display at page:

Download "Beginning Ajax. Asynchronous JavaScript and XML. توسط Jeese James Garrett. Ajax. Kaveh Ahmadi Beginning Ajax 2"

Laurence White
6 years ago
Views:

1 Beginning Ajax سيد كاوه احمدي Ajax Asynchronous JavaScript and XML توسط Jeese James Garrett معرفي شده است. Ajax يك تكنولوژي جديد نيست. بلكه يك اصطلاح است كه به تركيب چهار تكنولوژي مختلف با يكديگر اشاره مي كند. Kaveh Ahmadi Beginning Ajax 2

2 عناصر اصلي Ajax جاوااسكريپت شيوه نامه هاي (CSS) آبشاري Document Object Model (DOM) شي XMLHttpRequest Kaveh Ahmadi Beginning Ajax 3 استفاده از شي XMLHttpRequest استفاده از اين شي سه مرحله دارد: ساخت شي XMLHttpRequest ارسال درخواست به سرور دريافت پاسخ از سرور Kaveh Ahmadi Beginning Ajax 4

3 ساخت شي XMLHttpRequest new XMLHttpRequest(); در مرورگرهاي جديد نظير فايرفاكس و اينترنت اكسپلورر 7 new ActiveXObject('Msxml2.XMLHTTP'); در اينترنت اكسپلورر 6 Kaveh Ahmadi Beginning Ajax 5 ساخت شي XMLHttpRequest var xml; try { xml = new XMLHttpRequest(); catch (e) { xml = new ActiveXObject('Msxml2.XMLHTTP'); Kaveh Ahmadi Beginning Ajax 6

4 متدهاي شي XMLHttpRequest abort open send درخواست را لغو ميكند يك درخواست به سرور را باز ميكند يك درخواست به سرور ارسال ميكند يك نام / مقدار را به هدر ارسالي اضافه ميكند setrequestheader Kaveh Ahmadi Beginning Ajax 7 خصوصيت هاي XMLHttpRequest شي the event handler that fires at every state change the state of the request the response body as string the response body as xml the HTTP status code returned by a request the text version of the HTTP status code Kaveh Ahmadi Beginning Ajax 8

5 // create the request object var xml; try { xml = new XMLHttpRequest(); catch (e) { xml = new ActiveXObject('Msxml2.XMLHTTP'); ساختار اصلي // open the socket xml.open('get', 'data.html', true); // watch for when the state of the document gets updated xml.onreadystatechange = function () { // wait until the data is fully loaded if (xml.readystate == 4) { // do something with responsexml, responsetext // xml.responsexml contains the XML Document // xml.responsetext contains the response Text ; // establish the connection xml.send(null); Kaveh Ahmadi Beginning Ajax 9 مقادير خصوصيت readystate Kaveh Ahmadi Beginning Ajax 10

6 statustext و status status statustext 200 OK 400 Bad Request 401 Unauthorized 403 Forbidden 404 Not Found 500 Internal Server Error Kaveh Ahmadi Beginning Ajax 11 دريافت پاسخ از سرور: استاتيك data.html xml.open('get', 'data.html', true); xml.onreadystatechange = function () { if (xml.readystate == 4) { alert(xml.responsetext); // You fetched me using Ajax ; You fetched me using Ajax xml.send(null); Kaveh Ahmadi Beginning Ajax 12

7 دريافت پاسخ از سرور: ديناميك data.php xml.open('get', 'data.php', true); xml.onreadystatechange = function () { if (xml.readystate == 4) { alert(xml.responsetext); // welcome to new world ; xml.send(null); processed welcome to new world Kaveh Ahmadi Beginning Ajax 13 ديتا ارسال به سرور از طريق متد GET sum.php xml.open('get', sum.php?x=1&y=2', true); xml.onreadystatechange = function () { if (xml.readystate == 4) { alert(xml.responsetext); // x+y = 3 ; xml.send(null); processed x+y = 3 Kaveh Ahmadi Beginning Ajax 14

8 ارسال ديتا به سرور از طريق متد POST xml.open('post', sum_post.php', true); xml.setrequestheader('content-type', 'application/x-www-form-urlencoded'); sum_post.php xml.onreadystatechange = function () { if (xml.readystate == 4) { alert(xml.responsetext); // x+y = 3 ; xml.send('x=1&y=2'); x+y = 3 processed Kaveh Ahmadi Beginning Ajax 15 لود اي جكس صفحات <!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Strict//EN" " <html xmlns=" <head> <title>javascript Ajax Example</title> </head> <body> <a href="#" id="page1">page 1</a> <a href="#" id="page2">page 2</a> <a href="#" id="page3">page 3</a> <div id="result"><h1> Please Choose a Page </h1></div> <script type="text/javascript" src="script.js"></script> </body> </html> Kaveh Ahmadi Beginning Ajax 16

9 لود اي جكس صفحات var m = document.getelementbyid( page1'), p = document.getelementbyid( page2'), k = document.getelementbyid( page3'); m.onclick = function () { sendrequest( page1'); ; p.onclick = function () { sendrequest( page2'); ; k.onclick = function () { sendrequest( page3'); ; Kaveh Ahmadi Beginning Ajax 17 لود اي جكس صفحات function sendrequest(id) { var xml; try { xml = new XMLHttpRequest(); catch (e) { xml = new ActiveXObject('Msxml2.XMLHTTP'); xml.open('get', id + '.html', true); xml.onreadystatechange = function () { if (xml.readystate == 4) { document.getelementbyid('result').innerhtml = xml.responsetext; ; xml.send(null); Kaveh Ahmadi Beginning Ajax 18

10 لود اي جكس صفحات با jquery جيكوي ري تابعي به اسم $.ajax براي كار با برنامههاي ايجكس دارد. اين تابع يك پارامتر ميپذيرد كه جنس اين پارامتر از نوع شي ميباشد. به وسيله خاصيتها و متدهايي اين شي ميتوان به كنترل حرفهاي و ساده ايجكس رسيد. $('[id ^= "page"]').click(function () { $.ajax({ async: false, type: 'get', url: 'AjaxPages/' + $(this).attr('id') + '.html', datatype: 'text', success: function (h) { $('#result').html(h); ); Kaveh Ahmadi Beginning Ajax 19 لود اي جكس صفحات با jquery تابع load $('[id ^= "page"]').click(function () { $('#result').load($(this).attr('id') + '.html'); ); Kaveh Ahmadi Beginning Ajax 20

11 بيشتر تنظيمات جمع دو عدد ارسال شده و چاپ نتيجه $('#calculate').click(function () { $.ajax({ async: false, type: 'get', url: sum.php', data: x=5&y=4", success: function (html) { $('#sum').html(html);, error: function() { alert('sorry, try back later');, beforesend: function() { $('#sum').html( Loading... ), ); ); sum.php Kaveh Ahmadi Beginning Ajax 21 بيشتر تنظيمات جمع دو عدد ارسال شده و چاپ نتيجه روشي ديگر $('#calculate').click(function () { $.ajax({ async: false, type: 'get', url: sum.php?x=5&y=4', success: function (html) { $('#sum').html(html);, error: function() { alert('sorry, try back later');, beforesend: function() { $('#sum').html( Loading... ), ); ); sum.php Kaveh Ahmadi Beginning Ajax 22

12 <html xmlns=" <head> <title>javascript Ajax Timeout</title> </head> <body> <div id="c">click on me</div> <div id="r"></div> <script type="text/javascript src="jquery.js"></script> <script type="text/javascript > $.ajax ({ url: 'data.php', timeout: 1000, error: function () { alert('sorry, try back later');. ); </script> </body> delay.php </html> Kaveh Ahmadi Beginning Ajax 23 تنظيم مقادير پيش فرض براي تمام درخواست ها جي كوي ري تابعي به اسم $.ajaxsetup براي اين كار دارد. $.ajaxsetup({ async: false, type: 'get', beforesend: function() { $( #loading ).show() ); ); Kaveh Ahmadi Beginning Ajax 24

13 توابع سراسري رويداد اي جكس.ajaxComplete().ajaxError().ajaxSend().ajaxStart().ajaxStop().ajaxSuccess() $('.log').ajaxcomplete(function() { $(this).text('triggered ajaxcomplete handler.'); ); Kaveh Ahmadi Beginning Ajax 25 دسترسي ساده به اي جكس.load() $('#result').load('ajax/test.html', function() { alert('load was performed.'); ); $.get() $.get("test.php", { name: "John", time: "2pm" ); $.post() $.post("test.php", { name: "John", time: "2pm" ); Kaveh Ahmadi Beginning Ajax 26

14 اي جكس و لينك هاي ثابت يكي از ايراداتي كه در برنامههاي ايجكس بهوفور يافت ميشود از بين لينكهاي ثابت درون سايت است. رفتن مثال قبل را در نظر بگيريد. با كليك بر روي اسم افراد صفحه منحصر به فرد آنها به نمايش درميآمد. اما اگر كسي بخواهد يكراست به آن صفحه برود چهطور! راه حل بسيار ساده است: استفاده از Hash ها. Kaveh Ahmadi Beginning Ajax 27 Kaveh Ahmadi Beginning Ajax 28

15 window.location Kaveh Ahmadi Beginning Ajax 29 window.location alert(window.location.hash); hash Kaveh Ahmadi Beginning Ajax 30

16 اي جكس و Hash ها همان طور كه گفته شد براي برطرف كردن مشكل لينك هاي ثابت در برنامه هاي اي جكس از هش ها استفاده مي كنيم. بدين ترتيب در اسكريپتمان كدي را اضافه مي كنيم كه ابتدا هش را چك مي كند. اگر شخصي آدرس سايت را با يك هش داشته باشد يعني مي خواهد از لينك ثابت آن صفحه استفاده كند. كاري كه ما انجام مي دهيم اين است: به جاي آن كه منتظر بمانيم كاربر درخواست بفرستد خودمان درخواست را مي فرستيم. Kaveh Ahmadi Beginning Ajax 31 Old One (Bad) <a href="#" id= page1">page 1</a> <a href="#" id= page2">page 2</a> <a href="#" id= page3">page 3</a> New One (Good) <a href="#page1" id= page1">page 1</a> <a href="#page2" id= page2">page 2</a> <a href="#page3" id= page3">page 3</a> Kaveh Ahmadi Beginning Ajax 32

بهار

3--03 جلسه ي بيست و سوم دانشگاه شهيد بهشتي دانشكدهي مهندسي برق و كامپيوتر بهار 392 احمد محمودي ازناوه http://faculties.sbu.ac.ir/~a_mahmoudi/ فهرست مطالب مروري بر جلسهي پيش مثال حافظهي نهان چند سطحي حافظهي