ajax第一课.docx

1、ajax第一课第一课 ajax概述及开发步骤一、 ajax定义AJAX:(Asynchronous JavaScript and XML)并不是一项新技术,其实是多种技术的综合，包括Javascript、XHTML和CSS、DOM、XML和XMLHttpRequest. 服务器端语言：服务器需要具备向浏览器发送特定信息的能力。Ajax与服务器端语言无关。 XML (eXtensible Markup Language，可扩展标记语言) 是一种描述数据的格式。AJAX 程序需要某种格式化的格式来在服务器和客户端之间传递信息，XML 是其中的一种选择 XHTML（eXtended Hypertex

2、t Markup Language,使用扩展超媒体标记语言）和 CSS（Cascading Style Sheet,级联样式单）标准化呈现； DOM（Document Object Model,文档对象模型）实现动态显示和交互； 使用XMLHTTP组件XMLHttpRequest对象进行异步数据读取 使用JavaScript绑定和处理所有数据二、AJAX不是完美的技术。也存在缺陷：1 AJAX大量使用了Javascript和AJAX引擎，而这个取决于浏览器的支持。IE5.0及以上、Mozilla1.0、NetScape7及以上版本才支持，Mozilla虽然也支持AJAX，但是提供XMLHttp

3、Request的方式不一样。所以，使用AJAX的程序必须测试针对各个浏览器的兼容性。 2 AJAX更新页面内容的时候并没有刷新整个页面，因此，网页的后退功能是失效的；有的用户还经常搞不清楚现在的数据是旧的还是已经更新过的。这个就需要在明显位置提醒用户“数据已更新”。 3 对流媒体的支持没有FLASH、Java Applet好。 4 一些手持设备（如手机、PDA等）现在还不能很好的支持Ajax。三、使用Ajax完成登录验证1、XMLHttpRequest XMLHttpRequest对象XMLHttpRequest是XMLHTTP组件的对象，通过这个对象，AJAX可以像桌面应用程序一样只同服务器

4、进行数据层面的交换，而不用每次都刷新界面，也不用每次将数据处理的工作都交给服务器来做；这样既减轻了服务器负担又加快了响应速度、缩短了用户等待的时间。 XMLHttpRequest最早是在IE5中以ActiveX组件的形式实现的。非W3C标准. 创建XMLHttpRequest对象（由于非标准所以实现方法不统一） Internet Explorer把XMLHttpRequest实现为一个ActiveX对象 其他浏览器（Firefox、Safari、Opera）把它实现为一个本地的JavaScript对象。 XMLHttpRequest在不同浏览器上的实现是兼容的，所以可以用同样的方式访问XMLH

5、ttpRequest实例的属性和方法，而不论这个实例创建的方法是什么。2、创建方式function createXmlHttpRequest() var xmlHttp; try /Firefox, Opera 8.0+, Safari xmlHttp=new XMLHttpRequest(); catch (e) try /Internet Explorer xmlHttp=new ActiveXObject(Msxml2.XMLHTTP); catch (e) try xmlHttp=new ActiveXObject(Microsoft.XMLHTTP); catch (e) retur

6、n xmlHttp; 3、XMLHttpRequest对象方法方法 描述 abort() 停止当前请求 getAllResponseHeaders() 把http请求的所有响应首部作为键/值对返回getResponseHeader(headerLabel) 返回指定首部的串值open(“method”,”url”) 建立对服务器的调用，method参数可以是GET,POST。url参数可以是相对URL或绝对URL。这个方法还包括3个可选参数。 send(content) 向服务器发送请求 setRequestHeader(label, value) 把指定首部设置为所提供的值。在设置任何首部之

7、前必须先调用open() 4、开发的步骤AJAX实质上也是遵循Request/Server模式，所以这个框架基本的流程是： 对象初始化 发送请求 服务器接收 服务器返回 客户端接收 修改客户端页面内容。只不过这个过程是异步的。具体见以下代码:login.jsp login.jsp !- - var httpreq; var rst=; function createXmlHttpRequest() var xmlHttp; try /Firefox, Opera 8.0+, Safari xmlHttp = new XMLHttpRequest(); catch (e) try /Intern

8、et Explorer xmlHttp = new ActiveXObject(Msxml2.XMLHTTP); catch (e) try xmlHttp = new ActiveXObject(Microsoft.XMLHTTP); catch (e) return xmlHttp; httpreq=createXmlHttpRequest(); /针对用户名判断 function sendname() var s1=document.userForm.uname.value; var url=user.do?op=checkUser&uname=+s1; httpreq.open(POS

9、T,url,true);/打开服务器资源 httpreq.onreadystatechange=callsendname;/调用回调方法 httpreq.send(null);/发送数据 function callsendname() /服务器响应已经完成 if(httpreq.readyState=4) /判断服务器状态是否成功 if(httpreq.status=200) /获取服务器返回的数据 rst=httpreq.responseText; document.getElementById(suname).innerHTML=rst; /= function sendpasswd()

10、var s1=document.userForm.passwd.value; var url=user.do?op=checkPasswd&passwd=+s1; httpreq.open(POST,url,true);/打开服务器资源 httpreq.onreadystatechange=callsendpasswd;/调用回调方法 httpreq.send(null);/发送数据 function callsendpasswd() /服务器响应已经完成 if(httpreq.readyState=4) /判断服务器状态是否成功 if(httpreq.status=200) /获取服务器返回的数据 rst=httpreq.responseText; document.getElementById(upasswd).innerHTML=rst; /= 用户登录 账号: 密码: 服务器端的代码如下：UserForm.java/* * Generated by MyEclipse Struts * Template path: template