2014年ajax技术30401315.pptVIP

* * * * * ajax技术 AJFJDSHFDHGKHFKLGHSKHGLKDHGJHLKSHDGJLSHLGDHSLHG * 目录 下载进度条 级联表单 下拉菜单 DWR * 传统web编程的局限 传统web编程中，客户端和服务器进行数据交换的方式，使页面重复加载 页面重载循环加载是最大的一个使用障碍 * Classic Web Applications From: /publications/essays/archives/000385.php * Ajax （异步 JavaScript 和 XML ） Ajax（即asynchronous JavaScript 和 XML）是一种 Web 应用程序开发的手段，它采用客户端脚本与 Web 服务器交换数据。所以，不必采用会中断交互的完整页面刷新，就可以动态地更新 Web 页面 DHTML Javascript + css + html Xml Dom XMLHttpRequest 它提供客户端和服务器通讯的协议。客户端可以通过它向http服务器发送请求并使用DOM处理响应结果。 * AJAX Web Applications From: /publications/essays/archives/000385.php * Ajax 往返过程 1. 创建XMLHttpRequest 的实例。Ajax 交互开始于叫作 XMLHttpRequest 对象。现在的绝对多数浏览器都增加了对XmlHttp的支持，IE中使用ActiveXObject方式创建XmlHttp对象。 2. 创建回调函数并与事件关联 3. 指定请求的服务器路径、请求方法，并建立连接，发送请求，可以同步或异步接收服务器的响应 4. 服务器返回xml信息，产生一个事件，由XMLHttpRequest 实例接收并调用回调函数处理 5. 由js修改响应页面 * Ajax 往返过程 * 创建XHR对象 //这个方法用于在不同的浏览器中创建对应的XMLHttpRequest对象,可以通用 function newXMLHttpRequest() { var xmlreq = false; if (window.XMLHttpRequest) { //创建非ie浏览器支持的XMLHttpRequest对象 xmlreq = new XMLHttpRequest(); } else if (window.ActiveXObject) {//创建ie浏览器支持的XMLHttpRequest对象 try { //创建较新版本的对象 xmlreq = new ActiveXObject(Msxml2.XMLHTTP); } catch (e1) { //失败就创建支持老版本的对象 try { xmlreq = new ActiveXObject(Microsoft.XMLHTTP); } catch (e2) { } } } return xmlreq; } * 创建XHR对象 function aa() { xhr = new ActiveXObject(Microsoft.XMLHTTP); xhr.onreadystatechange=callback; xhr.open(post,ajaxservlet,true); xhr.setRequestHeader(cache-control,no-cache); xhr.setRequestHeader(Content-Type,application/x-www-form-urlencoded); xhr.send(name=zsage=+i); handle = setTimeout(aa,1000); } function callback() { if(i=5) clearTimeout(handle); if(xhr.readystate==4) { if(xhr.status==200) { var dd = document.getElementById(tt); dd.innerHTML=xhr.responseText+- + i++ ; } } } * XHR对象方法 方法 描述