آژاکس

صفحه 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۴[ در بعضی از مرورگرها اجرا نمی شود یا کاربر اجرای آنرا خاموش کرده است- * بعضى از متدها و خواص آژاکس در تمام مرو رکرها وجود ندارد با بطور متفاوتی عمل می کند. لذا کد خود را با تمام مرور گرهای متداول امتحان کنید. * اگر می توانید به نحوی کاربر را از تغیبر قسمتی از صفحه آگاه نمایید. * عناصر پنهانی که توسط آژاکس ایجاد یا آشکار می شوند در موتورهای جستجو ایند کس نمی شوند. * اجازه ندهید آژاکس جای محتوای اصلی را بگیرد و فقط در قسمتهای مورد نیاز ار آن استفاده کنید.