AJAX Introduction

By beansoft@126.com

Version 1.2

May 2007

Table of Contents

Concept of AJAX AJAX Basic Samples Advanced JavaScript JavaScript Dev & Debug JavaScript Open Source Library and Projects Security

History of AJAX

Authored by Adaptive Path in mid February 2005

Stands for “Asynchronous JavaScript + XML” New bottle of old wine Famous examples : Google Maps ,

Google Suggest , GMail ,Outlook Web Access

The next generation browser will have built-in UI Component(XUL etc)

Web 1.0 & Web 2.0

Web 1.0 – Synchronous

Web 1.0 & Web 2.0(cont) Web 2.0 Asynchronous

Mastering AJAX in 5 min

DHTML + XmlHttpRequest + XML? = Ajax Most people familiar with DHTML, XML, JS XmlHttpRequest – the new guy? Very like a ServletRequest Widely support: Internet Explorer 5.5+, Safari 1.2,

Mozilla 1.0 / Firefox, and Netscape 7 JavaScript – cross browser defacto standard

AJAX Sequence Diagram

Mastering AJAX in 5 min(cont) Creating an XMLHttpRequest Object

For Mozilla, Firefox, Safari, Netscape, IE 7: var xmlhttp=new XMLHttpRequest()

For Internet Explorer 5.5, 6, 7: var xmlhttp=new ActiveXObject("Microsoft.XMLHTTP") Or var xmlhttp=new ActiveXObject("Msxml2.XMLHTTP")

See notes for a helper object(xmlextras.js)

Mastering AJAX in 5 min(cont) if (xmlhttp) {

xmlhttp.onreadystatechange=xmlhttpChange; xmlhttp.open("GET","http://www.somehost.com/test.htm",true);

xmlhttp.send(); } function xmlhttpChange() { // if xmlhttp shows "loaded"

if (xmlhttp.readyState==4) { // if "OK" if (xmlhttp.status==200) { // ...some code here... } else {

alert("Problem retrieving XML data"); }

} }

Small question: onreadystatechange is called one time?

Mastering AJAX in 5 min(cont) The XMLHttpRequest Object Reference Methods

void open(String method, String url, Boolean async)

void send(String body) void setHeader(String header, String value) String getResponseHeader(String header) String getAllResponseHeaders() void abort()

Mastering AJAX in 5 min(cont) Properties

Number readyState Function onreadystatechange String responseText XmlDocument responseXML Number status String statusText

onreadystatechange is a function pointer

Mastering AJAX in 5 min(cont) Understanding the readyState

0 = uninitialized 1 = loading 2 = loaded 3 = interactive 4 = complete

Normally our logic is here

Now we answer: onreadystatechange is called one time? At least 2 ~ 4 times the callback is called.

Mastering AJAX in 5 min(cont) GET/POST in AJAX

var postContent = "name=" + encodeURIComponent("Jacky Liu") + "&email=" + encodeURIComponent("buford@known-space.com");

GET xmlhttp.open("GET", "somepage" + "?" + postContent, true);

