No Refresh Technology

1
No Refresh Technology
Seamlessly Working With the Server

• Joseph Jiang

2
Agenda

• Why No Refresh
• Window Pop Up
• Frame
• Cookies
• External Javascript
• XMLHttp Request

3
Why No Refresh

• Web 2.0 Trend
• Refresh Drawbacks
• Bandwidth Wasting
• Server Overloading
• User Might Lose Focus
• Latency of User Waiting Time

4
Window Pop Up

• Traditional Method
• window.open()
• window.showModalDialog()

5
Window Pop Up

• window.open()
• open a child window to get latest data from
  server
• write back to parent window
• must be triggered by user, or the action would be
  blocked
• Examples
• Getting Users Email By Account
• Getting Server Time

6
Windows Pop Up

• window.showModalDialog()
• IEs Alternative for alert(), prompt(), confirm()
• Synchronized Operation
• Also must be triggered by users
• IE Only Firefox doesnt support
• Examples
• What is showModalDialog?
• Querying Users Email With Selection

7
Frame

• Traditional Method
• Frame Set
• Inline Frame
• Still a good method between Web 1.0 and Web 2.0

8
Frame

• Frameset
• Separate into a hidden frame and a show frame
• All link targets set to the hidden frame
• Write the data back to show frame
• Buffer Concept
• Examples
• HOW TO Load documents into a div
• Improved Example

9
Frame

• Frameset
• Advantages
• Works in any browser supports Frame, including
  old-fashioned Netscape 4.0.
• No limit for data transfer size
• Drawbacks
• No Seach Engine Optimization
• Cant Cross-Domain
• Good or Bad ?
• History records

10
Frame

• Inline Frame
• Can inserted into anywhere in a HTML Document
• Can create iframe on the fly
• Same advantage and drawback with Frameset but
  better SEO
• Examples
• Tab Framework

11
Cookie

• Sharing the cookies between server and client
• Making lightweight page movement to send request
  to the server
• Image Replacement
• 204 Piggy Back

12
Cookies

• Image Replacement
• The src attribute of ltimg/gt
• An URL for making request
• Server write result to cookie
• Client checks the cookie
• Response to the page
• Examples
• Checking whether the user account exists
• Checking whether the user account exists
  (Server-side code)
• Improved Example

13
Cookies

• Image Replacement
• Advantage
• Better SEO
• Drawback
• Wont work while not using cookie
• Limited transfer size 4KB
• Cant cross domain
• Might be blocked for security consideration

14
Cookie

• 204 Piggy Back
• Making the use of HTTP status
• While the status set to 204 No Content, it wont
  have any response to browser.
• Client-side submit data as usual
• Server-side writes result to cookie
• Client-side detects the cookie
• Examples
• Getting Users Information (Server-side code)
• Amazon.com Rate It
• Image Upload

15
Cookie

• 204 Piggy Back
• Advantages
• No fake image
• Similar to traditional method
• Drawbacks
• Same with image replacement

16
External Javascript

• Include any Javascript files, even cross-domain
• Javascript itself is the data source
• Getting result by changing the external
  Javascript URL

17
External Javascript

• Example 1 Getting county list by changing city
• Actually an ASP file
• Return different data while the city parameter
  changes

18
External Javascript

• Example 2 Getting delicious feed
• JSON Javascript Object
• Switch user and change the show quantity

19
External Javascript

• Example YSM Linkspot, YSM eCM
• Plug and Play !

20
External Javascript

• Advantages
• Cross Domain
• Portable (Plug-in and Play)
• Drawbacks
• Underlying the server providing service
• Security Issue (Example)
• Connection Problem

21
XMLHttp

• Not hacks
• Generating request by Javascript
• Also old-fashioned technique
• Examples
• Paging Without Refresh
• Ajax Grid

22
XMLHttp

• Advantages
• No hack
• No history
• Drawbacks
• No history
• Cant cross domain

23
Questions?