ajax重要文档,主要介绍Ajax的内容。.ppt

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 – 跨浏览器 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) 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 mins 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 Properties Number readyState Function onreadystatechange String responseText XmlDocument responseXML Number status String statusText onreadystatechange 是一个函数指针 Mastering AJAX in 5 min 理解 readyState 0 = uninitialized 1 = loading 2 = loaded 3 = interactive 4 = complete 我们的程序逻辑一般在这里 问题: onreadystatechange 只被调用一次吗？? 至少2-4次 Mastering AJAX in 5 min GET/POST in AJAX var postContent = name= + encodeURIComponent(Jacky Liu) + email= + encodeURIComponent(buford@); 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-ww