• Share
  • Email
  • Embed
  • Like
  • Save
  • Private Content
Powerpoint
 

Powerpoint

on

  • 2,206 views

 

Statistics

Views

Total Views
2,206
Views on SlideShare
2,206
Embed Views
0

Actions

Likes
5
Downloads
180
Comments
1

0 Embeds 0

No embeds

Accessibility

Categories

Upload Details

Uploaded via as Microsoft PowerPoint

Usage Rights

© All Rights Reserved

Report content

Flagged as inappropriate Flag as inappropriate
Flag as inappropriate

Select your reason for flagging this presentation as inappropriate.

Cancel

11 of 1 previous next

  • Full Name Full Name Comment goes here.
    Are you sure you want to
    Your message goes here
    Processing…
  • best one....
    Are you sure you want to
    Your message goes here
    Processing…
Post Comment
Edit your comment

    Powerpoint Powerpoint Presentation Transcript

    • AJAX M Clements
    • 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 – 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
    • Prerequisites
      • HTML / XHTML
      • JavaScript
      • Knowledge of XML and CSS useful too
    • 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
    • ‘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 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
    • 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.
    • 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
    • HTML form below has no submit button
      • <html>
      • <body>
      • <form name=&quot;myForm&quot;>
      • Name: <input type=&quot;text&quot; name=&quot;username&quot; />
      • Time: <input type=&quot;text&quot; name=&quot;time&quot; /> </form>
      • </body>
      • </html>
    • 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 &quot;try and catch&quot; statement
    • <script type=&quot;text/javascript&quot;> function ajaxFunction() { var xmlHttp; try { // Firefox, Opera 8.0+, Safari xmlHttp=new XMLHttpRequest(); } catch (e) { // Internet Explorer try { xmlHttp=new ActiveXObject(&quot;Msxml2.XMLHTTP&quot;); } catch (e) { try { xmlHttp=new ActiveXObject(&quot;Microsoft.XMLHTTP&quot;); } catch (e) { alert(&quot;Your browser does not support AJAX!&quot;); return false; } } } } </script> Script creates variable Comments Warning for user if all browsers fail IE can use 2 types of ActiveXObjects
    • 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
    • The XMLHttpRequest object
      • Has 3 important properties
        • onreadystatechange
        • readyState
        • responseText
      • The onreadystatechange property stores the function that will process the response from a server
    • 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
    • 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 &quot;time&quot; input field equal to responseText
    • Here we test the server for response
      • xmlHttp.onreadystatechange=function()
      • {
      • if(xmlHttp.readyState==4)
      • { document.myForm.time.value=xmlHttp.responseText;
      • }
      • }
    • 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
    • When to send the request
      • We want to do this when the user releases a key after typing their name
      • <form name=&quot;myForm&quot;>
      • Name: <input type=&quot;text&quot; onkeyup =&quot;ajaxFunction();&quot; name=&quot;username&quot; />
      • Time: <input type=&quot;text&quot; name=&quot;time&quot; /> </form>
      Calls our function after key released
    • 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
    • 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)
      • <html>
      • <body>
      • <script type=&quot;text/javascript&quot;>
      • function ajaxFunction()
      • {
      • var xmlHttp;
      • try
      • {
      • // Firefox, Opera 8.0+, Safari
      • xmlHttp=new XMLHttpRequest();
      • }
      • catch (e)
      • {
      • // Internet Explorer
      • try
      • {
      • xmlHttp=new ActiveXObject(&quot;Msxml2.XMLHTTP&quot;);
      • }
      • catch (e)
      • {
      • try
      • {
      • xmlHttp=new ActiveXObject(&quot;Microsoft.XMLHTTP&quot;);
      • }
      • catch (e)
      • {
      alert(&quot;Your browser does not support AJAX!&quot;); return false; } } } xmlHttp.onreadystatechange=function() { if(xmlHttp.readyState==4) { document.myForm.time.value=xmlHttp.responseText; } } xmlHttp.open(&quot;GET&quot;,&quot;ajaxtest.php&quot;,true); xmlHttp.send(null); } </script> <form name=&quot;myForm&quot;> Name: <input type=&quot;text&quot; onkeyup=&quot;ajaxFunction();&quot; name=&quot;username&quot; /> Time: <input type=&quot;text&quot; name=&quot;time&quot; /> </form> </body> </html>
    • See our AJAX in action
      • http://engweb.info/ajax/ajaxtest.html
      • Works well in Mozilla
      • IE is a bit sketchy
    • 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
    • References
      • http://www.w3schools.com/ajax/default.asp
      • http://www.internetnews.com/dev-news/article.php/3676226
      • http://daniel.lorch.cc/docs/ajax_simple/