客户端高级应AJAX初步.ppt

动态网页设计之客户端高级应用 ——AJAX初步 AJAX概念 Ajax 由 HTML、JavaScript 技术、DHTML 和 DOM 组成，这一杰出的方法可以将笨拙的 Web 界面转化成交互性的 Ajax 应用程序。 桌面应用程序操作起来基本上不需要等待。 Web 应用程序以页面为主，需要等待服务器响应，等待屏幕刷新，等待请求返回和生成新的页面。 Ajax 尝试改变WEB页页的等待情况 Ajax主要用到JavaScript，通过DOM改变页面上的部分内容。 XMLHttpRequest对象 AJAX的核心是通过服务操作XMLHttpRequest对象。 XMLHttpRequest是一套可以在脚本语言中通过http协议向服务器传送或从服务器接收XML及其他数据的一套API。 XMLHttpRequest对象 在一般的 Web 应用程序中，用户填写表单字段并单击 Submit 按钮。然后整个表单发送到服务器，服务器处理再发送回全新的页面。在返回前用户必须等待。 Ajax 基本上就是把 JavaScript 技术和 XMLHttpRequest 对象放在 Web 表单和服务器之间。当用户填写表单时，数据由JavaScript通过XMLHttpRequest发送给服务器。请求是在幕后发送的用户一般是不知道请求是何时发出。请求是异步发送的，就是说 JavaScript 代码（和用户）不用等待服务器的响应。因此用户可以继续输入数据、滚动屏幕和使用应用程序。 服务器将数据返回给XMLHttpRequest 对象，XMLHttpRequest 调用相应的JavaScript代码或函数来处理服务器返回的数据：更新页面，让人感觉应用程序是立即完成的，表单没有提交或刷新而用户得到了新数据。 AJAX应用-1 1 创建 XMLHttpRequest 对象 var xmlHttp = new XMLHttpRequest(); 在 Microsoft 浏览器上创建 XMLHttpRequest 对象 var xmlHttp = false; try { xmlHttp = new ActiveXObject(Msxml2.XMLHTTP); } catch (e) { try { xmlHttp = new ActiveXObject(Microsoft.XMLHTTP); } catch (e2) { xmlHttp = false; } } AJAX应用-1 以支持多种浏览器的方式创建 XMLHttpRequest 对象 var xmlHttp = false; try { xmlHttp = new XMLHttpRequest(); } catch (trymicrosoft) { try { xmlHttp = new ActiveXObject(Msxml2.XMLHTTP); } catch (othermicrosoft) { try { xmlHttp = new ActiveXObject(Microsoft.XMLHTTP); } catch (failed) { xmlHttp = false; } } } if (!xmlHttp) alert(创建XMLHttpRequest失败!); AJAX应用-2 2 获取表单数据和修改表单上的数据可以用formName.domainName.value或document.getElementById(domainID) 两种方法都可 AJAX应用-3 3 发出 Ajax 请求 function callServer() { // 获取数据 var uid = document.getElementById(uid).value; if (uid == null || uid == ) return; // 建立请求的URL var url = /testUID.asp?uid= + escape(uid); // 建立与服务器的连接 xmlHttp.open(GET, url, true); // 告诉XMLHttpRuquest对象，谁来处理返回的数据 xmlHttp.onreadystatechange = updatePage; // 发送请求 如果有数据主体，则需要先加上xmlHttp.setRequestHeader(Content-Type, application/x-www-form-url