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)
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
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("[email protected]");
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
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