آژاکس

آژاکس

اسلاید 1: Web ProgrammingAjaxBasic objects necessarySetting up the XMLHttpRequest objectMaking the callHow the server respondsUsing the replyXML basics

اسلاید 2: The usual way we operate in the Webمعمولا ما یک صفحه وب را بازمی نماییم. سپس عملیاتی شبیه تکمیل فرم، ارسال اطلاعات، ناوبری منوها و ... را انجام می دهیم.در این روش ترتیبی، ما یک صفحه را درخواست می کنیم و منتظر سرور می مانیم تا به ما جواب دهد و کل صفحه را برای ما بفرستد.یعنی هر انتقال اطلاعات بین سرور و مشتری نیازمند بارگذاری یک صفحه جدید است.یکی از راههای کاهش زمان پاسخگویی سرور استفاده از JavaScript در طرف مشتری است. در این حالت اطلاعات قبل از ارسال به سرور در طرف مشتری بررسی می گردند.یکی از مشکلات JavaScript این بود که راهی برای ارتباط مستقیم آن با سرور وجود نداشت.یکی دیگر از مشکلات دسترسی ترتیبی این است که در بسیاری از اوقات صفحه جدید دارای مشترکات زیادی با صفحه قبلی است و بار گذاری دوباره آنها موجب اتلاف پهنای باند و وقت کاربر خواهد شد.

اسلاید 3: Things change…اخیرا روش مناسبی برای جایگزینی با متد بارگذاری/انتظار/پاسخ به اسم Ajax مطرح گردیده است. در آژاکس بدون اینکه فرمی ارسال شود یا صفحه جدیدی بارگذاری شود، با استفاده از JavaScript با سرور ارتباط برقرار می گردد . آژاکس برای انجام این کار از یک شئ به نام XMLHttpRequest استفاده می کند.این شئ هنوز جزء استاندارد DOM (Document Object Model) نیست. اما هر کدام از مرورگرها به طرق متفاوتی از آن پشتیبانی می کنند.کلمه آژاکس در سال 2005 مطرح شد اما شئ XMLHttpRequest از سالها قبل توسط IE پشتیبانی می شد.

اسلاید 4: AjaxAjax مخفف کلمه Asynchronous JavaScript and XML است. استفاده معمول از آژاکس بصورت زیر است:JavaScript یک شئ XMLHttpRequest ایجاد می کند و قسمتهای مختلف آنرا مقدار دهی می کند. سپس آنرا به سرور می فرستد. اسکریپت و صفحه حاوی آن می توانند بعد از ارسال شئ به سرور ادامه پیدا کنند. سرور با ارسال متن یک فایل یا خروجی یک زبان اسکریپتی سمت سرور، به مشتری جواب می دهد.وقتی جواب به مقصد رسید، یک تابع JavaScript فعال می شود تا روی داده های ارسالی سرور عمل نماید.این تابع معمولا صفحه نمایش را با استفاده از DOM تازه می کند و از بارگذاری دوباره صفحه جلوگیری می کند.

اسلاید 5: The Back Endبه آن قسمت از آژاکس که در وب سرور قرار دارد back end گفته می شود.این back end می تواند یک فایل باشد که سرور آنرا به مشتری می فرستد و بعدا به مشتری نشان داده می شود.یا می تواند یک برنامه باشد که به زبان PHP، Perl، Ruby، Python یا C نوشته شده است. خروجی این برنامه به مرورگر مشتری فرستاده می شود.شئ XMLHttpRequest برای ارسال اطلاعات از متدهای GET و POST استفاده می کند. (درست مثل فرمهای HTML)متد GET اطلاعات ارسالی را داخل URL جاسازی می کند. در حالیکه متد POST آنها را جداگانه می فرستد. لذا POST می تواند مقدار بیشتری اطلاعات بفرستد.

اسلاید 6: 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 بفرستد.

اسلاید 7: The XMLHttpRequest objectشئ XMLHttpRequest ستون فقرات متد آژاکس است. هر کاربردی باید یک نمونه از این شئ را ایجاد کند.این موضوع کاملا به نوع مرورگر وابسته است.در مرورگرهای Firefox، Safari و Opera می توان یک نمونه از این شئ را به طریق زیر ایجاد نمود: <script type=“text/javascript”> ajaxRequest = new XMLHttpRequest(); </script>

