核心提示:Ajax技术:允许浏览器与服务器通信而无需刷新当前页面的技术①在Web传统模型中,客户端向服务器发送一个请求,服务器返回整个页面,如此反复;②在Ajax模型中,数据在客户端与服务器之间独立传输,服务器...
Ajax技术:允许浏览器与服务器通信而无需刷新当前页面的技术
①在Web传统模型中,客户端向服务器发送一个请求,服务器返回整个页面,如此反复;
②在Ajax模型中,数据在客户端与服务器之间独立传输,服务器不再返回整个页面。
(将请求与页面分离)
Ajax并不是一种新的技术,而是一些传统技术的组合
服务器端语言:服务器需要向浏览器发送特定信息的能力 XML(可拓展标记语言): 是一种描述数据的格式,Ajax程序需要某种格式化的格式来在服务器和客户端之间传递信息,XML是其中一种选择 XHML(可拓展标记语言)和CSS(级联样式表) : 标准化呈现 DOM 文档对象模型 :动态显示与交互 XMLHttpRequest :异步数据读取 JavaScript:绑定和处理所有数据简单的helloworld—-ajax
<!DOCTYPE html> <html> <head> <meta http-equiv="Content-Type" content="text/html; charset=UTF-8"> <title>Insert title here</title> <script type="text/javascript"> window.onload = function(){ //1.获取a节点,并为其添加一个onclick响应函数 document.getElementsByTagName("a")[0].onclick = function(){ //3.建立一个XMLHttpRequest对象 var request = new XMLHttpRequest(); //4.准备发送的数据 url /*var url = this.href;*/ var url = this.href + "?time=" + new Date(); var method = "GET"; //5.调用XMLHttpRequest对象的open()方法 request.open(method, url); //6.调用XMLHttpRequest对象的send()方法 request.send(null); //7.为XMLHttpRequest对象添加onreadystatechange响应函数 request.onreadystatechange = function(){ alert(request.readyState); //8.判断响应是否完成:XMLHttpRequest对象的readyState属性值为4的时候 if(request.readyState == 4){ //9.再判断响应是否可用:XMLHttpRequest对象status属性值为200 if(request.status == 200 || request.status == 304){ //10.打印响应结果:responseText alert(request.responseText); } } } //2.取消a节点的默认行为 return false; /* * 小结:利用XMLHttpRequest实例与服务器进行通信, * 有以下三个关键部分: * 1).onreadystatechange() 事件处理函数 * 2).open() * 3).send() * ------------------ * onreadystatechange方法 * 该事件处理函数由服务器触发,而不是用户 * XMLHttpRequest对象的readystate属性可以作为服务器与客户端之间通信状态的标志 * readystate属性值的每次改变都会触发readystatechange事件 * * open方法 * 建立请求但是没有发送请求 * open(method,url) method:请求的方式 url:请求发送的地方 * 可以添加一个时间戳在URL参数后面,就能确保URL的唯一性,避免出现浏览器缓存结果 * * --------------------- * readyState表示ajax请求的当前状况 * 值: 0代表还未初始化,没有调用open方法 * 1代表正在加载,open方法已被调用,但是send方法还未被调用 * 2代表加载完毕,send方法已被调用,请求已经开始 * 3代表交互中,服务器正在发送响应 * 4代表完成,响应发送完毕 * * ------------------- * 在XMLHttpRequest中,服务器发送的状态码都保存在status属性中 * 通过将其值与200或304比较,以确保服务器是否发送了一个 成功的响应 * 常用状态码及其含义:404---->>>没有找到页面 403------>>>禁止访问 * 500---->>>内部服务器出错 * 200---->>>一切正常 304----->>>没有被修改 * * ---------------------- * respondseText * XMLHttpRequest的responseText属性包含了从服务器发过来的数据 * (只有当readystate的值为4时才能使用) * */ } } </script> </head> <body> <a href="helloAjax.txt">helloAjax</a> </body> </html>