ajax第一课.docx
- 文档编号:2465480
- 上传时间:2022-10-29
- 格式:DOCX
- 页数:15
- 大小:38.93KB
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/>
--
-->
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
- 配套讲稿:
如PPT文件的首页显示word图标,表示该PPT已包含配套word讲稿。双击word图标可打开word文档。
- 特殊限制:
部分文档作品中含有的国旗、国徽等图片,仅作为作品整体效果示例展示,禁止商用。设计者仅对作品中独创性部分享有著作权。
- 关 键 词:
- ajax 第一