POST(content in body and set header) xmlhttp.open("POST", "somepage", true); xmlhttp.setRequestHeader("Content-Type", "application/x-

www-form-urlencoded");//application/x-www-form-urlencoded; charset=UTF-8

xmlhttp.send(postContent);

Mastering AJAX in 5 min(cont) Looking some demo

Under apache-tomcat-5.5.20\webapps\ROOT Read text file AJAX Former DWR Suggest XML Parser We can use some ajax frameworks to do this

Articles: AJAX Follow Me 1, 2, 3, dev2dev articles

Mastering AJAX in 5 min(cont) Web UI/AJAX Components a quick to do these jobs.

Advanced Javascript - var

Everything can be a var Primitive elements Object And even function (this what the callbacks)

Eg: Built in: window.alert(msg); Var alertf = window.alert; Alertf(msg);

Advanced Javascript – Create Object Method 1: flat array style quick object define var myObject = { username : “beansoft ", age : 24, test : function() {alert(this.age);} };

Advanced Javascript – Create Object Method 2: using/extends JSObject var myObject = new Object(); myObject.username = "beansoft"; myObject.age = 24;

Advanced Javascript – Create Object Method 3: using constructor

function MyObject(username, age) { this.username = username; this.age = age; this.test = function() {alert(this.age);}; }

var myObject = new MyObject("beansoft", 24);

A member could be a function

Advanced Javascript – Using Object var myObject = new MyObject("beansoft",

24);

// Using: myObject.username, myObject["username"], myObject[0]

myObject.test();// Will display alert window, value is age

myObject.username = "Hello";// Will asign the username property to "Hello"

Advanced Javascript – Prototype Supports extends etc, OO

Person.prototype.setAge = function (age)  {        this .age = age;   }     Person.prototype.toString = function ()  {        return  'name:' + this .name + ' age:' + this .age;   } 

A good framework: Prototype (see next page) Don’t take so much time on the js OO theory

Dev Tool

JSEclipse http://www.interaktonline.com/Products/Eclipse/JSEclipse (JRE 1.4+, Eclispe 3.1+)

Venkman (JS Debugger) http://getahead.ltd.uk/ajax/venkman

Instant Source (IE Tool, commercial) Web Developer (FF Tool) Internet Explorer Developer Toolbar DOM Inspector (Firefox built-in toll)

Dev Tool(cont)

FireBug(FF Tool) Aptana(Eclipse/RCP app for js/css/html, open

source) Portable Firefox provided with mostly useful

Plugins(see ajax/FirefoxPortable) Demo of these tools

How to using debugger(debugger keyword) How to debug ajax/js How to inspect html content

Advanced Topics - Coding

AJAX in Chinese Env(escape() & encodeURI() & encodeURIComponent() )

Cache Problem(jsp/html avoid cache or add timestamp params)

Encoding – UTF8 problem Web MVC, Web OO Advantages and Shortcoming

File Upload Linkless Problem Precache Content

AJAX or AJAH or headers?

XMLHttpRequest + XML XMLHttpRequest + HTML XMLHttpRequest + JS(eval(‘some js code’)), Google

favorite this XMLHttpRequest + Headers

Server: response.addHeader("response_script", escape("提交完成 "));

Client: if(xmlhttp.getResponseHeader("response_script")) {

alert(unescape(xmlhttp.getResponseHeader("response_script"));

} XMLHttpRequest + Other framework: JSON

AJAX or AJAH or headers?(escape in jsp) public static String escape(String src) { int i; char j; StringBuffer tmp = new StringBuffer(); tmp.ensureCapacity(src.length() * 6); for (i = 0; i < src.length(); i++) { j = src.charAt(i); if (Character.isDigit(j) || Character.isLowerCase(j) || Character.isUpperCase(j)) tmp.append(j); else if (j < 256) { tmp.append("%"); if (j < 16) tmp.append("0"); tmp.append(Integer.toString(j, 16)); } else { tmp.append("%u"); tmp.append(Integer.toString(j, 16)); } } return tmp.toString(); }

AJAX Open Source Projects DWR (含中文文档, DWR开发培训.ppt)

Prototype,DOJO,JQuery(thickbox) Easy Validation(含中文文档)

XLoadTree(含中文文档) http://webfx.eae.net jsDoc(for creating js lib document) yUI(Yahoo! JS UI Library), Yui-Ext(editable grid, dialog, pane, etc.) demo) jMaki https://ajax.dev.java.net/

JEE 5 integrated, JSF or just taglib, Netbeans Plugin,Demo

Dhtmlgrid, ZK, Echo2, GWT, Script.aculo.us

Security

Troubles with AJAX Unconventional Design Too many scripts Insecure communication Server Side Access Control Server Side Validation Client Side Validation Cross-Domain Access Denied

Security Tips

Follow best practice

Checking for Access Control and Input Validation flaws, whilst ensuring sensitive information travels over SSL

Server side checking Adding AJAX controls will never reduce your validation workload, they

will only increase it Do not rely on obfuscation Never assume that Client Side obfuscation will protect your most

important commercial secrets Using stable open source projects not betas Using proxy server/service to avoid cross domain limits

Q&A

Questions?

Thanks