0
IS4 030 - Website Design for e-Commerce  By  SMIEEE, SMACM, MACS E-mail:  [email_address] Room: P7919 Consultation Hours: ...
Where AJAX is applied ?
AJAX Applications
Typical AJAX Applications <ul><li>Real-Time Form Data Validation </li></ul><ul><ul><li>Form data that require server-side ...
A Completed Example
A Completed Example <ul><li><html> </li></ul><ul><li><body> </li></ul><ul><li><script type=&quot;text/javascript&quot;> </...
A Completed Example <ul><li>form name=&quot;myForm&quot;>  </li></ul><ul><li>Name: <input type=&quot;text&quot;  </li></ul...
AJAX Problems  <ul><li>Breaking the “back” button  </li></ul><ul><ul><li>Browsers record static page visits </li></ul></ul...
AJAX Problems  <ul><li>Difficult to Debug </li></ul><ul><ul><li>Processing logic both in client and server </li></ul></ul>...
AJAX Resources  <ul><li>Frameworks </li></ul><ul><ul><li>Client-side </li></ul></ul><ul><ul><ul><li>DOGO </li></ul></ul></...
References : <ul><li>Overview </li></ul><ul><ul><li>http://en.wikipedia.org/wiki/AJAX </li></ul></ul><ul><ul><li>http://ja...
Upcoming SlideShare
Loading in...5
×

Lecture 11 Answers

784

Published on

0 Comments
0 Likes
Statistics
Notes
  • Be the first to comment

  • Be the first to like this

No Downloads
Views
Total Views
784
On Slideshare
0
From Embeds
0
Number of Embeds
0
Actions
Shares
0
Downloads
18
Comments
0
Likes
0
Embeds 0
No embeds