اسلاید 8: The XMLHttpRequest object (cont.)اما مرور گر IE این شئ را توسط تکنولوژی ActiveX پشتیبانی می کند. لذا نحوه ایجاد شئ متفاوت است و حتی به نسخه مرورگر نیز ارتباط دارد. برای اینکه مشکل تفاوت مرورگرها را حل کنیم ما از دستور زیر استفاده می کنیم:try { . . . } catch (error) { . . . } دستور try سعی می کند یک کد JavaScript را اجرا کند. اگر در حین اجرا خطایی رخ دهد، قبل از اینکه خطا موجب سقوط JavaScript شود قسمت Catch دخالت می نماید. برای ایجاد شئ XMLHttpRequest ما از دنباله ای از دستورات try…catch استفاده می نماییم و راه های مختلف ایجاد شئ XMLHttpRequest را امتحان می کنیم.

اسلاید 9: 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; }اگر تابع فوق مقدار false بر نگرداند فرآیند ایجاد شئ XMLHttpRequest با موفقیت انجام شده است.

اسلاید 10: The XMLHttpRequest object (cont.)شئ شامل متدها و خواص متعددی است. لیستی از مهمترین خواص و متدهای این شئ در صفحه بعد آورده شده است.ایده اصلی این است که بعد از ایجاد شئ خواص آن تنظیم می گردند. این خواص شامل نحوه ارسال اطلاعات به سرور و نحوه پردازش جواب سرور است. بعضی از خواص شئ توسط سرور تنظیم می شوند و وضعیت جواب سرور را مشخص کنند.

اسلاید 11: XMLHttpRequest object properties Property Description readyState An integer from 0. . .4. (0 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 serverstatusText HTTP status phrase returned by the serverاز روی readyState می فهمیم که آیا درخواست جواب داده شده است یا نه؟سپس با چک کردن status وضعیت جواب را بررسی می کنیم.

اسلاید 12: XMLHttpRequest object methodsMethod Descriptionopen(‘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.متد open برای تنظیم درخواست استفاده می گردد.متد send نیز برای ارسال اطلاعات استفاده می شود.

اسلاید 13: A general skeleton for an Ajax application<script type=“text/javascript”> // ***** include the getXMLHttpRequest function defined beforevar 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>

اسلاید 14: A first exampleاین مثال از کتاب Ajax in 10 Minutes by Phil Ballard برداشته شده است.در این مثال ما زمان سرور را می گیریم و آنرا نمایش می دهیم. یک دکمه نیز برای تازه کردن زمان تعبیه شده است). در این مثال نشان می دهیم چگونه آژاکس بدون اینکه کل صفحه را بارگذاری کند آنرا تغییر می دهد. در طرف سرور از یک برنامه خیلی کوچک PHP که زمان را بر می گرداند استفاده می کنیم. این برنامه را به اسم telltime.php ذخیره می کنیم: <?php echo date(H:i:s); ?>

اسلاید 15: <!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. . .}

اسلاید 16: function ajaxResponse() //This gets called when the readyState changes.{ if (ajaxRequest.readyState != 4) // check to see if were 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>

اسلاید 17: <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>تابع getServerTime() شئ XMLHttpRequest را ایجاد و تنظیم می کند و آنرا به سرور می فرستد.تابع ajaxResponse جواب سرور را نمایش می دهد.view the output page

اسلاید 18: What’s this business with the random numbers?ممکن است که مرورگر بجای ارسال اطلاعات به سرور از cache خودش استفاده کند. برای جلوگیری از این موضوع، ما یک عدد تصادفی به درخواست اضافه می کنیم تا مرورگر فکر کند که این یک درخواست تازه است و از cache استفاده نکند.این موضوع فقط هنگام استفاده از متد GET خودش را نشان می دهد و به نظر می رسد عمده تقصیر نیز متوجه IE است.

اسلاید 19: Sending text back the serverپاسخ سرور که در خاصیت XMLHttpRequest.responseText ذخیره شده است می تواند به هر فرمتی باشد.مثلا می توان به عنوان متن ساده، کد HTML یا کد XML برگرداند. حتی سرور می تواند کد JavaScript نیز به ما برگرداند. در این حالت می توان با استفاده از متد eval() کد را اجرا کرد.اما در هر صورت خاصیت responseText از نوع فقط خواندنی است. لذا قبل از هرگونه تغییر باید یک نمونه از آنرا ذخیره نمود. (Change the PHP script to insert HTML tags.) (As above, change the PHP script.)Example with HTML tagExample using a table

اسلاید 20: The other PHP scripts for the time examplesHere’s the script with a simple HTML tag in it. <?phpecho <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;?>

