Ajax Clientside Dynamic Web 20061040 Gunwoo Park Undergraduate

  • Slides: 18
Download presentation
Ajax & Client-side Dynamic Web 20061040 Gunwoo Park (Undergraduate)

Ajax & Client-side Dynamic Web 20061040 Gunwoo Park (Undergraduate)

Contents - What’s Ajax? What’s DHTML? (Java. Script, CSS, DOM) What’s XMLHttp. Request How

Contents - What’s Ajax? What’s DHTML? (Java. Script, CSS, DOM) What’s XMLHttp. Request How to instantiate XMLHttp. Request’s request/response with Server Why to use Ajax? Ajax’s Merit & Demerit (Summary) Ajax Implementation Example ETC References Q&A

What’s Ajax? - - - Asynchronous Java. Script And XML It’s just set of

What’s Ajax? - - - Asynchronous Java. Script And XML It’s just set of already existing technologies. Ajax = {DHTML, XMLHttp. Request} DHTML: Web page loaded in client-side can be changed efficiently and dynamically. ( = {Java. Script, CSS, DOM} ) XMLHttp. Request: Web page can asynchronously communicate(request/response) with server in background. Using Ajax = Web page request/response data from server using XMLHttp. Request, and meantime change page using DHTML. ※ XML is not essential part of Ajax. Naming sense is not good!

What’s DHTML? (1/4) - DHTML (Dynamic HTML) = {Java. Script + CSS + DOM}

What’s DHTML? (1/4) - DHTML (Dynamic HTML) = {Java. Script + CSS + DOM} - Java. Script: client-side script language. CSS: web style(how to present content) can be separated with web content. DOM: programming interface. Java. Script can access and control DOM. - - ※Changing DOM = Changing web page loaded in clientside.

What’s DHTML? – Java. Script (2/4) write_free_board. jsp - Client download all the Java.

What’s DHTML? – Java. Script (2/4) write_free_board. jsp - Client download all the Java. Script code. - Java. Script code is executed in client-side. - Very flexible language.

What’s DHTML? – CSS (3/4) hello. css CSS (Cascading Style Sheet) -Web content &

What’s DHTML? – CSS (3/4) hello. css CSS (Cascading Style Sheet) -Web content & style can be separated. CSS is charge of web style. - By using CSS, we can effectively decrease duplicated HTML codes. hello. html - In the future, we can easily modify the web style. For example, by modifying just few lines, you can convert whole page. If you modify “declared” style in hello. css, the result would be applied to several parts of HTML.

What’s DHTML? – DOM (4/4) DOM (Document Object Model) - Java. Script can access

What’s DHTML? – DOM (4/4) DOM (Document Object Model) - Java. Script can access each part of page using this model called “DOM”. (Capture from DOMInspector of Fire. Fox) Access DOM and modify web page content

What’s XMLHttp. Request? (1/2) - Ajax = {DHTML, XMLHttp. Request} - XMLHttp. Request is

What’s XMLHttp. Request? (1/2) - Ajax = {DHTML, XMLHttp. Request} - XMLHttp. Request is charge of request/response with server in background using HTTP protocol. - It’s just an Java. Script object. We can instantiate this object by predefined constructor, also can use predefined methods in browser. - Its communication is asynchronous. (more detail in next page)

What’s XMLHttp. Request? (2/2) What means “Asynchronous”? Synchronous Example>> “I click the ‘show image’

What’s XMLHttp. Request? (2/2) What means “Asynchronous”? Synchronous Example>> “I click the ‘show image’ button, then I should wait until my request(clicking) is processed by downloading all contents of next page to show image. ” Þ I cannot do any job until last request is fully processed. Asynchronous Example>> “I click the ‘show image’ button. Because it’s asynchronous, I can do other job like scroll-down to see some texts. If the request is fully processed, image is shown in the corner of this page. I need not to care about waiting. ” => I can do other job while last request is being processed.

How to instantiate XMLHttp. Request Constructor is different by type of web browser. But

How to instantiate XMLHttp. Request Constructor is different by type of web browser. But the basic methods are same. (open, send, etc)

XMLHttp. Request’s request/response with Server Process response data. In this example, response data is

XMLHttp. Request’s request/response with Server Process response data. In this example, response data is used to modify DOM. cf) Response data can be plain text, JSON, or XML, etc. Send request to server. In this example, no parameter is set. cf. send(parameter)

Why to use Ajax? What’s different with traditional web development(page by page)? First, many

Why to use Ajax? What’s different with traditional web development(page by page)? First, many functions is executed on client-side using Java. Script. Using Ajax, we can download necessary part by using XMLHttp. Request. You don’t need to download whole new page to refresh the page. It tends to download unnecessary data. (Maybe, latter can arise some question like this: When we click another menu, why should we download menu bar which is not needed to be re-downloaded? ) Dynamic change of web page is possible because of DHTML. By integrating DOM + XMLHttp. Request, we can make dynamic web interface.

Ajax’s Merit & Demerit (Summary) Merit 1. Dynamic changing of page without going new

Ajax’s Merit & Demerit (Summary) Merit 1. Dynamic changing of page without going new page. 2. Asynchronous, so user don’t need to wait. 3. Because of Java. Script, many functions can be executed on client side. It reduces server’s burden. 4. Network traffic is reduced because only necessary data are downloaded. 5. No plug-in is needed because native engine is provided by browser. (although not every…) Demerit 1. Requirement of knowledge about cross-browsing. 2. There are some browsers which doesn’t support Ajax. (Popular browsers provide Ajax. ) 3. It’s open source because of Java. Script, so differentiation is very hard. 4. Security problem should be more concerned.

Ajax Implementation Example Dragable Objects. If you drag an item into ★READ★ area, The

Ajax Implementation Example Dragable Objects. If you drag an item into ★READ★ area, The additional Information is downloaded from server, and printed in this area. Let’s see!!! Source code > http: //blog. naver. com/ssoouull/20052155521

ETC - XML: response as XML can be processed with DOM. JSON(Java. Script Object

ETC - XML: response as XML can be processed with DOM. JSON(Java. Script Object Notation): it’s response with object of Java. Script. If you’re interested in Ajax, first I recommend to study more detail about DHTML. In my experience, Java. Script seems most tricky part. If you plan to make huge project, you should know about refactoring or design pattern like MVC in Java. Script. I haven’t covered any detail of grammar or how to make a code because it’s not appropriate for this presentation. That’s for your job to do. Googling!!!

References - “Ajax in action” authored by Eric and Dave. “Ajax 入門” authored by

References - “Ajax in action” authored by Eric and Dave. “Ajax 入門” authored by Toshiro Takahashi.

Q&A

Q&A

Thank U

Thank U