不错的Ajax与DWR框架入门文档.docVIP

Ajax技术 为什么需要Ajax? Web2.0的特点 内容聚合：RSS、Atom等信息格式规范化的标准 用户贡献内容：Web2.0的最大特征 社会化网络：模拟现实生活的网络运作模式 其核心理念就是控制权由网站转到用户 Ajax技术优势 Ajax技术是Web2.0的核心技术之一 Ajax技术包括JavaScript函数库和Ajax框架 符合Web2.0的理念 Ajax技术的提供更丰富的“用户体验”，新的交互方式 无刷新：不刷新整个页面，只刷新局部 只更新局部内容，有效利用带宽 提供连续的用户体验 类似于C/S的交互效果 Google地图的原理： 主动式缓存，移动时先用Ajax把周围的地图图片下载下来缓存在浏览器中 什么是Ajax? Ajax是一种客户端技术（Asynchronous JavaScript And Xml－异步的） 只刷新局部页面的技术 异步：发送请求后不等返回结果，由回调函数处理结果 JavaScript：向服务器发起请求，获得返回结果，更新页面 XML：封装数据 用途：使用JavaScript从服务器获取数据而不必刷新整个页面 Web应用模型 Ajax重新定义用户的工作流程。 同步 用户交互模式: 工作-等待。 异步 用户交互模式: 工作-工作。 重新定义Web架构 Ajax技术原理 1．JavaScript脚本触发事件，调用JavaScript函数 2．在JavaScript函数中通过XmlHttpRrequest异步调用调用服务器程序 3．服务器程序向数据库发送请求 4．数据库向服务器程序反馈数据 5．服务器程序响应给XmlHttpRrequest对象 6．XmlHttpRrequest对象调用回调JavaScript函数 7．回调函数控制页面局部更新 如何使用Ajax? XmlHttpRrequest对象主要方法 XmlHttpRrequest对象的主要属性 Ajax使用步骤 //定义一个函数创建XmlHttpRequest对象 function createXmlHttpRequest(){ if(window.ActiveXObject){ return new ActiveXObject(Microsoft.XMLHTTP); }else if(window.XMLHttpRequest){ return new XMLHttpRequest(); } }//定义调用异步请求的函数 function doLogin(){ var usr = document.getElementById(userName); var pwd = document.getElementById(password); var url = login.do?userName=+usr.value+password=+pwd.value; //创建XmlHttpRequest组件 xmlHttpRequest = createXmlHttpRequest(); //设置回调函数 xmlHttpRequest.onreadystatechange = haoLeJiaoWo; //初始化XmlHttpRequest组件 xmlHttpRequest.open(GET,url,true); //例如name=mynamepwd=password如果是以Post方式提交则要设置这个请求的头部信息 //xmlHttpRequest.setRequestHeader(Content-Type,application/x-www-form-urlencoded;charset=UTF-8); //发送请求，这里可以传递参数，以键值对的方式传递 //xmlHttpRequest.send(name=lxt008password=pass); xmlHttpRequest.send(null); } //回调函数 function haoLeJiaoWo(){ if(xmlHttpRequest.readyState == 4){ if(xmlHttpRequest.status == 200){ alert(dwrLoginForm.getUserName()); var str = xmlHttpRequest.responseText; alert(str); if (success==str){ document.getE