2014年Ajax+初体验.pptVIP

XMLHttpRequest var request = new ActiveXObject(Microsoft.XMLHTTP); 方法 open (method,URL) ：建立对服务器的调用 send(content) ：向服务器发送请求 属性 onreadystatechange ：状态回调函数 responseText ：服务器的响应字符串 status：服务器返回的HTTP状态码 readyState ：对象状态 0 = 未初始化 1 = 正在加载 2 = 已加载 3 = 交互中 4 = 完成 * 一切从头 开发Ajax 手动编程开发Ajax 定义web页: DHTML 传入消息和执行DOM转换: JavaScript 异步消息传递通道: XMLHttpRequest 消息和数据的表现: XML (或JSON, text...) 全面但复杂 需要低级别的编码 依赖浏览器的支持 缺乏问题诊断和调试工具 * 示例 － 异步刷新页面 var request = new ActiveXObject(Microsoft.XMLHTTP); request.onreadystatechange = function(){ if(request.readyState == 1){ document.getElementById(result).innerText = Loading...; } if(request.readyState == 4 request.status == 200){ document.getElementById(result).innerText = request.responseText; } }; var delay = document.getElementById(delay); request.open(GET, http://... ); request.send(); * Ajax 框架 Prototype Prototype is a JavaScript Framework that aims to ease development of dynamic web applications. Dojo Dojo is the Open Source Javascript toolkit that makes professional web development better, easier, and faster DWR DWR allows Javascript in a browser to interact with Java on a server and helps you manipulate web pages with the results. * Dojo - Widget html head script type=text/javascript src=dojoAjax/dojo.js/script script type=text/javascript dojo.require(dojo.widget.Button); /script /head body div dojoType=ButtonSubmit/div /body /html * Dojo - dojo.io.bind dojo.io.bind({ url: /sampleData.txt, load: function(type, data, evt){ … }, error: function(type, error){ … }, mimetype: text/plain“, transport: XMLHTTPTransport“ }); * 示例－自动补全 * 示例－进度条 * VV 示例－进度条 * 示例－实时检验 * C 示例－实时检验 * 示例－实时检验 * 问题 － 客户端 导航后退和前进按钮可以正常工作，以便终端用户可以到历史记录页面。 用户应该可以创建书签。 支持深链接，以保证终端用户可以将这个页面通过电子邮件发送给朋友和同事。 刷新按钮可以正常工作，以便刷新当前的状态而不是重新初始化应用程序。 搜索引擎可以为页面做索引并创建到搜索项的深链接。 * 解决方案 URI 地址 页面 页面 页面 window.location.hash * 影响 － 服务器端 安全 输入验证 攻 击平面 性能 - scen