ajax第一课.docx
《ajax第一课.docx》由会员分享，可在线阅读，更多相关《ajax第一课.docx（15页珍藏版）》请在冰豆网上搜索。
ajax第一课
第一课ajax概述及开发步骤
一、ajax定义
AJAX:
（AsynchronousJavaScriptandXML）并不是一项新技术,其实是多种技术的综合，包括Javascript、XHTML和CSS、DOM、XML和XMLHttpRequest.
Ø服务器端语言：
服务器需要具备向浏览器发送特定信息的能力。
Ajax与服务器端语言无关。
ØXML（eXtensibleMarkupLanguage，可扩展标记语言）是一种描述数据的格式。
AJAX程序需要某种格式化的格式来在服务器和客户端之间传递信息，XML是其中的一种选择
ØXHTML（eXtendedHypertextMarkupLanguage,使用扩展超媒体标记语言）和CSS（CascadingStyleSheet,级联样式单）标准化呈现；
ØDOM（DocumentObjectModel,文档对象模型）实现动态显示和交互；
Ø使用XMLHTTP组件XMLHttpRequest对象进行异步数据读取
Ø使用JavaScript绑定和处理所有数据
二、AJAX不是完美的技术。
也存在缺陷：
1AJAX大量使用了Javascript和AJAX引擎，而这个取决于浏览器的支持。
IE5.0及以上、Mozilla1.0、NetScape7及以上版本才支持，Mozilla虽然也支持AJAX，但是提供XMLHttpRequest的方式不一样。
所以，使用AJAX的程序必须测试针对各个浏览器的兼容性。
2AJAX更新页面内容的时候并没有刷新整个页面，因此，网页的后退功能是失效的；有的用户还经常搞不清楚现在的数据是旧的还是已经更新过的。
这个就需要在明显位置提醒用户“数据已更新”。
3对流媒体的支持没有FLASH、JavaApplet好。
4一些手持设备（如手机、PDA等）现在还不能很好的支持Ajax。
三、使用Ajax完成登录验证
1、XMLHttpRequest
▪XMLHttpRequest对象
XMLHttpRequest是XMLHTTP组件的对象，通过这个对象，AJAX可以像桌面应用程序一样只同服务器进行数据层面的交换，而不用每次都刷新界面，也不用每次将数据处理的工作都交给服务器来做；这样既减轻了服务器负担又加快了响应速度、缩短了用户等待的时间。
▪XMLHttpRequest最早是在IE5中以ActiveX组件的形式实现的。
非W3C标准.
▪创建XMLHttpRequest对象（由于非标准所以实现方法不统一）
ØInternetExplorer把XMLHttpRequest实现为一个ActiveX对象
Ø其他浏览器（Firefox、Safari、Opera…）把它实现为一个本地的JavaScript对象。
ØXMLHttpRequest在不同浏览器上的实现是兼容的，所以可以用同样的方式访问XMLHttpRequest实例的属性和方法，而不论这个实例创建的方法是什么。
2、创建方式
functioncreateXmlHttpRequest（）{
varxmlHttp;
try{//Firefox,Opera8.0+,Safari
xmlHttp=newXMLHttpRequest（）;
}catch（e）{
try{//InternetExplorer
xmlHttp=newActiveXObject（"Msxml2.XMLHTTP"）;
}catch（e）{
try{
xmlHttp=newActiveXObject（"Microsoft.XMLHTTP"）;
}catch（e）{}
}
}
returnxmlHttp;
}
3、XMLHttpRequest对象方法
方法
描述
abort（）
停止当前请求
getAllResponseHeaders（）
把http请求的所有响应首部作为键/值对返回
getResponseHeader（"headerLabel"）
返回指定首部的串值
open（“method”,”url”）
建立对服务器的调用，method参数可以是GET,POST。
url参数可以是相对URL或绝对URL。
这个方法还包括3个可选参数。
send（content）
向服务器发送请求
setRequestHeader（"label","value"）
把指定首部设置为所提供的值。
在设置任何首部之前必须先调用open（）
4、开发的步骤
AJAX实质上也是遵循Request/Server模式，所以这个框架基本的流程是：
▪对象初始化
▪发送请求
▪服务器接收
▪服务器返回
▪客户端接收
▪修改客户端页面内容。
只不过这个过程是异步的。
具体见以下代码:
login.jsp
<%@pagelanguage="java"pageEncoding="UTF-8"%>
<%@tagliburi="http:
//struts.apache.org/tags-bean"prefix="bean"%>
<%@tagliburi="http:
//struts.apache.org/tags-html"prefix="html"%>
<%@tagliburi="http:
//struts.apache.org/tags-logic"prefix="logic"%>
<%@tagliburi="http:
//struts.apache.org/tags-tiles"prefix="tiles"%>
DOCTYPEHTMLPUBLIC"-//W3C//DTDHTML4.01Transitional//EN">
htmllang="true">
base/>
login.jsp
--
-->
varhttpreq;
varrst="";
functioncreateXmlHttpRequest（）{
varxmlHttp;
try{//Firefox,Opera8.0+,Safari
xmlHttp=newXMLHttpRequest（）;
}catch（e）{
try{//InternetExplorer
xmlHttp=newActiveXObject（"Msxml2.XMLHTTP"）;
}catch（e）{
try{
xmlHttp=newActiveXObject（"Microsoft.XMLHTTP"）;
}catch（e）{
}
}
}
returnxmlHttp;
}
httpreq=createXmlHttpRequest（）;
//针对用户名判断
functionsendname（）{
vars1=document.userForm.uname.value;
varurl="user.do?
op=checkUser&uname="+s1;
httpreq.open（"POST",url,true）;//打开服务器资源
httpreq.onreadystatechange=callsendname;//调用回调方法
httpreq.send（null）;//发送数据
}
functioncallsendname（）{
//服务器响应已经完成
if（httpreq.readyState==4）{
//判断服务器状态是否成功
if（httpreq.status==200）{
//获取服务器返回的数据
rst=httpreq.responseText;
document.getElementById（"suname"）.innerHTML=rst;
}
}
}
//=================================
functionsendpasswd（）{
vars1=document.userForm.passwd.value;
varurl="user.do?
op=checkPasswd&passwd="+s1;
httpreq.open（"POST",url,true）;//打开服务器资源
httpreq.onreadystatechange=callsendpasswd;//调用回调方法
httpreq.send（null）;//发送数据
}
functioncallsendpasswd（）{
//服务器响应已经完成
if（httpreq.readyState==4）{
//判断服务器状态是否成功
if（httpreq.status==200）{
//获取服务器返回的数据
rst=httpreq.responseText;
document.getElementById（"upasswd"）.innerHTML=rst;
}
}
}
//==================================
用户登录
formaction="user.do?
op=check"method="post">
账号:
textproperty="uname"onblur="sendname（）;"/>red;">
密码:
passwordproperty="passwd"onblur="sendpasswd（）;"/>red;">
buttonproperty=""value="提交"/>
form>
html>
服务器端的代码如下：
UserForm.java
/*
*GeneratedbyMyEclipseStruts
*Templatepath:
template
升级会员 