آژاکس

صفحه 1:
Web Programming Ajax Basic objects necessary Setting up the XMLHttpRequest object Making the call How the server responds Using the reply XML basics 

صفحه 2:
معمولا ما یکك صفحه وب را بازمی نماییم. سپس عملیاتی شبیه تکمیل فرم» ارسال اطلاعات, ناوبری منوها و ... را انجام می دهیم. در این روش ترتیبی, ما یک صفحه را درخواست می کنیم و منتظر سرور می مانیم تا به ما جواب دهد و کل صفحه را برای ما بفرستد. یعنی هر انتقال اطلاعات بین سرور و مشتری نیازمند با گذاری یک صفحه جدید است. یکی از راههای کاهش زمان پاسخگویی سرور استفاده از 3۷356۲10۴[ در طرف مشتری است. در این حالت اطلاعات قبل از ارسال به سرور در طرف مشتری بررسی می گردند. یکی از مشکلات 356۲10۴ 3۷[این بمد. که راهی برای ارتباط مستقیم آن با سرور وجود نداشت. یکی دیکر از مشکلات دسترسی این است که در بسیاری از اوقات صفحه جدید دارای مشتر کات زیادی با صفحه قبلی است و بار گذاری دوباره آنها موجب اتلاف پهنای باند و وقت کاربر خواهد شد. 

صفحه 3:
اخیرا روش مناسبی برای جایگزینی با متد بار گذار ی اانتظار اباسخ به اسم 36[ مطرح گردیده است. در آژاکس بدون اینکه فرمی ارسال شود یا صفحه جدیدی بار گذاری شود با استفاده از 3۷556۲7101[ با سرور ارتباط برقرار می گردد . آژاکس برای انجام این کار از یک شی به نام ۱۱۱۷۲۲۵۴86۵۷۵65۲ استفاده می کند. اين شئ هنوز جزء استاندارد ‎DOM (Document Object‏ ‎bol cus Model)‏ هر کدام از مرور گرها به طرق متفاوتی از آن ال ا لاا کلمه آژا کس در سال ۲۰۰۵ مطرح شد اما شی ۷۲۱۲۷۱۲۲۵۳860۵65 از سالها قبل توسط ]1 پشتیبانی می شد. 

صفحه 4:
1 cutAsynchronous JavaScript and XML sl csi Ajax استفاده معمول از آژاکس بصورت زیر است: 1 2۷2507106[ ی کش 2۱10۳60/65 1یجاد میک ند و قسمتهایبختلف آنرا مقدار دهی‌میکند سپسآنرا به سرور می‌ف رسد لسکرپو صفحه حاهعآن می‌تسولنند بسعد از ایسل یهد سرور ادلمه پسیدا کسنند ۲ سرور با ارسال متن نك فایل یا خروجی ی زبان اسکرییتی سمت سرور به مشتری. جواب می دهد. ۳ وقتی جواب به مقصد رسید. یک تابع 3۷356۲1۳1[ فعال می شود تا روی داده ها ارسالی سرور عمل نماید. > این تابع معمولا صفحه نمایش را با استفاده از 001 تازه می کند و از بارگذاری دوباره صفحه جلوگیری می کند. 

صفحه 5:
fin * به آن قسمت از آژاکس که در وب سرور قرار دارد ‎back end‏ گفته می شود. * اين ‎back end‏ می تواند یک فایل باشد که سرور آنرا به مشتری می فرستد و بعدا به مشتری نشان داده می شود. * يا می تواند یک ‎PHP. Perl. Ruby. Python 063 4 4° ash dob y‏ با 6 نوشته شده است. خروجی این برنامه به مرور گر مشتری فرستاده میی شود. * شی ۷۲۲0۳60065 برای ارسال اطلاعات از متدهای ‎POST 9 GET‏ استفاده می کند. (درست مثل فرمهای ۲۱۲۱/1) * متد 66۶۲ اطلاعات ارسالی را داخل 1٩لا‏ جاسازی می کند. در حالیکه متد 057 آنها را جدا گانه می فرستد. لذا ۳۵5 می تواند مقدار یشتری اطلاعات بفرستد. 

صفحه 6:
* قسمت 6۳0 ۴۳۵۲۴ کاربردهای آژاکس به زبان 3۷356۲10[ نوشته می شود. * قسمت 600 026۷ درخواست را پردازش کرده و پاسخ را به مشتری بر مى گرداند. معمولا ‎back End‏ یک برنامه کوتاه است که یک کار مشخص را انجام میدهد. * همچنین نیاز است که یک تابع 3۷8561101[ نوشته شود تا پاسخ 0 8۵6 را پردازش نماید و نتایج را نشان دهد. * حرف در کلمه 232 نماینده ۱۷۱1 است. 6(۲6۳51۳016) 200۱ ‎back end ©..35 .c..f HTML 4.1 Markup Language)‏ می تواند نتیجه را بصورت 261۷11 بر کرداند. در طرف مشتری می توان با استفاده از توابع پیش ساخته موجود در 3۷356710۴[ کد 26۲۷۱ را پردازش کرد. بعلاوه قسمت 60 9361 می تواند متن ساده؛ کد 111 ويا كد 8۷556۲1۳0[ بفرستد. 

صفحه 7:
شی ۱۱۱۱10860۷651 ستون فقرات متد آژا کس است. هر كاربردى بايد یک نمونه از این شی را ایجاد کند. این موضوع کاملا به نوع مرور گر وابسته است. در 59 ‎Firefox. Safari ck‏ 9 0۳6۲3 می توان يثك نمونه از این شی را به طریق زیر ایجاد نمود: <script type="text/javascript”> ajaxRequest = new XMLHttpRequest(); </script> 

صفحه 8:
fin اما مرور گر ]1 این شی را توسط تکنولوژی ۸11۷62 پشتیبانی می کند. لذا نحوه ایجاد شی متفاوت است و حتی به نسخه مرور گر نیز ارتباط دارد. برای اینکه مشکل تفاوت مرور گرها را حل کنیم ما از دستور زیر استفاده می کنیم: ۲۲۷ ) . . . ( 6۵160 )6۲۳۵۲( 1 دستور ۲۷ سعی می کند یک کد 3۷3571۳[ را اجرا کند. اگر در حين اجرا خطایی رخ دهد قبل از اينكه خطا موجب سقوط 6۲1۳0 3۷85[ شود قسمت 2۵0 دخالت می نماید. برای ایجاد شی 0۱۱۷0860۵65۲ ما از دنباله ای از دستورات ۲۲۷۰۰۰ ‎catch‏ استفاده می نماییم و راه های مختلف ابجاد شی ۱۱۱۲۲۷۲۲0۴60۷۵5۲ را امتحان می کنیم. 

صفحه 9:
function getXMLHttpRequest() /* This function attempts to get an Ajax request object by trying a few different methods for different browsers. */ 1 var request, err; try { request = new XMLHttpRequest(); | // Firefox, Safari, Opera, etc. 1 catch(err) { try { //_ first attempt for Internet Explorer request = new ActiveXObject ("MSXML2.XMLHttp.6.0") ; + catch (err) { try { //_ second attempt for Internet Explorer request = new ActivexObject (“MSXML2.XMLHttp.3.0"); } catch (err) { request = false; // oops, can’t create one! + 1 + return request; i اگر تابع فوق مقدار ۴3۵156 بر نگرداند فر آیند ایجاد شی ‎XMLHttpRequest‏ با موفقیت. انجام شده است. 1 

صفحه 10:
* شی شامل متدها و خواص متعددی است. * لیستی از مهمترین خواص و متدهای این شی در صفحه بعد آورده شده است. * ایده اصلی این است که بعد از ایجاد شی خواص آن تنظیم می گردند. این خواص شامل نحوه ارسال اطلاعات به سرور و نحوه پردازش جواب سرور است. بعضی از خواص شی توسط سرور تنظیم می شوند و وضعیت جواب سرور را مشخص کنند. 

صفحه 11:
1 Property Description readyState An integer from @. . .4. (@ means the call is uninitialized, 4 means that the call is complete. ) onreadystatechange Determines the function called when the objects readyState changes. responseText Data returned from the server as a text string (read-only). responseXML Data returned from the server as an XML document object (read-only). status HTTP status code returned by the server statusText HTTP status phrase returned by the server از روی ۲۵۵0۷51316 می فهمیم که آیا درخواست. جواب داده شده است يا نه؟سپس با چکت کردن 518105 وضعیت جواب را بررسی می کنیم. 

صفحه 12:
1 Method open(‘method’, ‘URL’, asyn) Specifies the HTTP method to be used (GET or POST as a string, the target URL, and whether or not the request should be handled asynchronously (asyn should be true or false, if omitted, true is assumed). send(content) Sends the data for a POST request and starts the request, if GET is used you should call send(null). setRequestHeader(‘x’,‘y’) Sets a parameter and value pair x=y and assigns it to the header to be sent with the request. getAllResponseHeaders () Returns all headers as a string. getResponseHeader (x) Returns header x as a string. abort() Stops the current operation. متد 06 برای تنظیم درخواست استفاده می گردد. متد 56100 نیز برای ارسال اطلاعات استفاده می شود. 

صفحه 13:
۳ ۱/۵ include the getXMLHttpRequest function defined before var ajaxRequest = getXMLHttpRequest(); if (ajaxRequest) { // if the object was created successfully ajaxRequest.onreadystatechange = ajaxResponse; ajaxRequest.open(“GET”, “search.php?query=Bob”) ajaxRequest.send(null); 1 function ajaxResponse() //This gets called when the readyState changes { if (ajaxRequest.readyState != 4) // check to see if we're done { return; } else { if (ajaxRequest.status == 200) // check to see if successful { // process server data here. . . } else { alert(“Request failed: “ + ajaxRequest.statusText) 2 2 } </script> 

صفحه 14:
این مثال از کتاب ‎Ajax in 10 Minutes by Phil‏ 0 برداشته شده است. در اين مثال ما زمان سرور را می گیریم و آنرا نمایش می دهیم. یکث د کمه نیز برای تازه کردن زمان تعبیه شده است). در این مثال نشان می دهیم چکونه آژا کس بدون اینکه کل صفحه را بار گذاری کند آنرا تغییر می دهد. در طرف سرور از یک برنامه خیلی کوچک ۳۲۸۴ که زمان را بر می گرداند استفاده می کنیم. این برنامه را به اسم 161161۳06۰۳0 ذخیره می کنیم: ‎<?php‏ echo date(‘H:i:s'); ?> 

صفحه 15:
<!DOCTYPE html PUBLIC “-//W3C//DTD XHTML 1.0 Strict//EN" | ‏+ع 5 - 11/010111 خط /يق؟‎ .00"< http: //www.w3.org/1999/xhtml" xml:Lang="en" Lang="en"> <head> <title>Ajax Demonstration</title> <style> body { background-color: #CCCcCC; text-align: cente: } -displaybox { margin: auto; width: 150px background-color: #FFFFFF: border: 2px solid #000000; padding: 10px; font: 1.5em normal verdana, helvetica, arial, sans-serif; 1 </style> <script type="text/javascript"> var ajaxRequest; function getXMLHttpRequest() /* This function attenpts to get an Ajax request object by trying a few different methods for different browsers. */ { 1 // same code as before 

صفحه 16:
function ajaxResponse() //This gets called when the readyState changes. if (ajaxRequest.readyState != 4) // check to see if we're done { return; } else { if (ajaxRequest.status = { ) // check to see if successful 2 docunent .getELementById(""showtime") .innerHTHL = ‘ajaxRequest.responseText; } else { alert("Request failed: “ + ajaxRequest.statusText); function getServerTime() // The main JavaScript for calling the update. 1 ajaxRequest = getXHLNttpRequest(); if (lajaxRequest) _{ docunent .getElenentById("'showtime").innerHTML = "Request error! return 1 var myURL = “teLLtine. ph var _myRand = parseInt (Math. random()*999999999999999) myURL = myURL + “?rand=" + myRand; ajaxRequest.onreadystatechange = ajaxResponse; ajaxRequest-open("GET", myURL); ajaxRequest -send(null); 1 </script> </head> 

صفحه 17:
<body onLoad="getServerTime() ;"> <hl>Ajax Demonstration</hi> <h2>Getting the server time without refreshing the page</h2> <form <input type="button" value="Get Server Time" onClicl </form> <div id="showtime” class=" "getServerTime( displaybox"'></div> </body> </html> ‏شی ۷۱۱۱۱۱۲۸0۴60۳0۵5 را ایجاد و تنظیم می کند و آنرا به‎ 096۳56۳۷۵۳۲3۳۵ wl waded ‏سرور می‎ ‏جواب سرور را نمایش می دهد.‎ ajaxResponse wl view the output page 

صفحه 18:
fin * ممکن است که مرو ر گر بجای ارسال اطلاعات به سرور از 63106 خودش استفاده کند. * برای جل وگیری از این موضوع. ما یک عدد تصادفی به درخواست اضافه میی کنیم تا مرور گر فکر کند که این یک درخواست تازه است و از ‎CACHES‏ ‏استفاده نکند. * این موضوع فقط هنگام استفاده از متد 622 خودش را نشان می دهد و به نظر می رسد عمده تقصیر نیز متوجه 16 است. 

صفحه 19:
پاسخ سرور که در خاصیت. ۰۳6500056766 ۱۱۱20860065۴ ذخیره شده است می تس ریت مثلا می توان به عنوان متن ساده. کد ۲1۲01 يا كد ‎ilo Fy XML‏ حتی سرور می تواند کد 3۷3571۳0۴[ نیز به ما ب رگرداند. در این حالت می توان با استفاده از متد 6۷1() کد را اجرا کرد. أما در هر صورت خاصيت. 16500056764 از نوع فقط خواندنی است. لذا قبل از ه رگونه ايد يك نمونه از آنرا ذخیره نمود. (Change the PHP script to insert HTML tags.) Example with HTML tag . (As above-change-the-PHP script.) Example using a table i id 

صفحه 20:
Here’s the script with a simple HTML tag in it. <?php. ‘echo. “<span style="color 3 و اعلا )مهمه د حرف The output with a table. مامت ‎ste =‏ Stable = ‘<table style="borde Str. gtd. date(*j HY 

صفحه 21:
‎4c: XML( eXtensible Markup Language) ;!‏ مختلفی استفاده می گردد. استفاده ما از 71/11 براى ارسال ذاده ساختار یافته است. ‏1 و ۲۱۲1/1 دارلیم شلبهتها وف راولنی‌هتند. چوزهر دو بر پسایه ‎SGML, (Standard Generalized Markup‏ ‎ty» Language)‏ نهاده شدداند. ‎Sgt SDL Labo argh utr Hf x XML ‏لما بسرچسبهای] 260/1 می‌تولنند تسوسط کایبر و بسه میلو تعریفو‎ ‏لستفاشه شسوندد‎ 

صفحه 22:
fin یک مثال: <library> <book> <title>Programming PHP</title> <author>Rasmus Lerdorf</author> <author>Kevin Tatroe</author> <author>Peter MacIntyre</author> <chapter number=“1">Introduction to PHP</chapter> <chapter number: Language Basics</chapter> <pages>521</pages> </book> </library> 

صفحه 23:
برای استفاده از یک سند 261۷1 در 3۷356۳10[ باید یک شی ایجاد کنید که آنرا نگهداری کند. مرو رگر های غیر مایکروسافت: ‎<script>‏ ‎var myXMLDoc = document. implementation. createDocument (“”,”", null);‏ ‎myXMLDoc. Load(“‘mydoc. xml”) ;‏ ‎other code here‏ // ‎</script>‏ ‏مرورگر ۱۴ ‎<script>‏ ‎var myXMLDoc new ActiveXObject (“Microsoft .XMLDOM”) ;‏ ‎myXMLDoc. async=“false”;‏ ‎myXMLDoc. load (“mydoc. xml”) ;‏ ‎other code here‏ // ‎</script>‏ بعد از ایجاد این شی می توان از متدهای 3۷3511۳[ برای بررسی و استخراج داده های آن استفاده کرد. 

صفحه 24:
* کد ۳۳۱۳ را طوری تغییر می دهیم که یک سند 261۷1 به مرور کر باز کرداند: ‎<?php‏ ‎header('Content-Type: text/xml");‏ ‎ech xml versic " 2>\1‏ ‎echo “<clock><timenow>" . date('H:i:s') . "</timenow></clock>";‏ I> * بعد ازاين تغيير, ما بايد تابع 232731865101256 را دستكارى كنيم تا بتواند کد ]267۷1 دریافتی را تجزیه و تحلیل نماید. (کد در اسلاید بعد) * دقته كنيد لازم نيست كه بصورت صريح يك سند 2111 ايجاد نمایید چون خاصیت ۲۵5۳0۳5۵26۳۷1۲ از شی 260۳۲۳۱۲۲۵۳۵0۷65 یکت شی 26101 مناسب است. 

صفحه 25:
1 function ajaxResponse() //This gets called when the readyState changes. 4 if (ajaxRequest.readyState != 4) // check to see if we're done { return; } else { if (ajaxRequest.status == 200) // check to see if successful { var timeValue = ajaxRequest. responseXML. getELementsByTagName("timenow") [0]; document. getELementById("showtime") .innerHTML = timeValue.childNodes[0].nodeValue; } else { alert("Request failed: " + ajaxRequest.statusText); + } } این تابع از یک متد 3۷3561101[ برای دسترسی به 1011/1 2601۲ استفاده می کند. 

صفحه 26:
fin * معمولا وقتی که یک فرم را پر می کنیم» فرم را به سرور می فرستیم تا آنرا بررسی نماید و نتیجه را به ما بر گرداند. در این مثال می خواهیم که حالتی را در نطر بگيريم که هنگام وارد کردن داده در فرم یک نتیجه موقت از سرور بگيریم. این مثال از کتاب 24 1۳8 2۷356۲10۲[ 5 نوشته ۱۷/۵۳۷۲ 16۱861 برداشته شده است. * فرض كنيد كه نتيجه بر گشتی لیستی از اسامی باشد که در یک آرایه ذخیره شده اند. به محض تایپ یک حرف در فیلد؛ كلمه تايب شده با لیست تطبیق داده می شود و مطابقت های جزئی بر گردانده می شوند. * در ادامه این مثال را با پایگاه داده نیز حل می کنیم. 

صفحه 27:
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Strict//EN" “http://www. w3.org/TR/xhtmL11/0TO/xhtml1-strict dtd"> <html. xmlns="http: //www.w3.0rg/1999/xhtml" xml:lang="en" Lang="en"> <head> <title>Ajax Demonstration</title> <style> </style> <script> // The JavaScript front end will be in here. </script> <body> <hi>Ajax Demonstration of Live Search</ni> <p> Search for: <input type="text" id="searchstring" /> results"> "List"> <lioResults will be displayed here.</li> </> </div> fext/javascript"> // This sets up the event handler to start the 7 search function. // var obj=document .getELementById("searchstring” // obj -onkeydown = startSearch; </script> </body> </html> <script typi 

صفحه 28:
<?php header ("Content-Ty| ۳9 e = array( john Wayne”, “John Carpenter", “Elizabeth Shue", ou Costello", "Bud Abbott", "Albert Einstein", "Rich Hall", Jichelle Rodriguez", “Carmen Miranda”, Moe Howard", “Ulysses S. Grant", “Stephen Fry", "Kurt Vonnegut", “Yosemite Sam", “Ed Norton", "George Armstrong Custer", "Alice Kramden", “Evangeline Lilly", Harlan’ Ellison") ; if(!$query) $query = $ GET['query']; echo “<?xml version=\"1.0\"7>\n echo “<names>\n"; while (List($k,$v) = each ($people)) { if (stristr ($v, $query)) echo "<name>$v</name>\n"; 1 echo ‘</names>'; > این که یکت برس وجو را هى كيرد و آثرا با آرايه مها مطابقت مى دهد. سبس تامهاى مطابقت يافته را پصورت یکت ‎ML‏ ‏برمی گر3اند. 

صفحه 29:
در طرف 3۷55۲7101[ ما با استفاده از خاصیت 0۳۵۱0۷۷۲ یکت تابع را صدا می زنیم. این تابع یک زمان سنج را روشن می کند و بعد از 5 تقابع »13۷۰562۳ را صدا می زند. var t; // public variable for the timeout function startSearch() { if (t) window.clearTimeout(t) ; t = window.setTimeout ("“LliveSearch()",200) ; 1 تابع مء,دء5ء11 همان ‎Sley! 15 XMLHttpRequest (28 bo AF Cun! ole‏ 9 تنظیم می کنیم و کد ۳۳۱۳ را صدا می زنیم. 

صفحه 30:
function liveSearch() 4 ajaxRequest = getXMLHttpRequest(); if (!ajaxRequest) alert("Request error! var myURL = "search. php"; var query = document. getElementById("searchstring") .value; myURL = myURL + "2query=" + query; ajaxRequest .onreadystatechange = ajaxResponse; ajaxRequest .open("GET", myURL); ajaxRequest send (null); 7 function ajaxResponse() //This gets called when the readyState changes. 1 if (ajaxRequest.readyState != 4) // check to see if we're done { return; else { if (ajaxRequest.status == 200) // check to see if successful { displaySearchResults(); } else { alert("Request failed: " + ajaxRequest.statusText); 7 

صفحه 31:
۱ ‏دغ انعم ماع موكرمام معتل‎ )( // This function will display the search results, and is the 7/ callback function for the Ajax request. { var i, n, Ui, t; var ul = document.getElementById("List"); var div = document. getElementById(""results"); div.removeChild(ul); // delete the old search results ul = document.createElement("UL"); // create a new list container ul.id="List"; st object jaxRequest . responseXML..getElenentsByTagName(“name") ; // get the results from the search req var name: for (i = 0; 4 < names. length; it+) 1 14 jocument.createElenent ("LI"); // create a new list elenent names [i]. firstChild.nodevalue; +t = docunent.createTextNode(n) ; مم 1 uL-appendchitd(Li) 1 if (names.length == 6) { // if no results are found, say so i = document .createElement("LI"); ۱۳ ‏كع اهعم 016") عله لكيه ممعم‎ ."(( uL-appendchitd(1i); 0 div.appendchild(ul); // display the new list View the output 1 page 

صفحه 32:
در مثال قبلى بجاى ذخيره نامها در نكث آرایه می توانيیآنها را در یک پایگاه داده ذخیره ‎sled‏ نیازی به تغيير كد هرتخد 001 ‎SS APES Sune‏ ره ~ 12 | ‎versions\"1.0\"7>\0";‏ اهر مه ‏و ‎ ‎ ‎4) ‏سنوی (رمعنوو۱‎ = strtoupper(s_GETI ‘query'] ‎ittsquery ۱ ‏ل“‎ ‎4 ‎ ‎include _once(‘db_access.php"): Sconnection = mySqlconect (Sab host, §db_usernane, Sab_password); Ef tseonnection) ‎exit(*Could not connect to the database: <br/>". htalspeciatchars(mysal_error)): ‎> ‎saysal_select_db(Sdb_ database): ‎ ‎sselect = “SELECT Scolunn = "nase ‎ ‎ ‎Strom = “FRoH Stables = "people Svhere = "WHERE =; ‎ ‎Scondition = “upper(nane) LIKE ‏معدو"‎ ‎$S0L_query = hemlentities(sselect . scolum . from . stables . Suhere . condition); Sresalt = mysql_query ($s0L query); ‎se (rou = apt fetch Foi Sreute) ‎‘echo “enane>" . $row(0] . “</nane>\n": ‎aysal_close( connection); ‎view the output‏ زورب" ماو ‎page‏ ‎ 

صفحه 33:
۰ _کد 3۷35610۴[ در بعضی از مرورگرها اجرا نمی شود یا کاربر اجرای آنرا خاموش کرده است- * بعضى از متدها و خواص آژاکس در تمام مرو رکرها وجود ندارد با بطور متفاوتی عمل می کند. لذا کد خود را با تمام مرور گرهای متداول امتحان کنید. * اگر می توانید به نحوی کاربر را از تغیبر قسمتی از صفحه آگاه نمایید. * عناصر پنهانی که توسط آژاکس ایجاد یا آشکار می شوند در موتورهای جستجو ایند کس نمی شوند. * اجازه ندهید آژاکس جای محتوای اصلی را بگیرد و فقط در قسمتهای مورد نیاز ار آن استفاده کنید. 

Web Programming Ajax Basic objects necessary Setting up the XMLHttpRequest object Making the call How the server responds Using the reply XML basics The usual way we operate in the Web • معموال ما یک صفحه وب را بازمی نماییم .سپس عملیاتی شبیه تکمیل فرم ،ارسال اطالعات ،ناوبری منوها و ...را انجام می دهیم. • در این روش ترتیبی ،ما یک صفحه را درخواست می کنیم و منتظر سرور می مانیم تا به ما جواب دهد و کل صفحه را برای ما بفرستد. • یعنی هر انتقال اطالعات بین سرور و مشتری نیازمند بارگذاری یک صفحه جدید است. • یکی از راههای کاهش زمان پاسخگویی سرور استفاده از JavaScriptدر طرف مشتری است .در این حالت اطالعات قبل از ارسال به سرور در طرف مشتری بررسی می گردند. • یکی از مشکالت JavaScriptاین بوHد که راهی برای ارتباط مستقیم آن با سرور وجود نداشت. • یکی دیگر از مشکالت دسترسی ترتیبی این است که در بسیاری از اوقات صفحه جدید دارای مشترکات زیادی با صفحه قبلی است و بار گذاری دوباره آنها موجب اتالف پهنای باند و وقت کاربر خواهد شد. …Things change • • • • • اخیرا روش مناسبی برای جایگزینی با متد بارگذاری/انتظار/پاسHخ به اسم Ajaxمطرح گردیده است. در آژاکس بدون اینکه فرمی ارسال شود یا صفحه جدیدی بارگذاری شود ،با استفاده از JavaScriptبا سرور ارتباط برقرار می گردد . آژاکس برای انجام این کار از یک شئ به نام XMLHttpRequest استفاده می کند. این شئ هنوز جزء استاندارد DOM (Document Object ) Modelنیست .اما هر کدام از مرورگرها به طرق متفاوتی از آن پشتیبانی می کنند. کلمه آژاکس در سال 2005مطرح شد اما شئ XMLHttpRequestاز سالها قبل توسط IEپشتیبانی می شد. Ajax ‏Hست AjaxمHخففکHHلمه Asynchronous JavaScript and XML Hا . استفاده معمول از آژاکس بصوHرت زیر است:H JavaScript .1یHHکشHHئ XMLHttpRequestاHیجاد مHیکHHند و قHHسمتهHایمHختلف ‏Hریپت صHHفحه HحHاوHیآن و آنرا مHقدار دHهیمHیکHHند .سHHپسآنرا بHHHه HسHHرور مHیفHHرستد .اHسک شHHئبHHHه HسHHرور اداHمHه HپHHیدا کHHنند. مHیتHHواHنHند بHHHعHد از ارHساHل سرور با ارسال متن یک فایل یا خروجی یک زبان اسکریپتی سمت سرور ،به مشتریH .2 جواب می دهد. وقتی جواب به مقصد رسید ،یک تابع JavaScriptفعال می شود تا روی داده .3 های Hارسالی سرور عمل نماید. این تابع معموال صفحه نمایش را با استفاده از DOMتازه می کند و از بارگذاری .4 دوباره صفحه جلوگیری Hمی کند. The Back End • • • • • به آن قسمت از آژاکس که در وب سرور قرار دارد back endگفته می شود. این back endمی تواند یک فایل باشد که سرور آنرا به مشتری می فرستد و بعدا به مشتری نشان داده می شود. یا می تواند یک برنامه باشد که به زبان PHP، Perl، Ruby، Python یا Cنوشته شده اسHت .خروجی این برنامه به مرورگر مشتری فرستاده می شود. شئ XMLHttpRequestبرای ارسال اطالعات از متدهای GETو POST استفاده می کند( .درست مثل فرمهای )HTML متد GETاطالعات ارسالی را داخل URLجاسازی می کند .در حالیکه متد POSTآنها را جداگانه می فرستد .لذا POSTمی تواند مقدار بیشتری اطالعات بفرستد. Writing an Ajax application • • • • قسمت front endکاربردهای آژاکس به زبان JavaScriptنوشته می شود. قسمت back endدرخواست را پردازش کرده و پاسخ را به مشتری بر می گرداند .معموال back endیک برنامه کوتاه است که یک کار مشخص را انجام میدهد. همچنین نیاز است که یک تابع JavaScriptنوشته شود تا پاسخ back endرا پردازش نماید و نتایج را نشان دهد. حرف xدر کلمه Ajaxنماینده XMLاستXML (eXtensible . ) Markup Languageشبیه HTMLاست .قسمت back end می تواند نتیجه را بصورت XMLبرگرداند .در طرف مشتری می توان با استفاده از توابع پیش ساخته موجود در JavaScriptکد XMLرا پردازش کرد .بعالوه قسمت back endمی تواند متن ساده ،کد HTMLو یا کد JavaScriptبفرستد. The XMLHttpRequest object شئ XMLHttpRequestستون فقرات متد آژاکس است .هر کاربردی باید یک نمونه از این شئ را ایجاد کند. این موضوع کامال به نوع مرورگر وابسته است. در مرورگرهای Firefox، Safariو Operaمی توان یک نمونه از این شئ را به طریق زیر ایجاد نمود: >”<script type=“text/javascript ;)(ajaxRequest = new XMLHttpRequest ></script )The XMLHttpRequest object (cont. • اما مرور گر IEاین شئ را توسط تکنولوژی ActiveXپشتیبانی می کند. لذا نحوه ایجاد شئ متفاوت است و حتی به نسخه مرورگر نیز ارتباط دارد. • برای اینکه مشکل تفاوت مرورگرها را حل کنیم ما از دستور زیر استفاده می کنیم: • )} . . . { try { . . . } catch (error • دستور tryسعی می کند یک کد JavaScriptرا اجرا کند .اگر در حین اجرا خطایی رخ دهد ،قبل از اینکه خطا موجب سقوط JavaScriptشود قسمت Catchدخالت می نماید. • برای ایجاد شئ XMLHttpRequestما از دنباله ای از دستورات …try catchاستفاده می نماییم و راه های مختلف ایجاد شHئ XMLHttpRequest را امتحان می کنیم. The XMLHttpRequest object (cont.) function getXMLHttpRequest() /* This function attempts to get an Ajax request object by trying a few different methods for different browsers. */ { var request, err; try { request = new XMLHttpRequest(); // Firefox, Safari, Opera, etc. } catch(err) { try { // first attempt for Internet Explorer request = new ActiveXObject("MSXML2.XMLHttp.6.0"); } catch (err) { try { // second attempt for Internet Explorer request = new ActiveXObject("MSXML2.XMLHttp.3.0"); } catch (err) { request = false; // oops, can’t create one! } } } return request; } H با موفقیتXMLHttpRequest بر نگرداند فرآیند ایجاد شئfalse اگر تابع فوق مقدار .انجام شده است )The XMLHttpRequest object (cont. • شئ شامل متدها و خواص متعددی است. • لیستی از مهمترین خواص و متدهای این شئ در صفحه بعد آورده شده است. • ایده اصلی این است که بعد از ایجاد شئ خواص آن تنظیم می گردند .این خواص شامل نحوه ارسال اطالعات به سرور و نحوه پردازش جواب سرور است .بعضی از خواص شئ توسط سرور تنظیم می شوند و وضعیت جواب سرور را مشخص کنند. XMLHttpRequest object properties Property readyState onreadystatechange responseText responseXML status statusText Description An integer from 0. . .4. (0 means the call is uninitialized, 4 means that the call is complete.) Determines the function called when the objects readyState changes. Data returned from the server as a text string (read-only). Data returned from the server as an XML document object (read-only). HTTP status code returned by the server HTTP status phrase returned by the server جواب داده شده است یا نه؟سپس با چکH می فهمیم که آیا درخواستreadyState از روی . وضعیت جواب را بررسی می کنیمstatus کردن XMLHttpRequest object methods Method open(‘method’, ’URL’, asyn) send(content) setRequestHeader(‘x’,‘y’) getAllResponseHeaders() getResponseHeader(x) abort() Description Specifies the HTTP method to be used (GET or POST as a string, the target URL, and whether or not the request should be handled asynchronously (asyn should be true or false, if omitted, true is assumed). Sends the data for a POST request and starts the request, if GET is used you should call send(null). Sets a parameter and value pair x=y and assigns it to the header to be sent with the request. Returns all headers as a string. Returns header x as a string. Stops the current operation. . تنظیم درخواست استفاده می گرددH برایopen متد . نیز برای ارسال اطالعات استفاده می شودsend متد A general skeleton for an Ajax application <script type=“text/javascript”> // ***** include the getXMLHttpRequest function defined before var ajaxRequest = getXMLHttpRequest(); if (ajaxRequest) { // if the object was created successfully ajaxRequest.onreadystatechange = ajaxResponse; ajaxRequest.open(“GET”, “search.php?query=Bob”); ajaxRequest.send(null); } function ajaxResponse() //This gets called when the readyState changes. { if (ajaxRequest.readyState != 4) // check to see if we’re done { return; } else { if (ajaxRequest.status == 200) // check to see if successful { // process server data here. . . } else { alert(“Request failed: “ + ajaxRequest.statusText); } } } </script> A first example • • • • این مثال از کتاب Ajax in 10 Minutes by Phil Ballardبرداشته شده است. در این مثال ما زمان سرور را می گیریم و آنرا نمایش می دهیم .یک دکمه نیز برای تازه کردن زمان تعبیه شده است). در این مثال نشان می دهیم چگونه آژاکس بدون اینکه کل صفحه را بارگذاری کند آنرا تغییر می دهد. در طرف سرور از یک برنامه خیلی کوچک PHPکه زمان را بر می گرداند استفاده می کنیم .این برنامه را به اسم telltime.phpذخیره می کنیم: <?php ;)'echo date('H:i:s >? <!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Strict//EN" "http://www.w3.org/TR/xhtml11/DTD/xhtml1-strict.dtd"> <html xmlns="http://www.w3.org/1999/xhtml" xml:lang="en" lang="en"> <head> <title>Ajax Demonstration</title> <style> body { background-color: #CCCCCC; text-align: center; } .displaybox { margin: auto; width: 150px; background-color: #FFFFFF; border: 2px solid #000000; padding: 10px; font: 1.5em normal verdana, helvetica, arial, sans-serif; } </style> <script type="text/javascript"> var ajaxRequest; function getXMLHttpRequest() /* This function attempts to get an Ajax request object by trying a few different methods for different browsers. */ { // same code as before. . . } function ajaxResponse() //This gets called when the readyState changes. { if (ajaxRequest.readyState != 4) // check to see if we're done { return; } else { if (ajaxRequest.status == 200) // check to see if successful { document.getElementById("showtime").innerHTML = ajaxRequest.responseText; } else { alert("Request failed: " + ajaxRequest.statusText); } } } function getServerTime() // The main JavaScript for calling the update. { ajaxRequest = getXMLHttpRequest(); if (!ajaxRequest) { document.getElementById("showtime").innerHTML = "Request error!"; return; } var myURL = "telltime.php"; var myRand = parseInt(Math.random()*999999999999999); myURL = myURL + "?rand=" + myRand; ajaxRequest.onreadystatechange = ajaxResponse; ajaxRequest.open("GET", myURL); ajaxRequest.send(null); } </script> </head> <body onLoad="getServerTime();"> <h1>Ajax Demonstration</h1> <h2>Getting the server time without refreshing the page</h2> <form> <input type="button" value="Get Server Time" onClick="getServerTime();" /> </form> <div id="showtime" class="displaybox"></div> </body> </html> را ایجاد و تنظیم می کند و آنرا بهXMLHttpRequest () شئgetServerTime تابع .سرور می فرستد . جواب سرور را نمایش می دهدajaxResponse تابع view the output page ?What’s this business with the random numbers • ممکن است که مرورگر بجای ارسال اطالعات به سرور از cacheخودش استفاده کند. • برای جلوگیری از این موضوع ،ما یک عدد تصادفی به درخواست اضافه می کنیم تا مرورگر فکر کند که این یک درخواست تازه است و از cache استفاده نکند. • این موضوع فقط هنگام استفاده از متد GETخودش را نشان می دهد و به نظر می رسد عمده تقصیر نیز متوجه IEاست. Sending text back the server پاسخ سرور که در خاصیتXMLHttpRequest.responseText H ذخیره شده است Hمی تواند به هر فرمتی باشد. مثال می توان به عنوان متن ساده ،کد HTMLیا کد XMLبرگرداند. حتی سرور می تواند کد JavaScriptنیز به ما برگرداند .در این حالت Hمی توان با استفاده از متد )(evalکد را اجرا کرد. اما در هر صورت خاصیت responseText Hاز نوع فقط خواندنی است .Hلذا قبل از هرگونه تغییر باید یک نمونه از آنرا ذخیره نمود. )(Change the PHP script to insert HTML tags. ‏Example with ‏HTML tag )(As above, change the PHP script. ‏Example using a ‏table The other PHP scripts for the time examples Here’s the script with a simple HTML tag in it. <?php echo '<span style="color: red;">' . date('H:i:s') . "</span>"; ?> The output with a table. <?php $tr = '<tr style="border: 2px solid;">'; $td = '<td style="border: 2px solid">'; $table = '<table style="border: 2px solid; margin: auto;">'; $table .= $tr . $td . date('j M Y') . '</td></tr>'; $table .= $tr . $td . date('H:i:s') . '</td></tr>'; $table .= '</table>'; echo $table; ?> XML: a (very) brief intro از ) XML( eXtensible Markup Languageبصورت مختلفی استفاده می گردد .استفاده ما از XMLبرای ارسال داده ساختار یافته است. XMLو HTMLداراHیمHشHابHهتهHایفHHراواHنHیهستند .چHونهر دو بHHر پHHایهH ‏SGML, (Standard Generalized Markup ) LanguageبHHHنا نHHهHادHه HشHHده HاHند. ‏HنطHالعاتسHHنداHستفادHه HمHیکHHند. بHHراHیمHشخصکHHرد اH XMLنHHیز از بHHرچHسب اHما بHHرچHسبهHای XMLمHیتHHواHنHند تHHوسطکHHارHبر و بHHHه HمHیلاو تHHعHریفو اHستفادHه HشHHوند. XML: a (very) brief intro (cont.) :یک مثال <library> <book> <title>Programming PHP</title> <author>Rasmus Lerdorf</author> <author>Kevin Tatroe</author> <author>Peter MacIntyre</author> <chapter number=“1”>Introduction to PHP</chapter> <chapter number=“2”>Language Basics</chapter> . . . <pages>521</pages> </book> . . . </library> Accessing an XML document in JavaScript باید یک شئ ایجاد کنید که آنراJavaScript درXML برای استفاده از یک سند .نگهداری کند :مرورگر های غیر مایکروسافت <script> var myXMLDoc = document.implementation.createDocument(“”,””,null); myXMLDoc.load(“mydoc.xml”); // other code here </script> IE مرورگر <script> var myXMLDoc = new ActiveXObject(“Microsoft.XMLDOM”); myXMLDoc.async=“false”; myXMLDoc.load(“mydoc.xml”); // other code here </script> برای بررسی و استخراجJavaScript بعد از ایجاد این شئ می توان از متدهای .داده های آن استفاده کرد The “time” example using XML • کد PHPرا طوری تغییر می دهیم که یک سند XMLبه مرورگر باز گرداند: ;">"</timenow></clock <?php ;)'header('Content-Type: text/xml ;”echo "<?xml version=\"1.0\" ?>\n ‏echo “<clock><timenow>" . date('H:i:s') . >? • بعد از این تغییر ،ما باید تابع ajaxResponseرا دستکاری کنیم تا بتواند کد XMLدریافتی را تجزیه و تحلیل نماید( .کد در اسالید بعد) • دقت Hکنید الزم نیست که بصورت صریح یک سند XMLایجاد نمایید چون خاصیت responseXMLاز شئ XMLHttpRequestیک شئ XMLمناسب است. The new Ajax response function function ajaxResponse() //This gets called when the readyState changes. { if (ajaxRequest.readyState != 4) // check to see if we're done { return; } else { if (ajaxRequest.status == 200) // check to see if successful { var timeValue = ajaxRequest.responseXML.getElementsByTagName("timenow")[0]; document.getElementById("showtime").innerHTML = timeValue.childNodes[0].nodeValue; } else { alert("Request failed: " + ajaxRequest.statusText); } } } XML DOM برای دسترسی بهJavaScript این تابع از یک متد .استفاده می کند view the output page )A second example (live search • معموال وقتی که یک فرم را پر می کنیم ،فرم را به سرور می فرستیم تا آنرا بررسHی نماید و نتیجه را به ما برگرداند .در این مثال می خواهیم که حالتی را در نطر بگیریم که هنگام وارد کردن داده در فرم یک نتیجه موقت از سرور بگیریم .این مثال از کتاب JavaScript in 24 Hoursنوشته Michael Moncurبرداشته شده است. • فرض کنیدکه نتیجه برگشتی لیستی از اسامی باشد که در یک آرایه ذخیره شده اند .به محض تایپ یک حرف در فیلد ،کلمه تایپ شده با لیست تطبیق داده می شود و مطابقت های جزئی برگردانده می شوند. • در ادامه این مثال را با پایگاه داده نیز حل می کنیم. The HTML layout (no JavaScript yet) <!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Strict//EN" "http://www.w3.org/TR/xhtml11/DTD/xhtml1-strict.dtd"> <html xmlns="http://www.w3.org/1999/xhtml" xml:lang="en" lang="en"> <head> <title>Ajax Demonstration</title> <style> </style> <script> // The JavaScript front end will be in here. </script> <body> <h1>Ajax Demonstration of Live Search</h1> <p> Search for: <input type="text" id="searchstring" /> </p> <div id="results"> <ul id="list"> <li>Results will be displayed here.</li> </ul> </div> <script type="text/javascript"> // This sets up the event handler to start the // search function. // var obj=document.getElementById("searchstring"); // obj.onkeydown = startSearch; </script> </body> </html> The PHP backend <?php header("Content-Type: text/xml"); $people = array( "Abraham Lincoln", "Martin Luther King", "Jimi Hendrix", "John Wayne", "John Carpenter", "Elizabeth Shue", "Benny Hill", "Lou Costello", "Bud Abbott", "Albert Einstein", "Rich Hall", "Anthony Soprano", "Michelle Rodriguez", "Carmen Miranda", "Sandra Bullock", "Moe Howard", "Ulysses S. Grant", "Stephen Fry", "Kurt Vonnegut", "Yosemite Sam", "Ed Norton", "George Armstrong Custer", "Alice Kramden", "Evangeline Lilly", "Harlan Ellison"); if(!$query) $query = $_GET['query']; echo "<?xml version=\"1.0\"?>\n"; echo "<names>\n"; while (list($k,$v) = each ($people)) { if (stristr ($v, $query)) echo "<name>$v</name>\n"; } echo '</names>'; ?> XML ای مطابقت یافته را بصورت یک سندH سپس نامه.این کد یک پرس وجو را می کیرد و آنرا با آرایه نامها مطابقت می دهد .برمی گرداند The JavaScript functions یکonkeydown ما با استفاده از خاصیتJavaScript در طرف این تابع یک زمان سنج را روشن می کند و بعد از.تابع را صدا می زنیم . را صدا می زندliveSearch تابع200ms var t; // public variable for the timeout function startSearch() { if (t) window.clearTimeout(t); t = window.setTimeout("liveSearch()",200); } را ایجاد وXMLHttpRequest همان جایی است که ما شئliveSearch تابع . را صدا می زنیمPHP تنظیم می کنیم و کد The JavaScript functions (cont.) function liveSearch() { ajaxRequest = getXMLHttpRequest(); if (!ajaxRequest) alert("Request error!"); var myURL = "search.php"; var query = document.getElementById("searchstring").value; myURL = myURL + "?query=" + query; ajaxRequest.onreadystatechange = ajaxResponse; ajaxRequest.open("GET", myURL); ajaxRequest.send(null); } function ajaxResponse() //This gets called when the readyState changes. { if (ajaxRequest.readyState != 4) // check to see if we're done { return; } else { if (ajaxRequest.status == 200) // check to see if successful { displaySearchResults(); } else { alert("Request failed: " + ajaxRequest.statusText); } } } The JavaScript functions (cont.) function displaySearchResults() // This function will display the search results, and is the // callback function for the Ajax request. { var i, n, li, t; var ul = document.getElementById("list"); var div = document.getElementById("results"); div.removeChild(ul); // delete the old search results ul = document.createElement("UL"); // create a new list container ul.id="list"; // get the results from the search request object var names=ajaxRequest.responseXML.getElementsByTagName("name"); for (i = 0; i < names.length; i++) { li = document.createElement("LI"); // create a new list element n = names[i].firstChild.nodeValue; t = document.createTextNode(n); li.appendChild(t); ul.appendChild(li); } if (names.length == 0) { // if no results are found, say so li = document.createElement("LI"); li.appendChild(document.createTextNode("No results.")); ul.appendChild(li); } div.appendChild(ul); // display the new list } view the output page Using a database for the live search به تغییر کدH نیازی.در مثال قبلی بجای ذخیره نامها در یک آرایه می توانیم آنها را در یک پایگاه داده ذخیره نماییم . جدید در زیر آورده شده استPHP کد. نیستJavaScript <?php header("Content-Type: text/xml"); echo "<?xml version=\"1.0\"?>\n"; echo "<names>\n"; if(!$query) $query = strtoupper($_GET['query']); if($query != "") { include_once('db_access.php'); $connection = mysql_connect($db_host, $db_username, $db_password); if(!$connection) { exit("Could not connect to the database: <br/>" . htmlspecialchars(mysql_error)); } mysql_select_db($db_database); $select = "SELECT "; $column = "name "; $from = "FROM "; $tables = "people "; $where = "WHERE "; $condition = "upper(name) LIKE '%$query%'"; $SQL_query = htmlentities($select . $column . $from . $tables . $where . $condition); $result = mysql_query($SQL_query); while ($row = mysql_fetch_row($result)) { echo "<name>" . $row[0] . "</name>\n"; } mysql_close($connection); } echo "</names>"; ?> view the output page Some cautions • کد JavaScriptدر بعضی از مرورگرها اجرا نمی شود یا کاربر اجرای Hآنرا خاموش کرده است.H • بعضی از متدها و خواص آژاکس در تمام مرورگرها وجود ندارد یا بطور متفاوتی عمل می کند .لذا کد خود را با تمام مرورگرهای متداول امتحان کنید. • اگر می توHانید به نحوی کاربر را از تغییر قسمتی از صفحه آگاه نمایید. • عناصر پنهانی که توسط آژاکس ایجاد یا آشکار می شوند در موتورهای جستجو ایندکس نمHی شوند. • اجازه ندهید آژاکس جای محتوای اصلی را بگیرد و فقط در قسمتهای مورد نیاز ار آن استفاده کنید.