Ajax05系列教程.pptVIP

ACCP V4.0 ACCP V4.0 Ajax的使用 魏涛 * 目标 Ajax简介 XMLHttpRequest对象 案例分析 * Ajax简介 Ajax不是一个特定的技术，而是一种应用的技巧。是javaScript中一个组件，属于客户端脚本技术。 Ajax并不是一项新技术，这项技术的最新术语是XMLHttpRequest对象（XHR）。 早在IE5.0时期就有了这个技术，当时是以ActiveX组件的身份出现。 * 谁在使用这项技术？ 成功案例1：Google是最早采用这项技术（Google Maps，Gmail）。 成功案例2：在一些大型的电子商务网站中使用到，例如淘宝在线交易网站最新的版本。 * 相关技术 要学习Ajax并不难，首先要有javaScript基础。 对于服务器端无论使用JAVA，.NET，PHP，ASP……都可以使用Ajax技术。 * 设计方面的考虑？ 每个WEB工程的设计方面都不相同，但是有一个原则时永远不会改变 －－“减少于服务器端的通讯量” 假如使用好了Ajax组件，可以另网站的效率更高效，但是要避免在不同的域之间大量的数据传递。 * XMLHttpRequest对象 Ajax的应用来源于XMLHttpRequest对象的支持。 当前有很多浏览器支持这个对象，所以在大多数浏览器都可以使用Ajax这项技术。 * XMLHttpRequest对象 XMLHttpRequest对象的方法 abort() ----停止当前请求 getAllResponseHeaders() ----把HTTP请求的所有相应首部作为”键/值”对返回 getResponseHeader(“header”) ----返回指定的字符串值 open(“method”,”url”,bool) ----建立对服务器的调用 send(context) ----向服务器发送请求 setRequestHeader(“header”,”value”) ----把首部设置为所提供的值 *在设置任何首部值之前必须先调用open() * XMLHttpRequest对象 onreadystatrchange ----每个当状态改变时都会触发这个事件处理器，通常这个时候调用一个javaScript函数 readyState ----请求的状态，有五个可取值（0=未初始化，1=正在加载，3=交换中，2=已经加载，4=完成） responseText ----服务器的相应，表示一个字符串 responseXML ----服务器的相应，表示一个XML，这个对象可以解析为一个DOM对象 status ----服务器的HTTP状态，例如：200，403，404，500…… statusText ----HTTP状态码相应文本，例如：OK,Not Found(未找到)…… * Ajax的交互模式 * 案例分析 Index.html页面 form action=# name=frm input type=text name=input_text value=tom/ input type=button value=Add onclick=startRequest() / /form * 案例分析 在页面中首先创建XMLHttpRequest对象 * 案例分析 页面的主调方法 * 案例分析 此方法被xmlHttp.onreadystatechange方法唤醒 * 案例分析 服务器端的servlet处理 * 结束 * SHGFHLGHLSHLGHSLKHGLSHLGHFGHLSHGFHGSHGHGLSHGJFHGLKSH SHFGJKSHLGHLSHGLSHGLSHFLGHLSHGKSHGLKSHLKGHLSLGHSLG ACCP V4.0 ACCP V4.0 *