2014年AJAX 的历史.pptVIP

* Note this is js functions so the params indeed don’t have exactly type name * Using encodeURIComponent() to avoid special char/Unicode problems. AJAX can’t upload files. This is equals to: form action=“somepage” method=“get/post” input name=“name” value=“bea” input name=“email” value=“someone@” /form AJAX 教学目标 什么是AJAX AJAX 示例 高级JavaScript 安全 AJAX 的历史 2005年2月，Adaptive Path AJAX =“Asynchronous JavaScript + XML 新瓶装旧酒 著名案例 : Google Maps , Google Suggest , GMail ,Outlook Web Access 下一代浏览器将会配置内置的 UI 组件(XUL etc) Web 1.0 Web 2.0 Web 1.0 – 同步 Web 1.0 Web 2.0(cont) Web 2.0 异步 Mastering AJAX in 5 min DHTML + XmlHttpRequest + XML? = Ajax 大多数程序员熟悉 DHTML, XML, JS XmlHttpRequest – 新的玩意儿? 很像 ServletRequest 支持力度大: Internet Explorer 5.5+, Safari 1.2, Mozilla 1.0 / Firefox, and Netscape 7 JavaScript – 跨浏览器 AJAX Sequence Diagram Mastering AJAX in 5 如何创建 XMLHttpRequest对象 Mozilla, Firefox, Safari, Netscape, IE 7: var xmlhttp=new XMLHttpRequest() Internet Explorer 5.5, 6, 7: var xmlhttp=new ActiveXObject(Microsoft.XMLHTTP) Or var xmlhttp=new ActiveXObject(Msxml2.XMLHTTP) if (window.XMLHttpRequest) { // if Mozilla, Safari etc httprequest=new XMLHttpRequest() if (httprequest.overrideMimeType) httprequest.overrideMimeType(text/xml) } else if (window.ActiveXObject) { // if IE try { httprequest=new ActiveXObject(Msxml2.XMLHTTP); } catch (e){ try{ httprequest=new ActiveXObject(Microsoft.XMLHTTP); } catch (e){} } } Mastering AJAX in 5 if (xmlhttp) { xmlhttp.onreadystatechange=xmlhttpChange; xmlhttp.open(GET,/test.htm,true); xmlhttp.send(); } function xmlhttpChange() { // if xmlhttp shows loaded if (xmlhttp.readyState==4) { if (xmlhttp.status==200) { 接收回传数据 } else { alert(Problem retrieving XML data); } } } Mastering AJAX in 5 XMLHttpRequest 对象参考 方法 void open(String method, String url, Boolean async) void send(String body) void setHeader(String header, String value) String getResponseHe