不错的ajax与dwr框架入门文档

《不错的ajax与dwr框架入门文档》由会员上传分享，免费在线阅读，更多相关内容在行业资料-天天文库。

1、Ajax技术为什么需要Ajax?Web2.0的特点内容聚合：RSS、Atom等信息格式规范化的标准用户贡献内容：Web2.0的最大特征社会化网络：模拟现实生活的网络运作模式其核心理念就是控制权由网站转到用户Ajax技术优势Ajax技术是Web2.0的核心技术之一Ajax技术包括JavaScript函数库和Ajax框架符合Web2.0的理念Ajax技术的提供更丰富的“用户体验”，新的交互方式无刷新：不刷新整个页面，只刷新局部l只更新局部内容，有效利用带宽l提供连续的用户体验l类似于C/S的交互效果Google地图的原理：主动式缓存，

2、移动时先用Ajax把周围的地图图片下载下来缓存在浏览器中什么是Ajax?Ajax是一种客户端技术（AsynchronousJavaScriptAndXml－异步的）只刷新局部页面的技术异步：发送请求后不等返回结果，由回调函数处理结果JavaScript：向服务器发起请求，获得返回结果，更新页面XML：封装数据用途：使用JavaScript从服务器获取数据而不必刷新整个页面Web应用模型Ajax重新定义用户的工作流程。同步用户交互模式:工作-等待。异步用户交互模式:工作-工作。重新定义Web架构Ajax技术原理1．JavaScrip

3、t脚本触发事件，调用JavaScript函数2．在JavaScript函数中通过XmlHttpRrequest异步调用调用服务器程序3．服务器程序向数据库发送请求4．数据库向服务器程序反馈数据5．服务器程序响应给XmlHttpRrequest对象6．XmlHttpRrequest对象调用回调JavaScript函数7．回调函数控制页面局部更新如何使用Ajax?XmlHttpRrequest对象主要方法XmlHttpRrequest对象的主要属性Ajax使用步骤//定义一个函数创建XmlHttpRequest对象functioncr

4、eateXmlHttpRequest(){if(window.ActiveXObject){returnnewActiveXObject("Microsoft.XMLHTTP");}elseif(window.XMLHttpRequest){returnnewXMLHttpRequest();}}//定义调用异步请求的函数functiondoLogin(){varusr=document.getElementById("userName");varpwd=document.getElementById("password");//

5、客户端验证代码...varurl="login.do?userName="+usr.value+"&password="+pwd.value;//创建XmlHttpRequest组件xmlHttpRequest=createXmlHttpRequest();//设置回调函数xmlHttpRequest.onreadystatechange=haoLeJiaoWo;//初始化XmlHttpRequest组件xmlHttpRequest.open("GET",url,true);//例如name=myname&pwd=password

6、如果是以Post方式提交则要设置这个请求的头部信息//xmlHttpRequest.setRequestHeader("Content-Type","application/x-www-form-urlencoded;charset=UTF-8");//发送请求，这里可以传递参数，以键值对的方式传递//xmlHttpRequest.send("name=lxt008&password=pass");xmlHttpRequest.send(null);}//回调函数functionhaoLeJiaoWo(){if(xmlHttpRe

7、quest.readyState==4){if(xmlHttpRequest.status==200){alert(dwrLoginForm.getUserName());varstr=xmlHttpRequest.responseText;alert(str);if("success"==str){document.getElementById("spUsername").innerText=curUserName;document.getElementById("dvLogin").style.display="none";d

8、ocument.getElementById("dvOnline").style.display="block";}}}}send(参数)无参数时也必须使用：send(null)使用send方法传递参数使用的是POST方法，需要设定Content-