AJAX محمد احمدی نیا [email protected]. 2 Of 27 What is AJAX? AJAX = Asynchronous...

AJAX

محمد احمدی نیا[email protected]

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


<body><div id="myDiv"><h2>Let AJAX change this text</h2></div><button type="button" onclick="loadXMLDoc()">Change Content</button></body>

<head><script type="text/javascript">function loadXMLDoc() {.... AJAX script goes here ...}</script></head>

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


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



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:


Method Description

open(method,url,async)method: the type of request: GET or POSTurl: the location of the file on the serverasync: 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 namevalue: 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


Property Description

responseText get the response data as a string

responseXML get 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


Three important properties of the XMLHttpRequest object:


Property Description

onreadystatechangeStores 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 established2: request received 3: processing request 4: request finished and response is ready

status200: "OK"404: Page not found

18 Of 27


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:


<body>

<h3>Start typing a name in the input field below:</h3><form action=""> First name: <input type="text" id="txt1" onkeyup="showHint(this.value)" /></form><p>Suggestions: <span id="txtHint"></span></p>

</body></html>

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>0if (strlen($q) > 0) { $hint=""; for($i=0; $i<count($a); $i++) { if (strtolower($q)==strtolower(substr($a[$i],0,strlen($q)))) { if ($hint=="") { $hint=$a[$i]; } else { $hint=$hint." , ".$a[$i]; } } } }// Set output to "no suggestion" if no hint were found or to the correct valuesif ($hint == "") { $response="no suggestion"; }else { $response=$hint; }//output the responseecho $response;?>

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


<html><head><script type="text/javascript">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


…</script></head><body>

<form><select name="users" onchange="showUser(this.value)"><option value="">Select a person:</option><option value="1">Peter Griffin</option><option value="2">Lois Griffin</option><option value="3">Glenn Quagmire</option><option value="4">Joseph Swanson</option></select></form><br /><div id="txtHint"><b>Person info will be listed here.</b></div>

</body></html>

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 "<table border='1'> <tr><th>Firstname</th><th>Lastname</th><th>Hometown</th><th>Job</th> </tr>";while($row = mysql_fetch_array($result)) { echo "<tr>"; echo "<td>" . $row['FirstName'] . "</td>"; echo "<td>" . $row['LastName'] . "</td>"; echo "<td>" . $row['Hometown'] . "</td>"; echo "<td>" . $row['Job'] . "</td>"; echo "</tr>"; }echo "</table>";?>

AJAX محمد احمدی نیا [email protected]. 2 Of 27 What is AJAX? AJAX = Asynchronous...

Documents

Transcript of AJAX محمد احمدی نیا [email protected]. 2 Of 27 What is AJAX? AJAX = Asynchronous...