AJAX

AJAX AJAX

Introduction • All material from www.w3schools.com • AJAX – what is it? • Traditional web pages and operation • Examples of AJAX use • Creating an AJAX app • AJAX workshop AJAX

AJAX – the basics • AJAX stands for Asynchronous JavaScript And XML • Based on JavaScript and HTTP requests • AJAX is a type of programming made popular in 2005 by Google (with Google Suggest) • AJAX is not a new programming language, but a new way to use existing standards • AJAX is good for creating better, faster, and more user-friendly web applications AJAX

Prerequisites • HTML / XHTML • JavaScript • Knowledge of XML and CSS useful too AJAX

How AJAX works • With AJAX, your JavaScript can communicate directly with the server, using the JavaScript XMLHttpRequest object. With this object, your JavaScript can trade data with a web server, without reloading the page • AJAX uses asynchronous data transfer (HTTP requests) between the browser and the web server, allowing web pages to request small bits of information from the server instead of whole pages. • The AJAX technique makes Internet applications smaller, faster and more user-friendly. • AJAX is a browser technology independent of web server software AJAX

‘Old’ way of getting/ sending data • In traditional JavaScript coding, to fetch or send information to or from a database or a file on webserver requires making an HTML form and GET or POST data to the server • User clicks "Submit" button to send/get the information, waits for the server to respond, then a complete new page loads with results • Since server returns a new page each time user submits input, traditional web apps can run slowly and tend to be less user-friendly AJAX

AJAX Uses HTTP Requests • AJAX means JavaScript communicates directly with server, using JavaScript XMLHttpRequest object • With an HTTP request, web page can make a request to, and get a response from a web server - without reloading the entire page • The user remains on same page • Does not notice that scripts request pages, or send data to a server in the background • Greater transparency – better user experience AJAX

The XMLHttpRequest Object • By using the XMLHttpRequest object, a web developer can update a page with data from the server after the page has loaded • AJAX was made popular in 2005 by Google (with Google Suggest). • Google Suggest uses the XMLHttpRequest object to create a very dynamic web interface: When you start typing in Google's search box, a JavaScript sends the letters off to a server and the server returns a list of suggestions • The XMLHttpRequest object is supported in Internet Explorer 5.0+, Safari 1.2, Mozilla 1.0 / Firefox, Opera 8+, and Netscape 7. AJAX

Your First AJAX Application • To understand how AJAX works, we will create a small AJAX application • First, we are going to create a standard HTML form with two text fields: username and time • The username field will be filled in by the user and the time field will be filled in using AJAX. • The HTML file will be named "testAjax.htm • See next slide AJAX

HTML form below has no submit button <html> <body> <form name="myForm"> Name: <input type="text" name="username" /> Time: <input type="text" name="time" /> </form> </body> </html> AJAX

AJAX - Browser Support • The keystone of AJAX is the XMLHttpRequest object • Different browsers use different methods to create the XMLHttpRequest object • We don’t know which browser any user may use • Internet Explorer uses an ActiveXObject, while other browsers uses the built-in JavaScript object called XMLHttpRequest • To create this object, and deal with different browsers, we are going to use a "try and catch" statement AJAX

<script type="text/javascript">function ajaxFunction() {var xmlHttp; try { // Firefox, Opera 8.0+, Safari xmlHttp=new XMLHttpRequest(); } catch (e) { // Internet Explorer try { xmlHttp=new ActiveXObject("Msxml2.XMLHTTP"); } catch (e) { try { xmlHttp=new ActiveXObject("Microsoft.XMLHTTP"); } catch (e) {alert("Your browser does not support AJAX!");return false; } } }}</script> Script creates variable Comments IE can use 2 types of ActiveXObjects Warning for user if all browsers fail

Code needed to make AJAX run • Tries to create the XMLHttpRequest object • Check non-IE browsers first • If the test fails, code first tries newer then older IE versions • Returns error message for very old browsers • Can be cut and paste into your AJAX page AJAX

The XMLHttpRequest object • Has 3 important properties • onreadystatechange • readyState • responseText • The onreadystatechange property stores the function that will process the response from a server AJAX

readyState • The readyState property holds the status of the server's response. We can use this to execute the onreadystatechange function • Possible values for the readyState property: • 0 The request is not initialized • 1 The request has been set up • 2 The request has been sent • 3 The request is in process • 4 The request is complete AJAX

responseText • The data sent back from the server can be retrieved with the responseText property. • In our code, we will set the value of our "time" input field equal to responseText AJAX

Here we test the server for response xmlHttp.onreadystatechange=function() { if(xmlHttp.readyState==4) { document.myForm.time.value=xmlHttp.responseText; } } AJAX

Sending a request to a server • To send off a request to the server, we use the open() method and the send() method • The open() method takes three arguments • The first argument defines which method to use when sending the request (GET or POST) • The second argument specifies the URL of the server-side script • The third argument specifies that the request should be handled asynchronously (true or false) • The send() method sends the request off to the server AJAX

When to send the request • We want to do this when the user releases a key after typing their name <form name="myForm"> Name: <input type="text" onkeyup="ajaxFunction();" name="username" /> Time: <input type="text" name="time" /> </form> Calls our function after key released AJAX

Forming a changing server-side file • We will fetch the time from our server • Use php to deal with time request • Simple server-side file AJAX

Fetching the time • We fetch time from a remote server’s php • ajaxtest.php • Place that in the code • Save the file as html • Place on your web server in same directory as php file • Bingo – page works (only with IE just now) AJAX

alert("Your browser does not support AJAX!"); return false; } } } xmlHttp.onreadystatechange=function() { if(xmlHttp.readyState==4) { document.myForm.time.value=xmlHttp.responseText; } } xmlHttp.open("GET","ajaxtest.php",true); xmlHttp.send(null); } </script> <form name="myForm"> Name: <input type="text" onkeyup="ajaxFunction();" name="username" /> Time: <input type="text" name="time" /> </form> </body> </html> <html> <body> <script type="text/javascript"> function ajaxFunction() { var xmlHttp; try { // Firefox, Opera 8.0+, Safari xmlHttp=new XMLHttpRequest(); } catch (e) { // Internet Explorer try { xmlHttp=new ActiveXObject("Msxml2.XMLHTTP"); } catch (e) { try { xmlHttp=new ActiveXObject("Microsoft.XMLHTTP"); } catch (e) {

See our AJAX in action • http://engweb.info/ajax/ajaxtest.html • Works well in Mozilla • IE is a bit sketchy AJAX

Conclusion • AJAX extends the usefulness of web apps • Saves entire pages reloading • Gives greater transparency to users • Data loads ‘in the background’ • Uses existing technologies • Is becoming very popular AJAX

References • http://www.w3schools.com/ajax/default.asp • http://www.internetnews.com/dev-news/article.php/3676226 • http://daniel.lorch.cc/docs/ajax_simple/ AJAX

AJAX

AJAX

Presentation Transcript

AJAX

AJAX

AJAX

Ajax

Ajax

AJAX

Ajax (1010-Ajax-6)

Ajax

AJAX

AJAX

Ajax

AJAX

AJAX

AJAX

AJAX

Ajax

AJAX