Web Technology Even Sem 2015 UnitIII AJAX Hammad
Web Technology Even Sem 2015 Unit-III AJAX Hammad Lari Computer Science Department www. ncs 504 wt. wordpress. com
What is AJAX? AJAX = Asynchronous Java. Script and XML. AJAX is a technique for creating fast and dynamic web pages. AJAX allows web pages to be updated asynchronously by exchanging small amounts of data with the server behind the scenes. This means that it is possible to update parts of a web page, without reloading the whole page. Classic web pages, (which do not use AJAX) must reload the entire page if the content should change. Examples of applications using AJAX: Google Maps, Gmail, Youtube, and Facebook tabs.
How AJAX Works
AJAX Example <!DOCTYPE html> <head> <script> function load. XMLDoc() {. . AJAX script goes here. . . } </script> </head> <body> <div id="my. Div"><h 2>Let AJAX change this text</h 2></div> <button type="button" onclick="load. XMLDoc()">Change Content</button> </body> </html>
The XMLHttp. Request Object The keystone of AJAX is the XMLHttp. Request object. All modern browsers support the XMLHttp. Request object (IE 5 and IE 6 use an Active. XObject). The XMLHttp. Request object is used to exchange data with a server behind the scenes. This means that it is possible to update parts of a web page, without reloading the whole page. Syntax for creating an XMLHttp. Request object: variable=new XMLHttp. Request(); Old versions of Internet Explorer (IE 5 and IE 6) uses an Active. X Object: variable=new Active. XObject("Microsoft. XMLHTTP");
Example <!DOCTYPE html> <head> <script> function load. XMLDoc() { var xmlhttp; if (window. XMLHttp. Request) {// code for IE 7+, Firefox, Chrome, Opera, Safari xmlhttp=new XMLHttp. Request(); } else {// code for IE 6, IE 5 xmlhttp=new Active. XObject("Microsoft. XMLHTTP"); } xmlhttp. onreadystatechange=function() { if (xmlhttp. ready. State==4 && xmlhttp. status==200) { document. get. Element. By. Id("my. Div"). inner. HTML= xmlhttp. response. Text; } } xmlhttp. open("GET", "ajax_info. txt", true); xmlhttp. send(); } </script> </head> <body> <div id="my. Div"><h 2>Let AJAX change this text</h 2></div> <button type="button" onclick="load. XMLDoc()">Change Content</button> </body> </html>
Result
Send a Request To a Server The XMLHttp. Request object is used to exchange data with a server. To send a request to a server, we use the open() and send() methods of the XMLHttp. Request object: xmlhttp. open("GET", "ajax_info. txt", true); xmlhttp. send(); Method Description open(method, url, async) Specifies the type of request, the URL, and if the request should be handled asynchronously or not. 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
The onreadystatechange event When a request to a server is sent, we want to perform some actions based on the response. The onreadystatechange event is triggered every time the ready. State changes. The ready. State property holds the status of the XMLHttp. Request. Three important properties of the XMLHttp. Request object: Property Description onreadystatechange Stores a function (or the name of a function) to be called automatically each time the ready. State property changes ready. State Holds the status of the XMLHttp. Request. 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
Retreive Contents from a PHP file <html> <head> <script> function show. Hint(str) { if (str. length == 0) { document. get. Element. By. Id("txt. Hint"). inner. HTML = ""; return; } else { var xmlhttp = new XMLHttp. Request(); xmlhttp. onreadystatechange = function() { if (xmlhttp. ready. State == 4 && xmlhttp. status == 200) { document. get. Element. By. Id("txt. Hint"). inner. HTML = xmlhttp. response. Text; } } xmlhttp. open("GET", "gethint. php? q=" + str, true); xmlhttp. send(); } } </script> </head> <body> <p><b>Start typing a name in the input field below: </b></p> <form> First name: <input type="text" onkeyup="show. Hint(this. value)"> </form> <p>Suggestions: <span id="txt. Hint"></span></p> </body> </html>
![<? php // Array with names $a[] = "Anna"; $a[] = "Brittany"; $a[] =](http://slidetodoc.com/presentation_image_h2/fbaabb5a2d097bca7b9a5a86f33c55ac/image-11.jpg "<? php // Array with names $a[] = \"Anna\"; $a[] = \"Brittany\"; $a[] =")
<? php // Array with names $a[] = "Anna"; $a[] = "Brittany"; $a[] = "Cinderella"; $a[] = "Diana"; $a[] = "Eva"; $a[] = "Fiona"; $a[] = "Gunda"; $a[] = "Hege"; $a[] = "Inga"; $a[] = "Johanna"; $a[] = "Kitty"; $a[] = "Linda"; $a[] = "Nina"; $a[] = "Ophelia"; $a[] = "Petunia"; $a[] = "Amanda"; $a[] = "Raquel"; $a[] = "Cindy"; $a[] = "Doris"; $a[] = "Eve"; $a[] = "Evita"; $a[] = "Sunniva"; $a[] = "Tove"; $a[] = "Unni"; $a[] = "Violet"; $a[] = "Liza"; $a[] = "Elizabeth"; $a[] = "Ellen"; $a[] = "Wenche"; $a[] = "Vicky"; // get the q parameter from URL $q = $_REQUEST["q"]; $hint = ""; // lookup all hints from array if $q is different from "" if ($q !== "") { $q = strtolower($q); $len=strlen($q); foreach($a as $name) { if (stristr($q, substr($name, 0, $len))) { if ($hint === "") { $hint = $name; } else { $hint. = ", $name"; } } // Output "no suggestion" if no hint was found or output correct values echo $hint === "" ? "no suggestion" : $hint; ? >
Try AJAX with 1. Database 2. ASP 3. XML
- Slides: 12
