《二十五讲AJAX技术入门ppt课件》由会员分享，可在线阅读，更多相关《二十五讲AJAX技术入门ppt课件（36页珍藏版）》请在金锄头文库上搜索。
1、1/36第二十五讲第二十五讲第二十五讲第二十五讲 AJAX AJAX技术技术技术技术佘向飞佘向飞 、柯洪昌、柯洪昌长春工程学院软件学院长春工程学院软件学院烈侯灶陀概羔譬征识祸州姿莆零向慷坍数睫睹诛甜聋泄摆蒸蛛伸澎荷坤温二十五讲AJAX技术入门ppt课件二十五讲AJAX技术入门ppt课件AJAX（Asynchronous JavaScript and XML）其实是多种技术的综合，包括Javascript、XHTML 和CSS、DOM(文档对象模型)、XML 和XSTL、XMLHttpRequest。其中：使用XHTML 和CSS 标准化呈现，使用DOM 实现动态显示和交互，使用XML 和XST
2、L 进行数据交换与处理，使用XMLHttpRequest 对象进行异步数据读取，使用Javascript 绑定和处理所有数据。在AJAX 提出之前，业界对于上述技术都只是单独的使用，没有综合使用，也是由于之前的技术需求所决定的。随着应用的广泛，AJAX 也成为香饽饽了。AJAX 定义定义坐灼砾洽橱窄援辟税贪障忽尿掠夸主趁姨茁薛摈啸严优芜畏截料抬栽盲嚷二十五讲AJAX技术入门ppt课件二十五讲AJAX技术入门ppt课件2/36材涉吉默茧屿搀掐植谰雹门曙评恩芳炊瘸唯剿丸欢米虚蛮峰银沪臃餐挪帜二十五讲AJAX技术入门ppt课件二十五讲AJAX技术入门ppt课件3/36 Ajax的工作原理相当于在用户
3、和服务器之间的工作原理相当于在用户和服务器之间加了一个中间层，称为加了一个中间层，称为Ajax引擎，该引擎使引擎，该引擎使用户操作与服务器响应异步化。在这种模式下，用户操作与服务器响应异步化。在这种模式下，用户请求不是全部都提交给服务器。部分请求，用户请求不是全部都提交给服务器。部分请求，如一些数据验证和简单的数据处理请求等就交如一些数据验证和简单的数据处理请求等就交给给Ajax引擎完成，只有那些确实需要由服务引擎完成，只有那些确实需要由服务器来完成的请求，才由器来完成的请求，才由Ajax引擎代为向服务引擎代为向服务器提交。器提交。 蓉祟好贵漾腔毯莹彪拥吞莱赵佳膀哉婿甚札抹探喻尽节浸伶绘僧段愉
4、蹭引二十五讲AJAX技术入门ppt课件二十五讲AJAX技术入门ppt课件4/36 以下是SayHello.jsp页面代码： 姓名： 0) out.print(Hello “ +request.getParameter(name); %实例：传统的请求响应方式实例：传统的请求响应方式炼咳土尤丧仗碗过识尔囚酿将朋恐峙菩萤局实赡隋简刀肖突摆苍淘驰孝报二十五讲AJAX技术入门ppt课件二十五讲AJAX技术入门ppt课件5/36现状与需要解决的问题现状与需要解决的问题传统的传统的Web 应用采用同步交互过程，这种情应用采用同步交互过程，这种情况下，用户首先向况下，用户首先向HTTP 服务器触发一个行为服
5、务器触发一个行为或请求的呼求。反过来，服务器执行某些任务，或请求的呼求。反过来，服务器执行某些任务，再向发出请求的用户返回一个页面。这是一种再向发出请求的用户返回一个页面。这是一种不连贯的用户体验，服务器在处理请求的时候，不连贯的用户体验，服务器在处理请求的时候，用户多数时间处于等待的状态，屏幕内容也是用户多数时间处于等待的状态，屏幕内容也是一片空白。一片空白。郑舱恢冉驾怠说并爪捂皱俏章枉陆掐继愁量炒菜遭氯邢磅粕后慷林萨嗅癣二十五讲AJAX技术入门ppt课件二十五讲AJAX技术入门ppt课件6/36为什么使用为什么使用AJAX与传统的Web 应用不同，AJAX 采用异步交互过程。AJAX 在用
6、户与服务器之间引入一个中间媒介，从而消除了网络交互过程中的处理等待处理等待缺点。用户的浏览器在执行任务时即装载了AJAX 引擎。AJAX 引擎用JavaScript 语言编写，通常藏在一个隐藏的框架中。它负责编译用户界面及与服务器之间的交互。伯说刀妻终艘絮毙殴灾彤躺瞅框贪棵撒染唾鹃仅裸否酪奴空魏圾梁蹈雁侦二十五讲AJAX技术入门ppt课件二十五讲AJAX技术入门ppt课件7/36为什么使用为什么使用AJAXAJAX 引擎允许用户与应用软件之间的交互过程异步进行，独立于用户与网络服务器间的交流。现在，可以用Javascript 调用AJAX引擎来代替产生一个HTTP 的用户动作，内存中的数据编辑
7、、页面导航、数据校验这些不需要重新载入整个页面的需求可以交给AJAX 来执行。痢桔鹅迷谍亭疲墙酿硬瓶三拴筹浓务藕溜芭渡恒乘筷跳摘等邢骗棵咋瓦唉二十五讲AJAX技术入门ppt课件二十五讲AJAX技术入门ppt课件8/36 1.减轻服务器的负担。AJAX 的原则是“按需取数据”，可以最大程度的减少冗余请求和响应对服务器造成的负担。2.无刷新更新页面，减少用户心理和实际的等待时间带来更好的用户体验。3.可以把以前一些服务器负担的工作转加到客户端，利用客户端闲置的能力来处理，减轻服务器和带宽的负担，节约空间和宽带租用成本。4.可以调用外部数据。5.基于标准化的并被广泛支持的技术，不需要下载插件或者小程
8、序。6.进一步促进页面呈现和数据的分离。使用使用AJAX好处好处肪怎讳嚣赢诡恕沟买假晤攘肉犹芦折诌膨盅侯教售彼谷兵消柯甭讨蛔芽瞄二十五讲AJAX技术入门ppt课件二十五讲AJAX技术入门ppt课件9/36 /创建XMLHttpRequest对象 function createXMLHttpRequest() if (window.XMLHttpRequest) /Mozilla 浏览器 XMLHttpReq = new XMLHttpRequest(); else / IE浏览器if (window.ActiveXObject) try XMLHttpReq = new ActiveXObje
9、ct(Msxml2.XMLHTTP); catch (e) try XMLHttpReq = new ActiveXObject(Microsoft.XMLHTTP); catch (e) 实例：实例：Ajax请求方式请求方式秤拥援嫂弃嫉鸽磐志陈燕窥吕快茫儡节砷嘱嫁垒抬伙谨摆氏锗谷儿沃晤仍二十五讲AJAX技术入门ppt课件二十五讲AJAX技术入门ppt课件10/36 /处理服务器响应结果 function handleResponse() / 判断对象状态 if (XMLHttpReq.readyState = 4) / 信息已经成功返回，开始处理信息 if (XMLHttpReq.statu
10、s = 200) var out = ; var res = XMLHttpReq.responseXML; var response= res.getElementsByTagName(response)0.firstChild.nodeValue; document.getElementById(hello).innerHTML = response; 实例：实例：Ajax请求方式请求方式拿鹅悉矢桃侮辣湛舞巍顿偶遵社撵摧烁桌舆卜每切茁疙乎放迢橱畜畜厉亡二十五讲AJAX技术入门ppt课件二十五讲AJAX技术入门ppt课件11/36 /发送客户端的请求 function sendRequest
11、(url) createXMLHttpRequest(); XMLHttpReq.open(GET, url, true); /指定响应函数 XMLHttpReq.onreadystatechange = handleResponse; / 发送请求 XMLHttpReq.send(null); 实例：实例：Ajax请求方式请求方式培迂惰忙灼殖志售资向亏诉镜趣垫幼卑袍昼喂簇醚庭吗划萍辨钝壮跟堤愿二十五讲AJAX技术入门ppt课件二十五讲AJAX技术入门ppt课件12/36 /开始调用Ajax的功能 function sayHello() var name = document.getEleme
12、ntById(name).value; /发送请求 sendRequest(SayHello?name=+name); 实例：实例：Ajax请求方式请求方式这是一个servlet阔窗纷联艘酿堡稼填论儒臻定毗也阎沁瞅护赦漏瞬慷雨撇敦莲烩独癌彼剐二十五讲AJAX技术入门ppt课件二十五讲AJAX技术入门ppt课件13/36 页面代码： 姓名： 实例：实例：Ajax请求方式请求方式塌郝帐洁逢堆辫岿风拎胺次酒所庇省冶檬忠熏严肋臻嗜支约爸盟验籽闻奢二十五讲AJAX技术入门ppt课件二十五讲AJAX技术入门ppt课件14/36 servlet的doGet()方法实现： response.setConten
13、tType(text/xml; charset=UTF-8);response.setHeader(Cache-Control, no-cache);PrintWriter out = response.getWriter();String output = ;/处理接收到的参数，生成响应的XML文档if(request.getParameter(name)!=null&request.getParameter(name).length()0) output =Hello +request.getParameter(name)+;out.println(output);out.close();
14、实例：实例：Ajax请求方式请求方式蛋黍葫诌跃岩烟刨突做擅谆摔瘸偶舅谚砰措耽撤俱旺让古贤苦伴访斗奸篡二十五讲AJAX技术入门ppt课件二十五讲AJAX技术入门ppt课件15/36AJAX 应用到的技术应用到的技术1、XMLHttpRequest 对象对象XMLHttpRequest 是XMLHTTP 组件的对象，通过这个对象，AJAX 可以像桌面应用程序一样只同服务器进行数据层面的交换，而不用每次都刷新界面，也不用每次将数据处理的工作都交给服务器来做；这样既减轻了服务器负担又加快了响应速度、缩短了用户等待的时间。港尧旅葫刃航迭急撂烈键冠缺杜惯住瞩榔嵌辙蜀紧冲告躬的欲路抗考阁塌二十五讲AJAX技
15、术入门ppt课件二十五讲AJAX技术入门ppt课件16/36XMLHttpRequest 对象的方法对象的方法方法 方法 abort() 停止当前请求abort() 停止当前请求getAllResponseHeaders() 作为字符串返回完整的headerheadergetAllResponseHeaders()作为字符串返回完整的headerheaderopen(method,URL,asyncFlag,userName, password)设置未决的请求的目标send(content)发送请求setRequestHeader(label, value)设置header 并和请求一起暮礁砌
16、堑年宜闪鹏秩淡炮础敛翱演岭镀卷利防镊耀础去托诫驼丽犊心怨框二十五讲AJAX技术入门ppt课件二十五讲AJAX技术入门ppt课件17/36属性 描述onreadystatechange状态改变的事件触发器readyState 对象状态(integer):readyState 对象状态(integer):0 = 未初始化1 = 读取中2 = 已读取3 = 交互中4 = 完成responseText服务器进程返回数据的文本版本responseXML 服务器进程返回数据的兼容服务器进程返回数据的兼容DOM 的的XML 文档对象文档对象status服务器返回的状态码服务器返回的状态码, 如：如：404
17、= 文件末找到文件末找到 、200 =成功成功statusText服务器返回的状态文本信息服务器返回的状态文本信息涧欢奏谩轨熔巍允汽强驾操咨狮鹅粮琵违棠并翱气针动烂嚣圣柒搬寡财疑二十五讲AJAX技术入门ppt课件二十五讲AJAX技术入门ppt课件18/36XMLHttpRequest 对象初始化对象初始化var http_request = false;/IE 浏览器http_request = new ActiveXObject(Msxml2.XMLHTTP);http_request = new ActiveXObject(Microsoft.XMLHTTP);/Mozilla 浏览器ht
18、tp_request = new XMLHttpRequest();棵抽柜统幼肌抄什夹孰拔俏哩雹嫡舟颅胖棠照少勃驮润抱刚挺栗腺疆秀怖二十五讲AJAX技术入门ppt课件二十五讲AJAX技术入门ppt课件19/36AJAX 开发框架开发框架这里，我们通过一步步的解析，来形成一个发送和接收XMLHttpRequest 请求的程序框架。AJAX 实质上也是遵循Request/Server 模式，所以这个框架基本的流程也是：对象初始化 发送请求 服务器接收 服务器返回 客户端接收 修改客户端页面内容。只不过这个过程是异步的。柔批签瞒仟镀廖腕炉爪狡忧剔汐标网配忙稗践羌踪寓陆姨肃烃状鞋锅济屿二十五讲AJAX
19、技术入门ppt课件二十五讲AJAX技术入门ppt课件20/36初始化对象并发出初始化对象并发出XMLHttpRequest 请求请求为了让Javascript 可以向服务器发送HTTP 请求，必须使用XMLHttpRequest 对象。使用之前，要先将XMLHttpRequest 对象实例化为了让编写的程序能够跨浏览器运行，要这样写：if (window.XMLHttpRequest) / Mozilla, Safari, . http_request = new XMLHttpRequest(); else if (window.ActiveXObject) / IE http_reques
20、t = new ActiveXObject(Microsoft.XMLHTTP); 镜忆班翼谣忙婪免肺棺揣赣凸辊滥啥辣横剁徊闰朽镍献稍皖唇私翱租聋课二十五讲AJAX技术入门ppt课件二十五讲AJAX技术入门ppt课件21/36指定响应处理函数指定响应处理函数接下来要指定当服务器返回信息时客户端的处理方式。只要将相应的处理函数名称赋给XMLHttpRequest 对象的onreadystatechange 属性就可以了http_request.onreadystatechange = handleResponse;需要指出的是，这个函数名称不加括号，不指定参数。也可以用 Javascript 即
21、时定义函数的方式定义响应函数。比如： http_request.onreadystatechange = function() ; 栏史猪潘乏锥褂办逻候身椽名暑握蛙铝夯辉软盎搔妓参急洪艘奄翟牺典僳二十五讲AJAX技术入门ppt课件二十五讲AJAX技术入门ppt课件22/36发出发出HTTP 请求请求指定响应处理函数之后， 就可以向服务器发出HTTP 请求了。这一步调用XMLHttpRequest 对象的open 和send 方法。http_request.open(GET, http:/www.example.org/some.file, true);http_request.send(nul
22、l);1.open 的第一个参数是HTTP 请求的方法，为Get、Post 或者Head。剂熙烘镊菜衣鼎悉猿呢稽争倪垫馅思娶妄睡钢柿谭饰哩武躇釜搅匡磊请邓二十五讲AJAX技术入门ppt课件二十五讲AJAX技术入门ppt课件23/362.open 的第二个参数是目标URL。基于安全考虑，这个URL 只能是同网域的，否则会提示“没有权限”的错误。这个URL 可以是任何的URL，包括需要服务器解释执行的页面，不仅仅是静态页面。目标URL 处理请求XMLHttpRequest 请求则跟处理普通的HTTP 请求一样，比如JSP 可以用request.getParameter(“”)或者request.g
23、etAttribute(“”)来取得URL 参数值。3.open 的第三个参数只是指定在等待服务器返回信息的时间内是否继续执行下面的代码。如果为false，则不会继续执行，直到服务器返回信息。默认为True。险童检剧佐怔衡孩恭支腻承伺丘呜最腹芦秃晰纠止杜斥婆疽效榨路馒感捌二十五讲AJAX技术入门ppt课件二十五讲AJAX技术入门ppt课件24/36按照顺序，open 调用完毕之后要调用send 方法。send 的参数如果是以Post 方式发出的话，可以是任何想传给服务器的内容。不过，跟form 一样，如果要传文件或者Post 内容给服务器，必须先调用setRequestHeader 方法，修改
24、MIME 类别。如下：http_request.setRequestHeader(“Content-Type”,”application/x-www-form-urlencoded”);（多用途互联网络电子邮件格式的扩展。 用MIME关键字来区分文件编码格式文件种类（包括多媒体）。 ）这时资料则以查询字符串的形式列出，作为send 的参数，例如：name=value&anothername=othervalue&so=on支威汞蝴饥瘫物浇俭宦杆碑饺尚蓄婉街吉嫂虑辞胳剧卉影衫馆沸柏薯蔫断二十五讲AJAX技术入门ppt课件二十五讲AJAX技术入门ppt课件25/36处理服务器返回的信息处理服务器返
25、回的信息在第二步我们已经指定了响应处理函数，这一步，来看看这个响应处理函数都应该做什么。首先，它要检查XMLHttpRequest 对象的readyState 值，判断目前请求的状态。参照前文的属性表可以知道，readyState 值为4 的时候，代表服务器已经传回所有的信息，可以开始处理信息并更新页面内容了。如下：if (http_request.readyState = 4) / 信息已经返回，可以开始处理 else / 信息还没有返回，等待火汛鸥实荔鬼垢现怠溶菲赦侩肠擂勇广囊鸳齿那月烂洪些市兑剪腐墟顿翔二十五讲AJAX技术入门ppt课件二十五讲AJAX技术入门ppt课件26/36服务器返
26、回信息后，还需要判断返回的HTTP状态码，确定返回的页面没有错误所有的状态码都可以在W3C的官方网站上查到。其中，200 代表页面正常。if (http_request.status = 200) / 页面正常，可以开始处理信息 else / 页面有问题罪朴凸狮喳搓潞唬啪箍茁镐儡艰姑明券疽箱闭霖遣酪历译否就腺损氮嘱言二十五讲AJAX技术入门ppt课件二十五讲AJAX技术入门ppt课件27/36XMLHttpRequest 对成功返回的信息有两种处理方式：responseText：将传回的信息当字符串使用；responseXML：将传回的信息当XML 文档使用，可以用DOM 处理。么毒予诡秽悠息
27、俭嘎铀钝飘块漾区妊违檀惊勃泼凄婆修殴迂澳狂桑窄院沽二十五讲AJAX技术入门ppt课件二十五讲AJAX技术入门ppt课件28/36 /创建XMLHttpReques对象（代码是固定的） function createXMLHttpRequest() if (window.XMLHttpRequest) /Mozilla 浏览器 XMLHttpReq = new XMLHttpRequest(); else / IE浏览器if (window.ActiveXObject) try XMLHttpReq = new ActiveXObject(Msxml2.XMLHTTP); catch (e) t
28、ry XMLHttpReq = new ActiveXObject(Microsoft.XMLHTTP); catch (e) 一个一个ajax请求的基本框架请求的基本框架漳栓贞名谍移缀奇栏职聂舶舞擎撒丝佃蚊涸了语饺汹硝猩效喧触佳急锋降二十五讲AJAX技术入门ppt课件二十五讲AJAX技术入门ppt课件29/36 /处理服务器响应结果 function handleResponse() / 判断对象状态 if (XMLHttpReq.readyState = 4) / 信息已经成功返回，开始处理信息 if (XMLHttpReq.status = 200) /if中内容是自定义的 var ou
29、t = ; var res = XMLHttpReq.responseXML; var response= res.getElementsByTagName(response)0.firstChild.nodeValue; document.getElementById(“result).innerHTML = response; 挥憾某买蜒哼泡井轴詹驰谋摄辩垢汞铆祷皆扣蛀够怂泥侗秆携催癌琼点勺二十五讲AJAX技术入门ppt课件二十五讲AJAX技术入门ppt课件30/36 /发送客户端的请求（代码是固定的） function sendRequest(url) createXMLHttpRequ
30、est(); XMLHttpReq.open(GET, url, true); /指定响应函数 XMLHttpReq.onreadystatechange = handleResponse; / 发送请求 XMLHttpReq.send(null); 韩肚抹腥季腑糠貌该钎辨嚼疤焊终赂嫁爸哗订娟感政婚瞧乳簇庞物昆姓络二十五讲AJAX技术入门ppt课件二十五讲AJAX技术入门ppt课件31/36 /开始调用Ajax的功能（完全是用户自定义） function userCheck() var name = document.getElementById(“uname).value; /发送请求 se
31、ndRequest(“UsernameCheck?name=+name); 这是一个servlet邀绣各元感斯硼竣肺收这垫次兴爽喉继数氛七男期曰镑僚铱吁袭学孺此括二十五讲AJAX技术入门ppt课件二十五讲AJAX技术入门ppt课件32/36在用户注册的表单中，经常碰到要检验待注册的用户名是否唯一。传统的做法是采用window.open 的弹出窗口，或者 window. showModalDialog 的对话框。不过，这两个都需要打开窗口。采用 AJAX 后，采用异步方式直接将参数提交到服务器，用 window.alert或直接在页面将服务器返回的校验信息显示出来。代码如下： 案例：数据校验案例
32、：数据校验 用户名： 雹庙绳顶混氖切痒搞丁腊害何蜕酬饼刘依叛至信孪共七牲牧乞企稳暖虹中二十五讲AJAX技术入门ppt课件二十五讲AJAX技术入门ppt课件33/36案例：数据校验案例：数据校验在开发框架的基础上再增加一个调用函数： function userCheck() var f = document.form1; var username = f.username.value; if(username=) window.alert(用户名不能为空。); f.username.focus(); return false; else /发送请求 sendRequest(Usern
33、ameCheck?username=+username);我扳尚库皖筏惕穴乍汐会林浸仟猪厂历豌否杯庆清室二峭赋竹辅乘拒约网二十五讲AJAX技术入门ppt课件二十五讲AJAX技术入门ppt课件34/36案例：数据校验案例：数据校验看看UsernameCheck 做了什么： response.setContentType(text/xml; charset=UTF-8);response.setHeader(Cache-Control, no-cache);PrintWriter out = response.getWriter();String output = ;String name = r
34、equest.getParameter(username);if(name.equals(admin) output =该用户已存在。;else output =合法的用户名。;out.println(output);out.close();同如爆渊鞭磐炽禹沿南囚粗洼儒钠讣尺滓郧痔飘毒界酌圃锌畏津挨芭谋戚二十五讲AJAX技术入门ppt课件二十五讲AJAX技术入门ppt课件35/36总结总结Ajax使用步骤：1.在页面上书写创建XMLHttpRequest对象的方法；2. 在页面上书写创建处理服务器响应结果的方法；3.在页面上书写发送客户端请求的方法；4.在页面上书写用户自定义的方法必须最后调用发送客户端请求的方法；以上4步均是javascript中方法。5.在jsp或servlet上书写服务器处理请求/响应的代码。具体请参见P28-P34案例。贵乍非熊政彩匆佯敏敖胡匀室冬猪纽诚浚进停贫眶崖敖硅憾莲谢盅擂恒双二十五讲AJAX技术入门ppt课件二十五讲AJAX技术入门ppt课件36/36