No notes for slide
  • Microsoft – Atlas Technology which will be released in October
  • 1 – we are not loading the entire page 2- richer user experience doesn ’ t have to wait
  • Userid, coupon id , mouse hovers over a particular item
  • Text/plain or text/html (2) problem with binary data - images
  • Text/plain or text/html (2) problem with binary data - images
  • Text/plain or text/html (2) problem with binary data - images
  • Anchor part of URL fragment – many browsers allow the anchor to be updated dynamically which ajax can use to update the anchor dynamically with the page contents
  • How much do u expect from client machine
  • Client side provides basic piping and cross browser abstraction – server side provides browser-server coordination, ability to directly call java server-side apis
  • Meebo – IM , dynamic ebay search tool, persistent search to Gmail, WebORB message server chat – shows gegraphic location
  • Transcript of "Lecture 11 Answers"

    1. 1. IS4 030 - Website Design for e-Commerce By SMIEEE, SMACM, MACS E-mail: [email_address] Room: P7919 Consultation Hours: 4:30 - 6:30pm Monday Lecture Eleven AJAX
    2. 2. Where AJAX is applied ?
    3. 3. AJAX Applications
    4. 4. Typical AJAX Applications <ul><li>Real-Time Form Data Validation </li></ul><ul><ul><li>Form data that require server-side validation can be validated in a form “before” the user submits it. </li></ul></ul><ul><li>Auto completion </li></ul><ul><ul><li>A specific portion of form data can be auto-completed as the user types. </li></ul></ul><ul><li>Master Details Operations </li></ul><ul><ul><li>Based on a client event, an HTML page can fetch more details from the Server without refreshing the page. </li></ul></ul><ul><li>Sophisticated UI Controls </li></ul><ul><ul><li>Controls such as tree controls, menus, and progress bars without page refreshes . </li></ul></ul>
    5. 5. A Completed Example
    6. 6. A Completed Example <ul><li><html> </li></ul><ul><li><body> </li></ul><ul><li><script type=&quot;text/javascript&quot;> </li></ul><ul><li>function ajaxFunction() { </li></ul><ul><li>var xmlHttp; </li></ul><ul><li>if (window.XMLHttpRequest) { // Mozilla, Safari, ... </li></ul><ul><li>xmlHttp = new XMLHttpRequest(); </li></ul><ul><li>} else if (window.ActiveXObject) { // IE </li></ul><ul><li>xmlHttp = new ActiveXObject(&quot;Microsoft.XMLHTTP&quot;); </li></ul><ul><li>} </li></ul><ul><li>xmlHttp.onreadystatechange=function() { </li></ul><ul><li>if(xmlHttp.readyState==4) { </li></ul><ul><li>if (xmlHttp.status == 200) { document.myForm.time.value=xmlHttp.responseText; </li></ul><ul><li>} </li></ul><ul><li>} </li></ul><ul><li>} </li></ul><ul><li>xmlHttp.open(&quot;GET&quot;,&quot;time.jsp&quot;,true); </li></ul><ul><li>xmlHttp.send(null); </li></ul><ul><li>} </li></ul><ul><li></script> </li></ul>
    7. 7. A Completed Example <ul><li>form name=&quot;myForm&quot;> </li></ul><ul><li>Name: <input type=&quot;text&quot; </li></ul><ul><li>onkeyup=&quot;ajaxFunction();&quot; name=&quot;username&quot; /> </li></ul><ul><li>Time: <input type=&quot;text&quot; name=&quot;time&quot; /> </li></ul><ul><li></form> </li></ul><ul><li></body> </li></ul><ul><li></html> </li></ul><ul><li>What does this AJAX program/HTML do? </li></ul>
    8. 8. AJAX Problems <ul><li>Breaking the “back” button </li></ul><ul><ul><li>Browsers record static page visits </li></ul></ul><ul><ul><li>The AJAX page is dynamic and it’s difficult to determine which one is the previous state </li></ul></ul><ul><li>Changing parts of the page unexpectedly </li></ul><ul><ul><li>A page is unintentionally altered because of some the AJAX codes are incidentally executed. </li></ul></ul><ul><li>Bookmarking a particular “State” becomes difficult </li></ul><ul><ul><li>Javascript generates the page NOT server </li></ul></ul>
    9. 9. AJAX Problems <ul><li>Difficult to Debug </li></ul><ul><ul><li>Processing logic both in client and server </li></ul></ul><ul><li>Viewable Source </li></ul><ul><ul><li>Open to hackers or plagiarism for the processing logic </li></ul></ul><ul><li>Increased Server Load </li></ul><ul><ul><li>Asynchronous request is a “heavy” operation </li></ul></ul>
    10. 10. AJAX Resources <ul><li>Frameworks </li></ul><ul><ul><li>Client-side </li></ul></ul><ul><ul><ul><li>DOGO </li></ul></ul></ul><ul><ul><ul><li>BackBase </li></ul></ul></ul><ul><ul><ul><li>AJForm </li></ul></ul></ul><ul><ul><li>Server-side </li></ul></ul><ul><ul><ul><li>JSON (Javascript Object Notation) </li></ul></ul></ul><ul><ul><ul><li>Struts – Layout </li></ul></ul></ul><ul><ul><ul><li>ComfortASP.NET </li></ul></ul></ul><ul><ul><li>Many more at </li></ul></ul><ul><ul><ul><li>http://www.ajaxpatterns.org/AJAXFramework </li></ul></ul></ul><ul><li>Browsers </li></ul><ul><ul><li>IE , Mozilla, Galeon, Firefox </li></ul></ul>
    11. 11. References : <ul><li>Overview </li></ul><ul><ul><li>http://en.wikipedia.org/wiki/AJAX </li></ul></ul><ul><ul><li>http://java.sun.com/developer/technicalArticles/J2EE/AJAX/index.html?cid=59754 </li></ul></ul><ul><li>Original Article from Adaptive path </li></ul><ul><ul><li>http://www.adaptivepath.com/publications/essays/archives/000385.php </li></ul></ul><ul><li>Examples </li></ul><ul><ul><li>http://www.sitepoint.com/article/remote-scripting-ajax.html </li></ul></ul><ul><ul><li>http://www.mousewhisperer.co.uk/ajax_page.html </li></ul></ul><ul><ul><li>http://www.clearnova.com/ajax/ </li></ul></ul><ul><ul><li>http://www.webpasties.com/xmlHttpRequest/ </li></ul></ul><ul><li>AJAX based Applications </li></ul><ul><ul><li>http://www.ajaxreview.com/ </li></ul></ul><ul><ul><li>http://ajaxblog.com/ </li></ul></ul><ul><li>Issues/Problems </li></ul><ul><ul><li>http://sourcelabs.com/ajb/archives/2005/05/ajax_mistakes.html </li></ul></ul>
    1. A particular slide catching your eye?

      Clipping is a handy way to collect important slides you want to go back to later.

    ×