AJAX محمد احمدی نیا

2 Of 27 What is AJAX?  AJAX = Asynchronous JavaScript and XML.  AJAX is not a new programming language, but a new way to use existing standards.  AJAX is the art of exchanging data with a server, and update parts of a web page - without reloading the whole page.  Examples of applications using AJAX: Google Suggest,Google Maps, Gmail, Youtube, and Facebook tabs. زبانهای برنامه سازی وب

3 Of 27 What is AJAX?  AJAX is based on internet standards, and uses a combination of:  XMLHttpRequest object (to exchange data asynchronously with a server)  JavaScript/DOM (to display/interact with the information)  CSS (to style the data)  XML (often used as the format for transferring data) زبانهای برنامه سازی وب

4 Of 27 How AJAX Works زبانهای برنامه سازی وب

5 Of 27 AJAX Example زبانهای برنامه سازی وب Let AJAX change this text Change Content function loadXMLDoc() {.... AJAX script goes here... }

6 Of 27 XMLHttpRequest Object  The keystone of AJAX is the XMLHttpRequest object.  The XMLHttpRequest object is used to exchange data with a server behind the scenes.  All modern browsers support the XMLHttpRequest object (IE5 and IE6 use an ActiveXObject). زبانهای برنامه سازی وب

7 Of 27 XMLHttpRequest Object  Create an XMLHttpRequest Object  All modern browsers (IE7+, Firefox, Chrome, Safari, and Opera) have a built-in XMLHttpRequest object.  variable=new XMLHttpRequest();  Old versions of Internet Explorer (IE5 and IE6) uses an ActiveX Object:  variable=new ActiveXObject("Microsoft.XMLHTTP"); زبانهای برنامه سازی وب