اسلاید 21: XML: a (very) brief introاز XML( eXtensible Markup Language) بصورت مختلفی استفاده می گردد. استفاده ما از XML برای ارسال داده ساختار یافته است.XML و HTML دارای مشابهتهای فراوانی هستند. چون هر دو بر پایه SGML, (Standard Generalized Markup Language) بنا نهاده شده اند.XML نیز از برچسب برای مشخص کردن اطلاعات سند استفاده می کند. اما برچسبهای XML می توانند توسط کاربر و به میل او تعریف و استفاده شوند.

اسلاید 22: 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>

اسلاید 23: Accessing an XML document in JavaScriptبرای استفاده از یک سند XML در JavaScript باید یک شئ ایجاد کنید که آنرا نگهداری کند. مرورگر های غیر مایکروسافت:<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 برای بررسی و استخراج داده های آن استفاده کرد.

اسلاید 24: The “time” example using XMLکد PHP را طوری تغییر می دهیم که یک سند XML به مرورگر باز گرداند: <?php header(Content-Type: text/xml); echo <?xml version=1.0 ?>n”; echo “<clock><timenow> . date(H:i:s) . </timenow></clock>; ?>بعد از این تغییر، ما باید تابع ajaxResponse را دستکاری کنیم تا بتواند کد XML دریافتی را تجزیه و تحلیل نماید. (کد در اسلاید بعد)دقت کنید لازم نیست که بصورت صریح یک سند XML ایجاد نمایید چون خاصیت responseXML از شئ XMLHttpRequest یک شئ XML مناسب است.

اسلاید 25: The new Ajax response functionfunction ajaxResponse() //This gets called when the readyState changes.{ if (ajaxRequest.readyState != 4) // check to see if were 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); } }}این تابع از یک متد JavaScript برای دسترسی به XML DOM استفاده می کند. view the output page

اسلاید 26: A second example (live search)معمولا وقتی که یک فرم را پر می کنیم، فرم را به سرور می فرستیم تا آنرا بررسی نماید و نتیجه را به ما برگرداند. در این مثال می خواهیم که حالتی را در نطر بگیریم که هنگام وارد کردن داده در فرم یک نتیجه موقت از سرور بگیریم. این مثال از کتاب JavaScript in 24 Hours نوشته Michael Moncurبرداشته شده است. فرض کنیدکه نتیجه برگشتی لیستی از اسامی باشد که در یک آرایه ذخیره شده اند. به محض تایپ یک حرف در فیلد، کلمه تایپ شده با لیست تطبیق داده می شود و مطابقت های جزئی برگردانده می شوند. در ادامه این مثال را با پایگاه داده نیز حل می کنیم.

اسلاید 27: 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>

اسلاید 28: The PHP backend<?phpheader(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 برمی گرداند.

اسلاید 29: The JavaScript functionsدر طرف JavaScript ما با استفاده از خاصیت onkeydown یک تابع را صدا می زنیم. این تابع یک زمان سنج را روشن می کند و بعد از 200ms تابع liveSearch را صدا می زند. var t; // public variable for the timeout function startSearch() { if (t) window.clearTimeout(t); t = window.setTimeout(liveSearch(),200); }تابع liveSearch همان جایی است که ما شئ XMLHttpRequest را ایجاد و تنظیم می کنیم و کد PHP را صدا می زنیم.

اسلاید 30: 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 were done { return; } else { if (ajaxRequest.status == 200) // check to see if successful { displaySearchResults(); } else { alert(Request failed: + ajaxRequest.statusText); } }}

اسلاید 31: 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

اسلاید 32: Using a database for the live searchدر مثال قبلی بجای ذخیره نامها در یک آرایه می توانیم آنها را در یک پایگاه داده ذخیره نماییم. نیازی به تغییر کد JavaScript نیست. کد PHP جدید در زیر آورده شده است.<?phpheader(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

اسلاید 33: Some cautionsکد JavaScript در بعضی از مرورگرها اجرا نمی شود یا کاربر اجرای آنرا خاموش کرده است.بعضی از متدها و خواص آژاکس در تمام مرورگرها وجود ندارد یا بطور متفاوتی عمل می کند. لذا کد خود را با تمام مرورگرهای متداول امتحان کنید.اگر می توانید به نحوی کاربر را از تغییر قسمتی از صفحه آگاه نمایید.عناصر پنهانی که توسط آژاکس ایجاد یا آشکار می شوند در موتورهای جستجو ایندکس نمی شوند.اجازه ندهید آژاکس جای محتوای اصلی را بگیرد و فقط در قسمتهای مورد نیاز ار آن استفاده کنید.