AJAX: Cleaning Up the Web
Upcoming SlideShare
Loading in...5
×
 

AJAX: Cleaning Up the Web

on

  • 630 views

 

Statistics

Views

Total Views
630
Views on SlideShare
630
Embed Views
0

Actions

Likes
0
Downloads
2
Comments
0

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
  • Full Name Full Name Comment goes here.
    Are you sure you want to
    Your message goes here
    Processing…
Post Comment
Edit your comment

AJAX: Cleaning Up the Web AJAX: Cleaning Up the Web Presentation Transcript

  • AJAX: Cleaning Up the Web 2007 North Carolina Computer Instructors Conference Carteret Community College March 14-16, 2007 Randy Parker Piedmont Community College Roxboro, NC [email_address] www2.piedmontcc.edu/faculty/parkerr/ajax
  • A J A X
    • Asynchronous JavaScript And XML
    • Based on the XML HTTP Request (XHR) object created by Microsoft Corp. in 1997
    • AJAX – term coined by James Garrett in February 2005
  • A J A X
    • Asynchronous JavaScript And XML
    • What is AJAX?
      • AJAX is NOT one single new technology
      • A grouping of technologies used to produce Web Applications with a similar “look and feel” as desktop applications.
      • Required:
          • HTML/XHTML
          • JavaScript
          • File or program on server to fulfill request
      • Not Required but often used:
          • XML
          • Server side applications (ASP, PHP, etc…)
          • Databases
  • A J A X
    • Asynchronous JavaScript And XML
    • Why use AJAX?
      • To provide a desktop-like user interface for Web Applications
      • Increased user satisfaction:
        • Improved response time
        • No plug-ins or other special installations on the Browser
      • Reduces redundant content on the Web
  • A J A X
    • Asynchronous JavaScript And XML
    • How is AJAX used?
      • Yahoo Mail (Beta)
      • Google Suggest
      • Google Maps ( maps.google.com )
      • My Database Retrieval Application with Suggest - Customers
      • And many more…
  • Traditional Yahoo Email
  • Traditional Yahoo Email
  • Yahoo Email (Beta) using AJAX
  • Yahoo Email (Beta) using AJAX
  • A J A X
    • Asynchronous JavaScript And XML
    • How is AJAX used?
      • Yahoo Mail (Beta)
      • Google Suggest
      • Google Maps ( maps.google.com )
      • My Database Retrieval Application with Suggest - Customers
      • And many more…
  • A J A X
    • A – Asynchronous
    • J – JavaScript
    • A – And
    • X – XML
  • Asynchronous
    • Traditional Web Application
      • Synchronous
        • Client sends request
        • Client waits for response
        • Server process request
        • Client displays results
    • AJAX-enabled Web Application
      • Asynchronous
        • Client may send multiple requests
        • Responses may be returned in any order
  • A J A X
    • A – Asynchronous
    • J – JavaScript
    • A – And
    • X – XML
  • JavaScript
    • A programming language that runs in a Browser
    • Embedded in a Web page or included as a separate file
    • Activated when the page loads or when a button or link is clicked
    • AJAX uses JavaScript to send an HTTP request (XHR) to a server
    • The server sends the results back to the same JavaScript
  • AJAX Client/Server Interaction
  • JavaScript function showCustomerName(customerName) { var WebURL="customerNameOnly.asp?sid="+Math.random()+"&CustomerName=" + customerName xmlHttpReq=new ActiveXObject(“Msxml2.XMLHTTP”) xmlHttpReq=onreadystatechange=changOfState xmlHttpReq.open("GET", WebURL) xmlHttpReq.send() } function changeOfState() { … }
  • ASP <% sql=&quot;SELECT ContactName FROM CUSTOMERS WHERE ContactName LIKE '&quot; sql=sql & request.querystring(&quot;CustomerName&quot;) sql=sql & &quot;%'&quot; set conn=Server.CreateObject(&quot;ADODB.Connection&quot;) conn.Provider=&quot;Microsoft.Jet.OLEDB.4.0&quot; filename=server.mappath(&quot;fpdb/customers.mdb&quot;) conn.Open filename set rs = Server.CreateObject(&quot;ADODB.recordset&quot;) rs.Open sql, conn response.write(&quot;<b>Suggestions:</b>&quot;) response.write(&quot;<table>&quot;) do until rs.EOF for each x in rs.Fields response.write(&quot;<tr><td>&quot; & x.value & &quot;</td></tr>&quot;) next rs.MoveNext loop response.write(&quot;</table>&quot;) %>
  • AJAX Client/Server Interaction
  • JavaScript function showCustomerName(customerName) { var WebURL=&quot;customerNameOnly.asp?sid=&quot;+Math.random()+&quot;&CustomerName=&quot; + customerName xmlHttpReq=new ActiveXObject(“Msxml2.XMLHTTP”) xmlHttpReq=onreadystatechange=changOfState xmlHttpReq.open(&quot;GET&quot;, WebURL) xmlHttpReq.send() } function changeOfState() { if (xmlHttpReq.readyState==4) { document.getElementById(&quot;ResponseDisplayArea&quot;).innerHTML=xmlHttpReq.responseText } }
  • AJAX Client/Server Interaction
  • A J A X
    • A – Asynchronous
    • J – JavaScript
    • A – And
    • X – XML
  • XML
    • eXtensible Markup Language
    • A data description language
    • An open standard providing the means to share data and information between computers and computer programs
    • XML is NOT required for AJAX
  • A J A X
    • Asynchronous JavaScript And XML
    • Disadvantages:
      • Cross-browser JavaScript inconsistencies
      • An inability to:
        • use the Back button to return to a previous state
        • copy a URL and later use it to navigate to the same page in the same state
  • A J A X
    • Asynchronous JavaScript And XML
    • How to do it?
      • Use traditional Web development tools:
        • Dreamweaver, FrontPage for the UI
        • Text editor for the JavaScript and server side programs
      • Use tools designed specifically for AJAX development:
        • Microsoft ASP.NET AJAX (Atlas) - http:// ajax.asp.net /
        • Eclipse (Java-based open source) http://www.eclipse.org/
        • Adobe Flex/Flash-AJAX Bridge http://www.adobe.com/products/flex/
  • A J A X
    • AJAX in the Curriculum
    • A typical AJAX-enabled application includes:
      • User interface (Web page – HTML/XHTML)
      • JavaScript (XHR requests and server responses)
      • Server-side program
      • Database
  • A J A X
    • Asynchronous JavaScript And XML
    • AJAX in the Curriculum
      • Introductory Level
        • Introduction to AJAX (general overview)
        • HTML/XHTML – Forms
      • Intermediate Level
        • JavaScript – Variables, Functions
        • XHR (XML Http Request)
      • Advanced Level
        • Server-side programming
        • SQL
  • A J A X
    • Asynchronous JavaScript And XML
    • AJAX in the Curriculum
      • Introductory Level
        • Introduction to AJAX (general overview)
        • HTML/XHTML – Forms
    • How to do it?
      • Use traditional Web development tools:
        • Dreamweaver, FrontPage, or text editor for the User Interface (Form)
        • Students link to pre-written JavaScripts and server-side programs
  • A J A X
    • RESOURCES FOR FURTHER RESEARCH
    • Presenter’s Page (Randy Parker) – www2.piedmontcc.edu/faculty/parkerr/ajax/
    • AJAXian - ajaxian.com /
    • eWeek - www.eweek.com/article2/0,1895,1976726,00.asp
    • Swords Sharpened for Ajax Projects -  www.eweek.com/article2/0,1759,1909570,00.asp
    • AJAX: Getting Started - developer.mozilla.org/en/docs/AJAX:Getting_Started
    • OpenAjax Alliance - openajax.org/about.html
    • Using the virtual buffer in JAWS to enable Ajax - ajaxian.com /by/topic/accessibility/
    • Accessible Rich Internet Applications (WAI-ARIA Roadmap) addresses the accessibility of dynamic Web content for people with disabilities - www.w3.org/TR/aria-roadmap/