8 Of 27 XMLHttpRequest Object زبانهای برنامه سازی وب var xmlhttp; if (window.XMLHttpRequest) {// code for IE7+, Firefox, Chrome, Opera, Safari xmlhttp=new XMLHttpRequest(); } else {// code for IE6, IE5 xmlhttp=new ActiveXObject("Microsoft.XMLHTTP"); }

9 Of 27 Send Request To Server  To send a request to a server, we use the open() and send() methods of the XMLHttpRequest object: زبانهای برنامه سازی وب MethodDescription open(method,url,async) method: the type of request: GET or POST url: the location of the file on the server async: true (asynchronous) or false (synchronous) send(string)Sends the request off to the server. string: Only used for POST requests xmlhttp.open("GET","ajax_info.txt",true); xmlhttp.send();

10 Of 27 GET Requests  GET is simpler and faster than POST, and can be used in most cases.  add the information to the URL for sending زبانهای برنامه سازی وب xmlhttp.open("GET","demo_get.php? fname=Henry “,true); xmlhttp.send();

11 Of 27 POST Requests  always use POST requests when:  A cached file is not an option (update a file or database on the server)  Sending a large amount of data to the server  Sending user input (which can contain unknown characters), POST is more robust and secure than GET زبانهای برنامه سازی وب

12 Of 27 POST Requests  To POST data like an HTML form, add an HTTP header with setRequestHeader(). Specify the data you want to send in the send() method:  setRequestHeader(header,value) header: specifies the header name value: specifies the header value زبانهای برنامه سازی وب xmlhttp.open("POST","ajax_test.asp",true); xmlhttp.setRequestHeader("Content-type","application/x-www-form-urlencoded"); xmlhttp.send("fname=Henry&lname=Ford");

13 Of 27 Asynchronous - False  JavaScript will NOT continue to execute, until the server response is ready. If the server is busy or slow, the application will hang or stop.  Using async=false is not recommended, but for a few small requests this can be ok. زبانهای برنامه سازی وب xmlhttp.open("GET","ajax_info.txt",false); xmlhttp.send(); document.getElementById("myDiv").innerHTML=xmlhttp.responseText;

14 Of 27 Asynchronous – True  AJAX stands for Asynchronous JavaScript and XML  When using async=true, specify a function to execute when the response is ready in the onreadystatechange event  execute other scripts while waiting for server response زبانهای برنامه سازی وب xmlhttp.onreadystatechange=function() { if (xmlhttp.readyState==4 && xmlhttp.status==200) { document.getElementById("myDiv").innerHTML=xmlhttp.responseText; } } xmlhttp.open("GET","ajax_info.txt",true); xmlhttp.send();

15 Of 27 AJAX - Server Response  To get the response from a server, use the responseText or responseXML property of the XMLHttpRequest object.  The responseText Property زبانهای برنامه سازی وب PropertyDescription responseTextget the response data as a string responseXMLget the response data as XML data document.getElementById("myDiv").innerHTML=xmlhttp.responseText;

16 Of 27 AJAX – onreadystatechange  The onreadystatechange event is triggered every time the readyState changes.  The readyState property holds the status of the XMLHttpRequest. زبانهای برنامه سازی وب

17 Of 27 AJAX – onreadystatechange  Three important properties of the XMLHttpRequest object: زبانهای برنامه سازی وب PropertyDescription onreadystatechange Stores a function (or the name of a function) to be called automatically each time the readyState property changes readyState Holds the status of the XMLHttpRequest. Changes from 0 to 4: 0: request not initialized 1: server connection established 2: request received 3: processing request 4: request finished and response is ready status 200: "OK" 404: Page not found

18 Of 27 AJAX – onreadystatechange  In the onreadystatechange event, we specify what will happen when the server response is ready to be processed.  When readyState is 4 and status is 200, the response is ready: زبانهای برنامه سازی وب xmlhttp.onreadystatechange=function() { if (xmlhttp.readyState==4 && xmlhttp.status==200) { document.getElementById("myDiv").innerHTML=xmlhttp.responseText; } }

19 Of 27 AJAX PHP Example  The following example will demonstrate how a web page can communicate with a web server while a user type characters in an input field: زبانهای برنامه سازی وب

20 Of 27 AJAX PHP Example  When a user types a character in the input field above, the function "showHint()" is executed. The function is triggered by the "onkeyup" event: زبانهای برنامه سازی وب Start typing a name in the input field below: First name: Suggestions:

21 Of 27 AJAX PHP Example زبانهای برنامه سازی وب function showHint(str) { var xmlhttp; if (str.length==0) { document.getElementById("txtHint").innerHTML=""; return; } if (window.XMLHttpRequest) {// code for IE7+, Firefox, Chrome, Opera xmlhttp=new XMLHttpRequest(); } else {// code for IE6, IE5 xmlhttp=new ActiveXObject("Microsoft.XMLHTTP"); } xmlhttp.onreadystatechange=function() { if (xmlhttp.readyState==4 && xmlhttp.status==200) { document.getElementById("txtHint").innerHTML=xmlhttp.responseText; } } xmlhttp.open("GET","gethint.php?q="+str,true); xmlhttp.send(); }

22 Of 27 AJAX PHP Example  The PHP File  The source code in "gethint.php" checks an array of names, and returns the corresponding name(s) to the browser: زبانهای برنامه سازی وب <?php // Fill up array with names $a[]="Anna"; $a[]="Brittany"; $a[]="Cinderella";.. $a[]="Ellen"; $a[]="Wenche"; $a[]="Vicky"; //get the q parameter from URL $q=$_GET["q"]; …

23 Of 27 زبانهای برنامه سازی وب... //lookup all hints from array if length of q>0 if (strlen($q) > 0) { $hint=""; for($i=0; $i

24 Of 27 AJAX Database Example  The following example will demonstrate how a web page can fetch information from a database with AJAX: زبانهای برنامه سازی وب

25 Of 27 The HTML Page زبانهای برنامه سازی وب function showUser(str) { if (str=="") { document.getElementById("txtHint").innerHTML=""; return; } if (window.XMLHttpRequest) {// code for IE7+, Firefox, Chrome, Opera, Safari xmlhttp=new XMLHttpRequest(); } else {// code for IE6, IE5 xmlhttp=new ActiveXObject("Microsoft.XMLHTTP"); } xmlhttp.onreadystatechange=function() { if (xmlhttp.readyState==4 && xmlhttp.status==200) { document.getElementById("txtHint").innerHTML=xmlhttp.responseText; } } xmlhttp.open("GET","getuser.php?q="+str,true); xmlhttp.send(); } …

26 Of 27 The HTML Page زبانهای برنامه سازی وب … Select a person: Peter Griffin Lois Griffin Glenn Quagmire Joseph Swanson Person info will be listed here.

27 Of 27 The PHP File( getuser.php ) زبانهای برنامه سازی وب <?php $q=$_GET["q"]; $con = mysql_connect('localhost', 'peter', 'abc123'); mysql_select_db("ajax_demo", $con); $sql="SELECT * FROM user WHERE id = '".$q."'"; $result = mysql_query($sql); echo " Firstname Lastname Hometown Job "; while($row = mysql_fetch_array($result)) { echo " "; echo " ". $row['FirstName']. " "; echo " ". $row['LastName']. " "; echo " ". $row['Hometown']. " "; echo " ". $row['Job']. " "; echo " "; } echo " "; ?>