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

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

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

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

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

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. - In the future, we can easily modify the web style. For example, by modifying just few lines, you can convert whole page. hello.html If you modify “declared” style in hello.css, the result would be applied to several parts of HTML.

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

- Ajax = {DHTML, XMLHttpRequest} - XMLHttpRequest is charge of request/response with server in background using HTTP protocol. - It’s just an JavaScript 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 XMLHttpRequest? (1/2)

What’s XMLHttpRequest? (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 XMLHttpRequest Constructor is different by type of web browser. But the basic methods are same. (open, send, etc)

XMLHttpRequest’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 functions is executed on client-side using JavaScript. Using Ajax, we can download necessary part by using XMLHttpRequest. 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 + XMLHttpRequest, we can make dynamic web interface.

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 JavaScript, 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 JavaScript, so differentiation is very hard. 4. Security problem should be more concerned.

Ajax Implementation Example Source code > 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!!!

ETC - XML: response as XML can be processed with DOM. - JSON(JavaScript Object Notation): it’s response with object of JavaScript. If you’re interested in Ajax, first I recommend to study more detail about DHTML. In my experience, JavaScript seems most tricky part. If you plan to make huge project, you should know about refactoring or design pattern like MVC in JavaScript. 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 Toshiro Takahashi.

Q&A

Thank U